lead-in followed by a became two side-by-side
COLUMNS, squeezing the lead-in into a narrow ragged strip
(BIR 1601-C).
column - every inline child becomes its own flex item, so
`
Note: text
`
broke into three stacked lines: icon, "Note:", sentence
(the payroll status notes).
Normal block layout is what arbitrary prose actually wants: inline children
stay on one line, block children stack. The close button floats out of flow
so it needs no layout mode at all. */
.alert {
display: block;
position: relative;
}
.alert > .alert-body { flex: 1 1 auto; min-width: 0; }
.alert > p:last-child { margin-bottom: 0; }
/* A dismissible alert reserves room so the text never runs under the button. */
.alert:has(> .btn-close, > .close) { padding-right: calc(var(--space-xl) + 28px); }
.alert > .btn-close,
.alert > .close {
position: absolute;
top: var(--space-md);
right: var(--space-md);
}
/* Opt back into the row when an alert really is icon + body. */
.alert:has(> .alert-icon) { flex-direction: row; align-items: flex-start; gap: var(--space-lg); }
.alert > .alert-icon { flex: 0 0 auto; }
.toast-close { color: var(--color-toast-foreground); }
/* ==========================================================================
.divider — legible in both themes.
========================================================================== */
.stellar-main .divider {
background: var(--color-muted);
color: var(--color-foreground);
border-left: 4px solid var(--color-primary);
padding: var(--space-lg) var(--space-xl);
margin-bottom: var(--space-lg) !important;
font-size: var(--text-sm);
font-weight: 600;
border-radius: var(--radius-sm);
}
.stellar-main .divider.fw-bold, .stellar-main .divider .fw-bold { font-weight: 700; color: var(--color-foreground); }
/* ==========================================================================
Company picker (profile/select/company).
========================================================================== */
.select-company-page, body.select-company { display: flex; flex-direction: column; min-height: 100dvh; }
.search-wrapper { position: relative; max-width: 500px; margin: 0 auto var(--space-3xl); }
.search-wrapper .search-icon {
position: absolute;
left: var(--space-xl);
top: 50%;
transform: translateY(-50%);
color: var(--color-muted-foreground);
font-size: 18px;
pointer-events: none;
z-index: 1;
}
.search-wrapper input {
width: 100%;
height: var(--control-h-lg);
padding-left: calc(var(--space-3xl) + var(--space-lg));
padding-right: var(--space-xl);
border-radius: 50px;
border: 1px solid var(--color-border-strong);
background: var(--color-card);
color: var(--color-card-foreground);
font-size: var(--text-base);
}
.search-wrapper input:focus {
outline: none;
border-color: var(--color-ring);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ring) 20%, transparent);
}
/* Company cards read as a picker: clear hit area, obvious hover, keyboard ring. */
.company-card, .companies-container > a {
display: flex;
align-items: center;
gap: var(--space-xl);
padding: var(--space-xl);
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
color: var(--color-card-foreground);
text-decoration: none;
min-height: 76px;
transition: box-shadow var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
}
.company-card:hover, .companies-container > a:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-primary);
color: var(--color-card-foreground);
}
.company-card:focus-visible, .companies-container > a:focus-visible {
outline: 2px solid var(--color-ring);
outline-offset: 2px;
}
.companies-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-xl);
margin-bottom: var(--space-3xl);
}
.create-company-btn {
background: var(--color-primary) !important;
color: var(--color-on-primary) !important;
min-height: var(--control-h-lg);
}
.create-company-btn:hover { background: var(--color-primary-hover) !important; color: var(--color-on-primary) !important; }
/* ==========================================================================
bootstrap-notify toast (`.alert[data-notify="container"]`).
Its markup is a flat run of spans with an absolutely-positioned close
button, so the message sat off-centre against the icon. Laying it out as a
grid aligns icon, text and dismiss on one baseline.
========================================================================== */
.alert[data-notify="container"] {
display: grid !important;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--space-md);
/* The template's Bootstrap 3 grid classes did nothing under Bootstrap 5,
so the toast collapsed to the width of its text and the right edge moved
with every message. Give it a real, stable width. */
width: min(380px, calc(100vw - 2 * var(--space-xl)));
max-width: calc(100vw - 2 * var(--space-xl));
/* Icon against the FIRST line of text, not the centre of a wrapped block. */
align-items: start;
padding: var(--space-lg) var(--space-xl) !important;
border: 0;
border-radius: var(--radius-md) !important;
background: var(--color-toast-surface) !important;
color: var(--color-toast-foreground) !important;
box-shadow: var(--shadow-lg);
font-size: var(--text-sm);
line-height: 1.4;
}
.alert[data-notify="container"] * { color: inherit; }
.alert[data-notify="container"] [data-notify="icon"] {
grid-column: 1;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
width: 24px;
height: 24px;
margin: 0 !important;
position: static !important; /* the plugin absolutely-positions this */
top: auto !important;
left: auto !important;
}
.alert[data-notify="container"] [data-notify="title"]:empty { display: none; }
.alert[data-notify="container"] [data-notify="title"],
.alert[data-notify="container"] [data-notify="message"] {
grid-column: 2;
display: block;
text-align: left;
margin: 0;
word-break: break-word;
}
.alert[data-notify="container"] [data-notify="title"] { font-weight: 700; }
.alert[data-notify="container"] [data-notify="url"] { display: none; }
/* Dismiss: same 28px control as every other close button, in flow. */
.alert[data-notify="container"] .close {
grid-column: 3;
position: static !important;
margin: 0 !important;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: inherit;
opacity: .75;
font-size: 18px;
line-height: 1;
text-shadow: none;
cursor: pointer;
}
.alert[data-notify="container"] .close:hover { opacity: 1; background: rgba(255, 255, 255, .16); }
.alert[data-notify="container"] .close:focus-visible {
outline: 2px solid var(--color-ring);
outline-offset: 2px;
opacity: 1;
}
/* Status accents keep their meaning on the dark toast surface. */
.alert[data-notify="container"].alert-success [data-notify="icon"] { color: var(--color-toast-success); }
.alert[data-notify="container"].alert-danger [data-notify="icon"] { color: var(--color-toast-error); }
.alert[data-notify="container"].alert-warning [data-notify="icon"] { color: var(--color-toast-warning); }
.alert[data-notify="container"].alert-info [data-notify="icon"] { color: var(--color-toast-success); }
/* ==========================================================================
Login page — brand alignment.
The panel used its own blues; these pull it onto the primary navy/accent so
it reads as the same product as the rest of the app.
========================================================================== */
.login-button, .btn-login, button.login-button {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-ink) 100%) !important;
color: #FFFFFF !important;
border: 0;
min-height: var(--control-h-lg);
font-family: var(--font-display);
font-weight: 600;
letter-spacing: .02em;
border-radius: 50px;
}
.login-button:hover, .btn-login:hover {
background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%) !important;
color: #FFFFFF !important;
}
.login-button i, .btn-login i { color: inherit !important; }
/* "Book a demo" affordance reads as a real control. */
.social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .25);
background: rgba(255, 255, 255, .08);
color: #FFFFFF;
font-size: 20px;
text-decoration: none;
transition: background var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
}
.social-btn:hover, .social-btn:focus-visible {
background: var(--color-accent);
border-color: var(--color-accent);
color: #0F172A;
}
.social-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
/* Feature ticks take the brand accent rather than a stock green. */
.feature i, .features i { color: var(--color-accent) !important; }
/* Inputs on the dark login panel. */
.input-with-icon input, .login-form .form-control {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .18);
color: #FFFFFF;
}
.input-with-icon input::placeholder, .login-form .form-control::placeholder {
color: rgba(255, 255, 255, .55);
}
.input-with-icon input:focus, .login-form .form-control:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(0, 210, 255, .22);
background: rgba(255, 255, 255, .10);
}
.input-with-icon i { color: rgba(255, 255, 255, .6); }
/* ==========================================================================
Section dividers (``).
These are dark gradient banners, so their ink is white regardless of theme.
`.card h6 { color: … }` was outranking `.divider { color: white }` and
painting the label dark-on-dark.
========================================================================== */
.divider,
.card h6.divider,
.card .divider,
.stellar-main .divider {
background: linear-gradient(to right, var(--brand-navy), var(--brand-navy-2)) !important;
color: #FFFFFF !important;
border: 0;
border-radius: var(--radius-md);
padding: var(--space-lg) var(--space-xl);
margin-bottom: var(--space-lg) !important;
font-size: var(--text-sm);
font-weight: 600;
display: flex;
align-items: center;
gap: var(--space-md);
min-height: 44px;
}
.divider *, .card h6.divider * { color: #FFFFFF !important; }
/* A divider that carries a toggle: checkbox and label share one baseline. */
.divider input[type="checkbox"] {
width: 16px;
height: 16px;
flex: 0 0 16px;
margin: 0;
accent-color: #FFFFFF;
cursor: pointer;
}
.divider label, .divider span { margin: 0; font-weight: 600; cursor: pointer; }
.divider .form-group, .divider .form-check { margin: 0; min-height: 0; }
/* ==========================================================================
Standalone form pages (create-company and friends) — they own the whole
viewport rather than sitting inside the app shell.
========================================================================== */
.stellar-form-page {
background-color: var(--color-background);
color: var(--color-foreground);
min-height: 100dvh;
}
.stellar-form-page .card {
max-width: 1180px;
margin: 0 auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
background-color: var(--color-card);
color: var(--color-card-foreground);
}
.stellar-form-page .card > .header {
padding: var(--space-2xl) var(--space-2xl) 0;
}
.stellar-form-page .card > .header .title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 700;
color: var(--color-card-foreground);
}
.stellar-form-page .card > .header hr { border-color: var(--color-border); opacity: 1; margin-top: var(--space-lg); }
/* Actions pinned at the end of a long form, always reachable. */
.stellar-form-page .card .form-actions,
.stellar-form-page .card > .content > .row:last-child {
display: flex;
justify-content: flex-end;
gap: var(--space-md);
flex-wrap: wrap;
padding-top: var(--space-xl);
border-top: 1px solid var(--color-border);
margin-top: var(--space-2xl);
}
@media (max-width: 575.98px) {
.stellar-form-page .content { padding: var(--space-lg) !important; }
.stellar-form-page .card .form-actions .btn { width: 100%; }
}
/* Logo dropzone reads as an upload target, not an empty box. */
.stellar-form-page .image-upload-wrap,
.stellar-form-page .form-group.text-center img { border-radius: var(--radius-md); }
/* ==========================================================================
Logo picker on the company form.
The preview had no width constraint, so the image overflowed its col-md-3
and covered the Zip Code / SSS fields in the next column.
========================================================================== */
.picture-container { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
.picture {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 220px;
aspect-ratio: 1 / 1;
margin: 0;
overflow: hidden;
border: 2px dashed var(--color-border-strong);
border-radius: var(--radius-lg);
background: var(--color-muted);
cursor: pointer;
transition: border-color var(--duration-normal) var(--ease-out);
}
.picture:hover, .picture:focus-visible { border-color: var(--color-primary); }
.picture:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.picture__image { display: block; width: 100%; height: 100%; }
.picture__img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
padding: var(--space-lg);
}
/* Give the hint some presence so the control reads as an upload target. */
.picture-container::after {
content: 'Click to upload';
font-size: var(--text-xs);
color: var(--color-muted-foreground);
}
/* ==========================================================================
Field errors — one message per field.
crispy-forms renders `.invalid-feedback`; stellar-forms.js reuses that same
element for client-side validation, so there is never a second copy.
========================================================================== */
.invalid-feedback {
display: none;
width: 100%;
margin-top: var(--space-xs);
font-size: 11px; /* smaller than the field text */
line-height: 1.35;
font-weight: 500;
color: var(--color-destructive-ink);
}
/* Show it whenever the field it describes is invalid, whatever the markup
nesting - Bootstrap's own rule only covers an immediate sibling. */
.invalid-feedback:not(:empty) { display: block; }
.is-invalid ~ .invalid-feedback,
.form-group:has(.is-invalid) .invalid-feedback,
.mb-3:has(.is-invalid) .invalid-feedback { display: block; }
/* A field that is valid again must not keep an old message on screen. */
.invalid-feedback:empty { display: none !important; }
/* crispy wraps each error in
(block layout) or (inline); neither
should add its own spacing or re-style the text inside the message box. */
.invalid-feedback p,
.invalid-feedback span {
margin: 0;
font-size: inherit;
font-weight: inherit;
color: inherit;
}
table td .btn-icon, .table td .btn-icon, table.dataTable td .btn, table.dataTable td .btn-sm, table.dataTable td .btn-icon { width: var(--control-h-sm) !important; height: var(--control-h-sm) !important; min-width: var(--control-h-sm) !important; min-height: var(--control-h-sm) !important; max-width: var(--control-h-sm) !important; max-height: var(--control-h-sm) !important; padding: 0 !important; gap: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; line-height: 1 !important; aspect-ratio: 1/1 !important; } table td .btn-icon i, .table td .btn-icon i, table.dataTable td .btn i, table.dataTable td .btn-icon i { margin: 0 !important; padding: 0 !important; font-size: 16px !important; line-height: 1 !important; }
/* ==========================================================================
Hint — inline explanation of how a setting behaves.
Named stellar-hint, not stellar-callout: an older, already-established
.stellar-callout exists (bir_1601c.html / bir_2316.html), built for dense,
collapsible BIR filing notes via / with its own __head /
__body / __lede structure. This component was written without knowing that
one existed, under the same class name, and for a while both rulesets were
silently fighting over every .stellar-callout on every page, this one
included — whichever was defined later in the file always won. Different
name, so a compact single-field explanation and a dense multi-paragraph
filing note can never collide again.
Purpose: payroll configuration is full of fields whose effect is not
guessable from the label ("Excess Cash Convertible", "Attendance
Requirement"). A wrong value here silently changes people's pay, and the
cost of that is only discovered a cutoff later. This is the house pattern
for saying, next to the field itself, what the setting actually does.
Markup:
Affects pay
Short, specific sentence about what changes.
The title is optional; without it the glyph attaches to the box itself.
Severity is carried by THREE signals, never colour alone (accessibility.md):
the glyph, the title wording, and the tint. Pick by consequence, not by tone:
--info neutral "here is how this works"
--warning a wrong value changes pay or attendance
--danger destructive / irreversible
--success confirms a safe automatic behaviour
Dark mode is automatic: every colour below resolves from a status token that
already has a verified dark override, so there is nothing theme-specific here.
========================================================================== */
.stellar-hint {
display: block;
margin: var(--space-lg) 0;
padding: var(--space-lg) var(--space-xl);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-muted-foreground);
border-radius: var(--radius-md);
background: var(--color-muted);
color: var(--color-foreground);
font-size: 13px;
line-height: var(--leading-normal);
}
.stellar-hint p {
margin: 0 0 var(--space-md);
font-size: 13px;
}
.stellar-hint > :last-child { margin-bottom: 0; }
.stellar-hint__title {
display: flex;
align-items: baseline;
gap: var(--space-md);
font-weight: 600;
color: var(--color-muted-foreground);
font-size: 13px;
}
/* Glyph rides on the title when there is one, otherwise on the box. A hint
with no title still gets its marker, so the severity is never colour-only. */
.stellar-hint__title::before,
.stellar-hint:not(:has(.stellar-hint__title))::before {
content: '\2139'; /* information source */
flex: 0 0 auto;
font-weight: 700;
line-height: 1;
}
.stellar-hint:not(:has(.stellar-hint__title))::before {
float: left;
margin-right: var(--space-md);
}
/* Field names / codes referenced in the explanation. */
.stellar-hint code {
font-family: var(--font-mono);
font-size: 0.9em;
padding: 1px 4px;
border-radius: var(--radius-sm);
background: rgba(127, 127, 127, .16);
color: inherit;
}
/* --- Severities ------------------------------------------------------- */
.stellar-hint--info {
border-left-color: var(--color-info-ink);
background: var(--color-info-bg);
}
.stellar-hint--info .stellar-hint__title,
.stellar-hint--info::before { color: var(--color-info-ink); }
.stellar-hint--warning {
border-left-color: var(--color-warning-ink);
background: var(--color-warning-bg);
}
.stellar-hint--warning .stellar-hint__title,
.stellar-hint--warning::before { color: var(--color-warning-ink); }
.stellar-hint--warning .stellar-hint__title::before,
.stellar-hint--warning:not(:has(.stellar-hint__title))::before {
content: '\26A0'; /* warning sign */
}
.stellar-hint--danger {
border-left-color: var(--color-destructive-ink);
background: var(--color-destructive-bg);
}
.stellar-hint--danger .stellar-hint__title,
.stellar-hint--danger::before { color: var(--color-destructive-ink); }
.stellar-hint--danger .stellar-hint__title::before,
.stellar-hint--danger:not(:has(.stellar-hint__title))::before {
content: '\26D4'; /* no entry */
}
.stellar-hint--success {
border-left-color: var(--color-success-ink);
background: var(--color-success-bg);
}
.stellar-hint--success .stellar-hint__title,
.stellar-hint--success::before { color: var(--color-success-ink); }
.stellar-hint--success .stellar-hint__title::before,
.stellar-hint--success:not(:has(.stellar-hint__title))::before {
content: '\2713'; /* check mark */
}
/* Sits directly under the field it explains, inside a form group. */
.form-group > .stellar-hint,
.mb-3 > .stellar-hint { margin-top: var(--space-md); }
/* ==========================================================================
2026-10 REDESIGN LAYER - read this block LAST.
App shell (two-row header with a 3-level menu + page search), one control scale,
five button variants, one status-badge set, tabular figures, dashboard.
It sits at the end of the file on purpose: it wins over the layers above
by order, using !important only where an earlier rule already did.
Every colour pair below is contrast-checked (light / dark):
success button #FFF on #006A40 6.70 (dark: #052E1A on #2EB872 5.82)
header text #E7EDF5 on header 13.13 / 15.77 (the --sidebar-* tokens now paint the header)
sub-link #B4C1D1 on sidebar 8.46 / 10.16 (7.11 / 8.82 on hover)
group label #94A6BC on sidebar 6.22 / 7.47
active text #FFF on active pill 10.70 / 13.43
active bar #00D2FF vs pill 5.94 / 7.46 (non-text, 3:1)
count badge #0B1B2E on #00D2FF 9.63
input border #7D8B9B vs card 3.48 (light; dark keeps #697C96 3.45)
========================================================================== */
/* --- R1. Tokens -------------------------------------------------------- */
:root {
--control-h-sm: 32px;
--control-h: 40px;
--control-h-lg: 48px;
--control-radius: 8px;
--radius-xl: 12px;
/* Inputs and selects are control boundaries (WCAG 1.4.11 wants 3:1). The
old light value #CBD5E1 measured 1.48:1 on white. */
--color-border-control: #7D8B9B;
--sidebar-bg: #15253A;
--sidebar-fg: #E7EDF5;
--sidebar-fg-muted: #B4C1D1;
--sidebar-label: #94A6BC;
--sidebar-hover: rgba(255, 255, 255, .06);
--sidebar-active: rgba(255, 255, 255, .12);
--sidebar-line: rgba(255, 255, 255, .08);
--sidebar-indicator: #00D2FF;
--sidebar-ring: #7DD3FC;
--count-bg: #00D2FF;
--count-fg: #0B1B2E;
--btn-success-bg: #006A40;
--btn-success-hover: #00553A;
--btn-success-fg: #FFFFFF;
}
:root[data-theme="dark"] {
--color-border-control: #697C96;
--sidebar-bg: #0B1322;
--btn-success-bg: #2EB872;
--btn-success-hover: #32D583;
--btn-success-fg: #052E1A;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-border-control: #697C96;
--sidebar-bg: #0B1322;
--btn-success-bg: #2EB872;
--btn-success-hover: #32D583;
--btn-success-fg: #052E1A;
}
}
/* --- R2. Buttons: one scale, five variants ------------------------------ */
.btn {
height: var(--control-h);
min-height: var(--control-h);
padding: 0 var(--space-xl);
gap: var(--space-md);
border-radius: var(--control-radius);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: 0;
}
.btn-sm, .btn-xs {
height: var(--control-h-sm);
min-height: var(--control-h-sm);
padding: 0 var(--space-lg);
font-size: 13px;
gap: 6px;
}
.btn-lg {
height: var(--control-h-lg);
min-height: var(--control-h-lg);
padding: 0 var(--space-2xl);
font-size: var(--text-base);
}
.btn-icon { width: var(--control-h); }
.btn-icon.btn-sm, .btn-icon.btn-xs { width: var(--control-h-sm); }
/* The heights above include the border: some legacy rule left these content-box, which drew every button and
input 2px taller than the scale (34 / 42 / 44). */
.btn, .form-control, .form-select, .custom-select, select,
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"],
input[type="url"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="month"] { box-sizing: border-box; }
/* An older rule gave buttons in a card header a 44px minimum; they follow the scale like every other button. */
.card .content > .row:first-child .btn, .card .card-body > .d-flex .btn { min-height: var(--control-h); }
.card .content > .row:first-child .btn-sm, .card .card-body > .d-flex .btn-sm { min-height: var(--control-h-sm); }
.btn:focus-visible {
outline: 2px solid var(--color-ring);
outline-offset: 2px;
box-shadow: none;
}
.btn:disabled, .btn.disabled { opacity: .5; }
/* Buttons are flat. custom.css gave every variant a coloured glow (0 4px 10px in its own colour - warning amber,
success green ...) and lifted every button 2px on hover, so a plain button read as a different, highlighted one.
Keyboard focus keeps the outline ring above; the sign-in button and the header's quick action keep their own
(more specific) shadows. */
.btn, .btn:hover, .btn:focus { box-shadow: none; }
.btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark,
.btn-default, .btn-outline-primary, .btn-main, .btn-yellow, .btn-add-row, .btn-add-new-row),
.btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark,
.btn-default, .btn-outline-primary, .btn-main, .btn-yellow, .btn-add-row, .btn-add-new-row):is(:hover, :focus) {
box-shadow: none;
}
.btn:hover { transform: none; }
.btn.shadow-sm, .btn.shadow, .btn.shadow-lg { box-shadow: none !important; } /* Bootstrap shadow utilities on a button, too */
.btn-add-row, .btn-add-new-row { background-image: none !important; border-radius: var(--control-radius) !important; }
/* primary - the main action */
.btn-primary {
background-color: var(--color-primary) !important;
border-color: var(--color-primary) !important;
color: var(--color-on-primary) !important;
}
.btn-primary:hover, .btn-primary:active {
background-color: var(--color-primary-hover) !important;
border-color: var(--color-primary-hover) !important;
color: var(--color-on-primary) !important;
}
/* success - Save / Approve / Complete stay green (Marco, 2026-10-06).
Light #006A40 + white 6.70:1 (hover #00553A 8.90:1); dark #2EB872 + #052E1A ink 5.82:1. */
.btn-success {
background-color: var(--btn-success-bg) !important;
border-color: var(--btn-success-bg) !important;
color: var(--btn-success-fg) !important;
}
.btn-success:hover, .btn-success:active {
background-color: var(--btn-success-hover) !important;
border-color: var(--btn-success-hover) !important;
color: var(--btn-success-fg) !important;
}
.btn-outline-success {
background-color: var(--color-card) !important;
border: 1px solid var(--color-success-ink) !important;
color: var(--color-success-ink) !important;
}
.btn-outline-success:hover, .btn-outline-success:active {
background-color: var(--color-success-bg) !important;
color: var(--color-success-ink) !important;
}
/* btn-yellow ("New employee", "Add cut-off" ... 59 uses) and btn-main were a blue gradient that lifted on hover - a
seventh look. They are each page's main create action, so they are primary. */
.btn-yellow, .btn-main {
background: var(--color-primary) !important;
background-image: none !important;
border: 1px solid var(--color-primary) !important;
color: var(--color-on-primary) !important;
box-shadow: none !important;
}
.btn-yellow:hover, .btn-yellow:focus, .btn-yellow:active,
.btn-main:hover, .btn-main:focus, .btn-main:active {
background: var(--color-primary-hover) !important;
border-color: var(--color-primary-hover) !important;
color: var(--color-on-primary) !important;
box-shadow: none !important;
transform: none !important;
}
/* secondary - neutral filled */
.btn-secondary, .btn-default {
background-color: var(--color-muted) !important;
border-color: var(--color-border-strong) !important;
color: var(--color-foreground) !important;
}
.btn-secondary:hover, .btn-default:hover,
.btn-secondary:active, .btn-default:active {
background-color: color-mix(in srgb, var(--color-muted) 80%, var(--color-foreground) 8%) !important;
color: var(--color-foreground) !important;
}
/* outline - brand outline (btn-info / btn-warning / btn-outline-* map here) */
.btn-outline, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark,
.btn-outline-info, .btn-outline-warning, .btn-info, .btn-warning {
background-color: var(--color-card) !important;
border: 1px solid var(--color-border-control) !important;
color: var(--color-primary-ink) !important;
}
.btn-outline:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover,
.btn-outline-info:hover, .btn-outline-warning:hover, .btn-info:hover, .btn-warning:hover,
.btn-outline:active, .btn-outline-primary:active, .btn-info:active, .btn-warning:active {
background-color: var(--color-info-bg) !important;
border-color: var(--color-primary-ink) !important;
color: var(--color-primary-ink) !important;
}
/* ghost - no chrome until hovered (btn-light maps here) */
.btn-ghost, .btn-light {
background-color: transparent !important;
border: 1px solid transparent !important;
color: var(--color-foreground) !important;
}
.btn-ghost:hover, .btn-light:hover, .btn-ghost:active, .btn-light:active {
background-color: var(--color-muted) !important;
color: var(--color-foreground) !important;
}
/* danger - destructive */
.btn-danger {
background-color: var(--color-destructive-ink) !important;
border-color: var(--color-destructive-ink) !important;
color: #FFFFFF !important; /* 6.57:1 on #B42318 */
}
.btn-danger:hover, .btn-danger:active {
background-color: color-mix(in srgb, var(--color-destructive-ink) 85%, #000) !important;
border-color: color-mix(in srgb, var(--color-destructive-ink) 85%, #000) !important;
color: #FFFFFF !important;
}
:root[data-theme="dark"] .btn-danger { color: #1A0A08 !important; } /* dark ink on #FDA29B: 9.6:1 */
.btn-outline-danger {
background-color: var(--color-card) !important;
border: 1px solid var(--color-destructive-ink) !important;
color: var(--color-destructive-ink) !important;
}
.btn-outline-danger:hover { background-color: var(--color-destructive-bg) !important; }
/* --- R3. Form controls: same heights as buttons --------------------------- */
.form-control, .form-select, .custom-select,
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"],
input[type="url"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="month"], select {
height: var(--control-h);
min-height: var(--control-h);
border-color: var(--color-border-control);
border-radius: var(--control-radius);
}
textarea, textarea.form-control { height: auto; }
.form-control-sm, .form-select-sm, .input-sm {
height: var(--control-h-sm) !important;
min-height: var(--control-h-sm) !important;
border-radius: var(--control-radius);
font-size: 13px;
}
select[multiple], select[size]:not([size="1"]) { height: auto; }
.input-group > .form-control, .input-group > .form-select, .input-group-text { height: var(--control-h); }
.input-group-text { border-color: var(--color-border-control); }
.form-control:focus, .form-select:focus, select:focus, textarea:focus {
border-color: var(--color-ring);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ring) 24%, transparent);
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
border-color: var(--color-border-control) !important;
border-radius: var(--control-radius) !important;
min-height: var(--control-h) !important;
}
.select2-container .select2-selection--single { height: var(--control-h) !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(var(--control-h) - 2px) !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(var(--control-h) - 2px) !important; }
.dataTables_wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.dataTables_wrapper select:not([multiple]) { min-height: var(--control-h); }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
min-height: var(--control-h);
height: var(--control-h);
padding-top: 0;
padding-bottom: 0;
border-color: var(--color-border-control);
border-radius: var(--control-radius);
}
/* --- R4. Status badges: one set, one status map --------------------------- */
.badge, .badge-st {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: var(--r-pill, 999px);
font-size: 12px;
font-weight: 600;
line-height: 1.4;
letter-spacing: .01em;
white-space: nowrap;
border: 1px solid transparent;
}
.badge-st--success, .badge.bg-success, .badge.badge-success, .badge.text-bg-success {
background-color: var(--color-success-bg) !important; color: var(--color-success-ink) !important;
border-color: color-mix(in srgb, var(--color-success-ink) 28%, transparent) !important;
}
.badge-st--warning, .badge.bg-warning, .badge.badge-warning, .badge.text-bg-warning {
background-color: var(--color-warning-bg) !important; color: var(--color-warning-ink) !important;
border-color: color-mix(in srgb, var(--color-warning-ink) 30%, transparent) !important;
}
.badge-st--info, .badge.bg-info, .badge.bg-primary, .badge.badge-info, .badge.text-bg-info, .badge.text-bg-primary {
background-color: var(--color-info-bg) !important; color: var(--color-info-ink) !important;
border-color: color-mix(in srgb, var(--color-info-ink) 26%, transparent) !important;
}
.badge-st--danger, .badge.bg-danger, .badge.badge-danger, .badge.text-bg-danger {
background-color: var(--color-destructive-bg) !important; color: var(--color-destructive-ink) !important;
border-color: color-mix(in srgb, var(--color-destructive-ink) 28%, transparent) !important;
}
.badge-st--neutral, .badge.bg-secondary, .badge.bg-light, .badge.bg-dark, .badge.badge-secondary,
.badge.text-bg-secondary, .badge.text-bg-light {
background-color: var(--color-muted) !important; color: var(--color-foreground) !important;
border-color: var(--color-border) !important;
}
/* THE status map - the one place a status string becomes a colour. Markup:
{{ obj.status }} (or the same from a JS render).
Case-insensitive; an unknown status stays neutral. Text always carries the meaning. */
.badge-st[data-status] { background-color: var(--color-muted); color: var(--color-foreground); border-color: var(--color-border); }
.badge-st:is([data-status="APPROVED" i], [data-status="AUTO_APPROVED" i], [data-status="COMPLETED" i],
[data-status="PAID" i], [data-status="POSTED" i], [data-status="VERIFIED" i], [data-status="PRESENT" i],
[data-status="ACTIVE" i], [data-status="SUCCESS" i], [data-status="SYNCED" i], [data-status="APPLIED" i],
[data-status="RELEASED" i], [data-status="DONE" i], [data-status="OK" i]) {
background-color: var(--color-success-bg); color: var(--color-success-ink);
border-color: color-mix(in srgb, var(--color-success-ink) 28%, transparent);
}
.badge-st:is([data-status="PENDING" i], [data-status="PENDING_REVIEW" i], [data-status="IN-PROGRESS" i],
[data-status="IN_PROGRESS" i], [data-status="PROCESSING" i], [data-status="SUBMITTED" i],
[data-status="FOR APPROVAL" i], [data-status="FOR_APPROVAL" i], [data-status="STALE" i], [data-status="SLOW" i],
[data-status="ON_LEAVE" i], [data-status="OVERPAID" i], [data-status="WARNING" i]) {
background-color: var(--color-warning-bg); color: var(--color-warning-ink);
border-color: color-mix(in srgb, var(--color-warning-ink) 30%, transparent);
}
.badge-st:is([data-status="DRAFT" i], [data-status="OPEN" i], [data-status="NEW" i], [data-status="GENERATED" i],
[data-status="HOLIDAY" i], [data-status="REST_DAY" i], [data-status="REGULAR" i], [data-status="PROBATIONARY" i],
[data-status="CONTRACTUAL" i], [data-status="MWE" i], [data-status="CONSULTANT" i]) {
background-color: var(--color-info-bg); color: var(--color-info-ink);
border-color: color-mix(in srgb, var(--color-info-ink) 26%, transparent);
}
.badge-st:is([data-status="REJECTED" i], [data-status="CANCELLED" i], [data-status="CANCELED" i],
[data-status="FAILED" i], [data-status="FAILED_FACE_MATCH" i], [data-status="ABSENT" i], [data-status="ERROR" i],
[data-status="BLOCKED" i], [data-status="DOWN" i], [data-status="ABORT" i], [data-status="DECLINED" i],
[data-status="VOID" i], [data-status="RETURNED" i]) {
background-color: var(--color-destructive-bg); color: var(--color-destructive-ink);
border-color: color-mix(in srgb, var(--color-destructive-ink) 28%, transparent);
}
/* Status map, part 2: the class-based badges the DataTables renders already emit
(''). Same five variants, so a page reads the same whether its status came
from a template (data-status) or a script (class). */
.badge:is(.Active, .ACTIVE, .COMPLETED, .APPROVED, .PAID, .POSTED, .SUCCESS, .Success, .SYNCED, .Synced, .AUTO_APPROVED) {
background-color: var(--color-success-bg) !important; color: var(--color-success-ink) !important;
border-color: color-mix(in srgb, var(--color-success-ink) 28%, transparent) !important;
}
.badge:is(.IN-PROGRESS, .PENDING, .Pending, .SUBMITTED, .Skipped, .PROCESSING, .PENDING_REVIEW) {
background-color: var(--color-warning-bg) !important; color: var(--color-warning-ink) !important;
border-color: color-mix(in srgb, var(--color-warning-ink) 30%, transparent) !important;
}
.badge:is(.Running, .DRAFT, .OPEN, .NEW) {
background-color: var(--color-info-bg) !important; color: var(--color-info-ink) !important;
border-color: color-mix(in srgb, var(--color-info-ink) 26%, transparent) !important;
}
.badge:is(.Inactive, .INACTIVE, .REJECTED, .Rejected, .CANCELLED, .FAILED, .Failed, .ERROR, .Error, .RETURNED,
.Resigned, .RESIGNED) {
background-color: var(--color-destructive-bg) !important; color: var(--color-destructive-ink) !important;
border-color: color-mix(in srgb, var(--color-destructive-ink) 28%, transparent) !important;
}
.badge:is(.Info, .Separated, .SEPARATED, .CLOSED) {
background-color: var(--color-muted) !important; color: var(--color-foreground) !important;
border-color: var(--color-border) !important;
}
/* custom.css gives every badge min-width:100px; only a status column wants equal widths. */
.badge, .badge-st { min-width: 0; }
td .badge, td .badge-st { min-width: 88px; justify-content: center; }
/* --- R5. Figures ------------------------------------------------------- */
/* Tabular figures everywhere numbers line up: Inter supports tnum, so the face does not change. */
table td, table th, .dataTable td, .tnum, .num {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1, 'cv05' 1, 'cv08' 1; /* keeps the l / I disambiguation below */
}
/* Inter, tuned for payroll data: optical sizing (large headings use its display cut, body text its text cut),
and a tailed l + serifed I so l, I and 1 never look alike in IDs, TIN / SSS numbers and codes. */
html { font-optical-sizing: auto; }
body { font-feature-settings: 'cv05' 1, 'cv08' 1; }
.tnum { white-space: nowrap; }
/* --- R6. Dialogs: one look for Bootstrap modals and the legacy :target dialogs ----------------------
Bootstrap modals (.modal > .modal-dialog > .modal-content) and the hash dialogs (.modalDialog, opened by a
link to #openModal-..., closed by #close) share the same header / body / footer, close button, backdrop and
motion. The hash dialogs also get Escape, a click on the backdrop, focus handling and a scroll lock from
static/library/js/stellar-dialogs.js. */
.modal { --bs-modal-width: 560px; }
.modal-content, .modalDialog .modal-content {
border: 1px solid var(--color-border);
border-radius: 16px;
box-shadow: 0 28px 70px -18px rgba(2, 8, 23, .45), 0 2px 8px rgba(2, 8, 23, .10);
overflow: hidden;
}
.modal-header {
display: flex;
align-items: center;
gap: var(--space-lg);
padding: 18px 18px 16px var(--space-2xl);
background: var(--color-card);
border-bottom: 1px solid var(--color-border);
}
.modal-title {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
margin: 0;
font-size: 18px !important;
font-weight: 700;
letter-spacing: -.01em;
line-height: 1.3;
}
/* the title's leading icon becomes a small tile */
.modal-title > i:first-child {
display: inline-grid;
place-items: center;
flex: 0 0 auto;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--color-info-bg);
color: var(--color-info-ink);
font-size: 18px;
}
.modal-header > .btn:not(.btn-close) { margin-left: auto; } /* Export / Preview next to the title */
.modal-header .btn-close {
flex: 0 0 auto;
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
margin: 0 0 0 auto;
padding: 0;
border-radius: 10px;
background-size: 12px;
opacity: .65;
transition: background-color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.modal-header > .btn:not(.btn-close) + .btn-close { margin-left: 4px; }
.modal-header .btn-close:hover { background-color: var(--color-muted); opacity: 1; }
.modal-body { padding: 20px var(--space-2xl); }
.modal-footer {
padding: 14px var(--space-2xl);
gap: var(--space-md);
background: var(--color-muted);
border-top: 1px solid var(--color-border);
}
.modal-footer > * { margin: 0; }
.modal-dialog-scrollable .modal-body { max-height: none; }
/* backdrop: dim + a light blur, so it reads as "behind" */
.modal-backdrop { --bs-backdrop-bg: #070D1A; }
.modal-backdrop.show { opacity: .55; }
.modal-backdrop { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
/* motion: rise + settle in; Bootstrap reverses it, faster, on close */
.modal.fade .modal-dialog {
transform: translateY(16px) scale(.97);
opacity: 0;
transition: transform 260ms var(--ease-out), opacity 180ms var(--ease-out);
}
.modal.show .modal-dialog { transform: none; opacity: 1; }
/* the hash dialogs (.modalDialog) - the overlay is both the dialog and its backdrop */
.modalDialog {
--bs-modal-margin: 1.75rem;
--bs-modal-width: 560px;
position: fixed;
inset: 0;
z-index: 1058; /* above an open Bootstrap modal (1055), below SweetAlert (1060) */
height: auto;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
background: rgba(7, 13, 26, .55);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 140ms ease-in, visibility 0s linear 140ms;
}
.modalDialog:target {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 200ms var(--ease-out);
}
/* custom.css styled ".modalDialog > div" as the old panel; the dialog box is now .modal-dialog */
.modalDialog > .modal-dialog {
position: relative;
width: auto;
max-width: var(--bs-modal-width);
max-height: none;
height: auto;
margin: var(--bs-modal-margin) auto;
padding: 0;
border-radius: 0;
background: transparent;
color: inherit;
transform: translateY(16px) scale(.97);
transition: transform 260ms var(--ease-out);
}
.modalDialog > .modal-dialog.modal-lg { --bs-modal-width: 800px; }
.modalDialog > .modal-dialog.modal-xl { --bs-modal-width: 1140px; }
.modalDialog:target > .modal-dialog { transform: none; }
/* centred in the window like the Bootstrap ones (modal-dialog-centered); a tall dialog scrolls with the overlay */
.modalDialog > .modal-dialog { display: flex; align-items: center; min-height: calc(100% - var(--bs-modal-margin) * 2); pointer-events: none; }
.modalDialog > .modal-dialog > .modal-content { pointer-events: auto; }
.modalDialog .modal-content { outline: none; }
.modalDialog .modal-body { max-height: min(70dvh, 640px); overflow-y: auto; }
#openModal-Tracker .modal-body { max-height: none; } /* its activity log scrolls by itself - one scrollbar, not two */
:root.sd-dialog-open { overflow: hidden; }
@media (max-width: 575.98px) {
.modalDialog { --bs-modal-margin: 12px; }
.modal-header { padding-left: var(--space-xl); }
.modal-body { padding: var(--space-lg) var(--space-xl); }
.modal-footer { padding: 12px var(--space-xl); }
}
/* --- R7. App shell: header (bar + sticky menu row), 3-level menu, mobile drawer, page search ------------
Header colour pairs (light / dark header):
text #E7EDF5 on #15253A 13.13 / on #0B1322 15.77 ; muted #B4C1D1 8.46 / 10.16
active underline #00D2FF vs header 5.94 (non-text 3:1) ; badge #0B1B2E on #00D2FF 9.63
quick action #15253A on #FFFFFF 15.1 ; avatar #0B1B2E on #00D2FF 9.63 ; role pill #7DD3FC on header 9.52 */
:root {
--hdr-bar-h: 60px;
--hdr-nav-h: 50px;
--hdr-bg: #15253A;
--hdr-bg-2: #1A2D47;
--hdr-line: rgba(255, 255, 255, .08);
--hdr-hover: rgba(255, 255, 255, .08);
--hdr-active: rgba(255, 255, 255, .13);
--ease-emph: cubic-bezier(.2, .8, .2, 1);
}
:root[data-theme="dark"] { --hdr-bg: #0B1322; --hdr-bg-2: #101B30; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hdr-bg: #0B1322; --hdr-bg-2: #101B30; } }
html { scroll-padding-top: calc(var(--hdr-nav-h) + 16px); }
.app-shell { min-height: 100dvh; }
.main-panel.app-main {
width: 100%;
margin-left: 0;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
.main-panel.app-main > .stellar-main { flex: 1 0 auto; }
/* The header sticks with a negative top: the dark bar scrolls away, the light menu row stays. stellar-nav.js adds
.is-condensed once the bar is gone: the menu row shrinks 8px and the mini logo, search and account slide in. The
header gives those 8px back as margin, so its height in the page never changes and nothing under it moves.
No transform / filter here - the drawer inside is position: fixed and must stay relative to the window. */
.app-header {
position: sticky;
top: calc(-1 * var(--hdr-bar-h));
z-index: 1030;
margin-bottom: 0;
transition: margin-bottom 260ms var(--ease-emph);
}
.app-header.is-condensed { margin-bottom: 8px; }
/* row 1: the bar (dark in both themes) */
.app-header__bar {
color: var(--sidebar-fg);
background:
radial-gradient(900px 140px at 88% -40px, rgba(0, 210, 255, .14), transparent 70%),
radial-gradient(700px 160px at 8% -60px, rgba(99, 102, 241, .16), transparent 70%),
linear-gradient(180deg, var(--hdr-bg) 0%, var(--hdr-bg-2) 100%);
display: flex;
align-items: center;
gap: var(--space-lg);
height: var(--hdr-bar-h);
padding: 0 var(--space-2xl);
}
.app-header__spacer { flex: 1 1 auto; }
.app-header__sep { flex: 0 0 auto; width: 1px; height: 24px; background: rgba(255, 255, 255, .16); }
.app-header__menu { display: none !important; }
.app-brand {
display: inline-flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
color: #FFFFFF !important;
font-family: var(--font-display, var(--font-sans));
font-size: 20px;
font-weight: 700;
letter-spacing: -.02em;
text-decoration: none !important;
}
.app-brand img {
display: block;
object-fit: contain;
filter: drop-shadow(0 0 10px rgba(0, 210, 255, .35));
transition: transform 600ms var(--ease-emph);
}
.app-brand:hover img { transform: rotate(-12deg) scale(1.06); }
.app-brand:focus-visible, .app-nav__mini:focus-visible { outline: 2px solid var(--sidebar-ring); outline-offset: 3px; border-radius: 8px; }
.app-icon-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid transparent;
border-radius: var(--control-radius);
background: transparent;
color: var(--sidebar-fg) !important;
font-size: 20px;
text-decoration: none !important;
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-out);
}
.app-icon-btn:hover, .app-icon-btn[aria-expanded="true"] { background: var(--hdr-hover); }
.app-icon-btn:focus-visible { outline: 2px solid var(--sidebar-ring); outline-offset: 1px; }
.app-icon-btn__badge {
position: absolute;
top: 3px;
right: 2px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--count-bg);
color: var(--count-fg);
font-size: 11px;
font-weight: 700;
line-height: 18px;
text-align: center;
font-variant-numeric: tabular-nums;
box-shadow: 0 0 0 2px var(--hdr-bg);
}
.app-company-pill {
display: inline-flex;
align-items: center;
gap: var(--space-md);
min-width: 0;
max-width: min(360px, 30vw);
height: 36px;
padding: 0 var(--space-lg);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 999px;
background: rgba(255, 255, 255, .06);
color: var(--sidebar-fg) !important;
font-size: 13.5px;
font-weight: 600;
text-decoration: none !important;
transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.app-company-pill:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .26); }
.app-company-pill:focus-visible { outline: 2px solid var(--sidebar-ring); outline-offset: 2px; }
.app-company-pill > i { flex: 0 0 auto; font-size: 16px; color: var(--sidebar-fg-muted); }
.app-company-pill__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.app-search-trigger {
display: inline-flex;
align-items: center;
gap: var(--space-md);
width: min(300px, 24vw);
height: 36px;
padding: 0 6px 0 var(--space-lg);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: var(--control-radius);
background: rgba(255, 255, 255, .06);
color: var(--sidebar-fg-muted);
font-size: 13.5px;
text-align: left;
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.app-search-trigger:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .26); }
.app-search-trigger:focus-visible { outline: 2px solid var(--sidebar-ring); outline-offset: 2px; }
.app-search-trigger > i { font-size: 16px; }
.app-search-trigger__text { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-search-trigger__kbd {
padding: 2px 6px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 5px;
background: rgba(255, 255, 255, .08);
color: var(--sidebar-fg-muted);
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 600;
line-height: 1.4;
box-shadow: none;
}
.app-topbar__actions { display: flex; align-items: center; gap: var(--space-sm); list-style: none; margin: 0; padding: 0; }
.app-quick-action {
margin-right: var(--space-sm);
background: #FFFFFF !important;
border: 1px solid #FFFFFF !important;
color: #15253A !important;
border-radius: 999px !important;
padding: 0 14px !important;
box-shadow: 0 6px 18px -8px rgba(0, 210, 255, .55);
}
.app-quick-action:hover { background: #E7F8FF !important; border-color: #E7F8FF !important; color: #15253A !important; }
.app-quick-action:focus-visible { outline: 2px solid var(--sidebar-ring) !important; outline-offset: 2px; }
.app-quick-action i { font-size: 14px; }
.app-user {
display: inline-flex;
align-items: center;
gap: var(--space-md);
height: 44px;
padding: 0 var(--space-md) 0 4px;
border-radius: 999px;
color: var(--sidebar-fg) !important;
text-decoration: none !important;
transition: background-color var(--duration-fast) var(--ease-out);
}
.app-user:hover, .app-user[aria-expanded="true"] { background: var(--hdr-hover); }
.app-user:focus-visible { outline: 2px solid var(--sidebar-ring); outline-offset: 1px; }
.app-user__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--count-bg);
color: var(--count-fg);
font-size: 13px;
font-weight: 700;
letter-spacing: .02em;
box-shadow: 0 0 0 2px rgba(255, 255, 255, .14);
}
.app-user__meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.app-user__name { font-size: 13.5px; font-weight: 600; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; color: #FFFFFF; }
.app-user__role {
align-self: flex-start;
margin-top: 3px;
padding: 1px 8px;
border-radius: 999px;
background: rgba(125, 211, 252, .12);
color: var(--sidebar-ring);
font-size: 11.5px;
font-weight: 600;
white-space: nowrap;
}
.app-user__chev { font-size: 14px; color: var(--sidebar-fg-muted); }
.app-user-menu { min-width: 260px; padding: var(--space-sm); }
.app-user-menu .dropdown-item {
display: flex;
align-items: center;
gap: var(--space-md);
min-height: 40px;
border-radius: var(--control-radius);
font-size: 14px;
}
.app-user-menu__head { display: flex; flex-direction: column; gap: 2px; padding: var(--space-md) var(--space-lg); }
.app-user-menu__name { font-weight: 700; color: var(--color-foreground); }
.app-user-menu__roles { font-size: 13px; font-weight: 700; color: var(--color-primary-ink); }
.app-user-menu__company { font-size: 11.5px; line-height: 1.35; color: var(--color-muted-foreground); }
.app-header .dropdown-menu, .std-head .dropdown-menu { margin-top: 8px !important; border-radius: 14px; box-shadow: var(--shadow-xl); }
/* row 2: the menu, on the card surface (light in the light theme) */
.app-nav {
--nav-h: var(--hdr-nav-h);
--item-h: 36px;
position: relative;
display: flex;
align-items: center;
gap: var(--space-md);
height: var(--nav-h);
padding: 0 var(--space-xl) 0 var(--space-xl);
background: var(--color-card);
color: var(--color-foreground);
border-bottom: 1px solid var(--color-border);
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
transition: height 260ms var(--ease-emph), box-shadow var(--duration-slow) var(--ease-out);
}
.app-header.is-condensed .app-nav {
--nav-h: calc(var(--hdr-nav-h) - 8px);
--item-h: 32px;
box-shadow: 0 12px 28px -16px rgba(15, 23, 42, .35);
}
.app-nav__head { display: none; }
.app-nav__mini {
position: absolute;
left: var(--space-2xl);
top: 50%;
display: inline-flex;
opacity: 0;
visibility: hidden;
transform: translateY(-50%) scale(.6) rotate(-30deg);
transition: opacity 180ms ease-in, transform 220ms ease-in, visibility 0s linear 220ms;
}
.app-nav__mini img { display: block; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 120, 255, .3)); }
.app-header.is-condensed .app-nav__mini {
opacity: 1;
visibility: visible;
transform: translateY(-50%);
transition: opacity 220ms var(--ease-out) 60ms, transform 420ms var(--ease-emph);
}
.app-menu {
display: flex;
align-items: center;
gap: 2px;
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
transition: transform 360ms var(--ease-emph);
}
.app-header.is-condensed .app-menu { transform: translateX(42px); }
.app-menu__item { position: relative; }
.app-menu__top {
position: relative;
display: inline-flex;
align-items: center;
gap: 7px;
height: var(--item-h);
padding: 0 12px;
border: 0;
border-radius: var(--control-radius);
background: transparent;
color: var(--color-muted-foreground) !important;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
text-decoration: none !important;
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out),
height 260ms var(--ease-emph), font-size 260ms var(--ease-emph);
}
.app-header.is-condensed .app-menu__top { font-size: 13.5px; }
.app-menu__top:hover, .app-menu__top[aria-expanded="true"] { background: var(--color-muted); color: var(--color-foreground) !important; }
.app-menu__top:focus-visible { outline: 2px solid var(--color-ring); outline-offset: -2px; }
.app-menu__icon { font-size: 17px; line-height: 1; }
.app-menu__chev { font-size: 13px; opacity: .75; transition: transform 240ms var(--ease-emph); }
.app-menu__top[aria-expanded="true"] .app-menu__chev { transform: rotate(180deg); }
.app-menu__badge {
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
background: var(--color-primary);
color: var(--color-on-primary);
font-size: 11.5px;
font-weight: 700;
line-height: 20px;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* the current section: brand-ink label + an underline that grows in, sitting on the row's bottom edge */
.app-menu__top::after {
content: '';
position: absolute;
left: 12px;
right: 12px;
bottom: calc((var(--nav-h) - var(--item-h)) / -2);
height: 3px;
border-radius: 3px 3px 0 0;
background: var(--color-primary-ink);
transform: scaleX(0);
transition: transform 320ms var(--ease-emph), bottom 260ms var(--ease-emph);
}
.app-menu__top.is-active, .app-menu__top.is-active-parent, .app-menu .app-menu__top.active-menu { color: var(--color-primary-ink) !important; }
.app-menu__top.is-active::after, .app-menu__top.is-active-parent::after { transform: scaleX(1); }
.app-menu__top.is-active .app-menu__icon, .app-menu__top.is-active-parent .app-menu__icon { color: var(--color-primary-ink); }
/* 2nd level: the panel */
.app-menu__panel {
position: absolute;
top: calc(100% + (var(--nav-h) - var(--item-h)) / 2 + 6px);
left: 0;
z-index: 1035;
min-width: 340px;
max-width: min(400px, calc(100vw - 32px));
padding: var(--space-md);
background: var(--color-card);
color: var(--color-card-foreground);
border: 1px solid var(--color-border);
border-radius: 16px;
box-shadow: 0 24px 60px -20px rgba(2, 8, 23, .4), 0 2px 6px rgba(2, 8, 23, .08);
opacity: 0;
visibility: hidden;
transform: translateY(-6px) scale(.985);
transform-origin: 24px 0;
transition: opacity 110ms ease-in, transform 110ms ease-in, visibility 0s linear 110ms;
}
.app-menu__panel.is-open {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 180ms var(--ease-out), transform 260ms var(--ease-emph);
}
.app-menu__panel.is-end, .app-menu__panel--end { left: auto; right: 0; transform-origin: calc(100% - 24px) 0; }
.app-menu__panel--grid { min-width: 440px; max-width: min(480px, calc(100vw - 32px)); }
.app-menu__panel--grid > .app-menu__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.app-menu__list { list-style: none; margin: 0; padding: 0; }
.app-menu__link {
display: flex;
align-items: center;
gap: var(--space-lg);
width: 100%;
min-height: 44px;
padding: 6px 10px;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--color-card-foreground) !important;
font: inherit;
text-align: left;
text-decoration: none !important;
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-out);
}
.app-menu__link:hover, .app-menu__subtoggle[aria-expanded="true"] { background: var(--color-muted); }
.app-menu__link:focus-visible { outline: 2px solid var(--color-ring); outline-offset: -2px; }
.app-menu__tile {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--color-info-bg);
color: var(--color-info-ink);
font-size: 17px;
transition: transform 260ms var(--ease-emph), background-color var(--duration-fast) var(--ease-out);
}
.app-menu__link:hover .app-menu__tile { transform: translateY(-1px) scale(1.06); }
.app-menu__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.app-menu__label { font-size: 14px; font-weight: 600; line-height: 1.3; }
.app-menu__desc { margin-top: 1px; font-size: 12.5px; line-height: 1.35; color: var(--color-muted-foreground); }
.app-menu__subchev { flex: 0 0 auto; font-size: 14px; color: var(--color-muted-foreground); transition: transform 240ms var(--ease-emph), color var(--duration-fast) var(--ease-out); }
.app-menu__subtoggle[aria-expanded="true"] .app-menu__subchev { transform: translateX(2px); color: var(--color-primary-ink); }
.app-menu__link.is-active, .app-menu__link--l3.is-active { background: var(--color-info-bg); }
.app-menu__link.is-active .app-menu__label, .app-menu__link.is-active-parent .app-menu__label,
.app-menu__link--l3.is-active { color: var(--color-info-ink) !important; }
.app-menu__link.is-active .app-menu__tile, .app-menu__link.is-active-parent .app-menu__tile { background: var(--color-primary); color: var(--color-on-primary); }
.app-menu .app-menu__link.active-menu { color: var(--color-card-foreground) !important; }
/* 3rd level: the flyout */
.app-menu__sub { position: relative; }
.app-menu__flyout {
position: absolute;
top: calc(-9px + var(--fly-shift, 0px));
left: calc(100% + 14px);
z-index: 1;
min-width: 240px;
max-width: 300px;
padding: var(--space-md);
background: var(--color-card);
color: var(--color-card-foreground);
border: 1px solid var(--color-border);
border-radius: 14px;
box-shadow: 0 24px 60px -20px rgba(2, 8, 23, .4), 0 2px 6px rgba(2, 8, 23, .08);
opacity: 0;
visibility: hidden;
transform: translateX(-6px);
transition: opacity 100ms ease-in, transform 100ms ease-in, visibility 0s linear 100ms;
}
.app-menu__flyout.is-open {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 160ms var(--ease-out), transform 240ms var(--ease-emph);
}
.app-menu__flyout.is-flip { left: auto; right: calc(100% + 14px); transform: translateX(6px); }
.app-menu__flyout.is-flip.is-open { transform: none; }
.app-menu__flyhead {
margin: 2px 10px 6px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--color-muted-foreground);
}
.app-menu__link--l3 { min-height: 38px; padding: 0 12px; font-size: 14px; font-weight: 500; }
.app-menu__link--l3.is-active { font-weight: 600; box-shadow: inset 3px 0 0 var(--color-primary-ink); }
/* right end of the menu row */
.app-nav__end { display: flex; align-items: center; gap: var(--space-sm); margin-left: auto; flex: 0 0 auto; }
.app-nav__search {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--color-border);
border-radius: var(--control-radius);
background: var(--color-card);
color: var(--color-foreground);
font-size: 17px;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: scale(.8);
transition: opacity 140ms ease-in, transform 140ms ease-in, visibility 0s linear 140ms, background-color var(--duration-fast) var(--ease-out);
}
.app-header.is-condensed .app-nav__search {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 200ms var(--ease-out) 80ms, transform 300ms var(--ease-emph) 80ms, background-color var(--duration-fast) var(--ease-out);
}
.app-nav__search:hover { background: var(--color-muted); }
.app-nav__search:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
/* the account menu, reachable after the bar has scrolled away */
.app-nav__account {
opacity: 0;
visibility: hidden;
transform: scale(.8);
transition: opacity 140ms ease-in, transform 140ms ease-in, visibility 0s linear 140ms;
}
.app-header.is-condensed .app-nav__account {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 200ms var(--ease-out) 120ms, transform 300ms var(--ease-emph) 120ms;
}
.app-nav__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
}
.app-nav__avatar .app-user__avatar { width: 32px; height: 32px; font-size: 12px; box-shadow: 0 0 0 2px var(--color-card), 0 0 0 3px var(--color-border); }
.app-nav__avatar:hover .app-user__avatar, .app-nav__avatar[aria-expanded="true"] .app-user__avatar { box-shadow: 0 0 0 2px var(--color-card), 0 0 0 4px var(--color-primary-ink); }
.app-nav__avatar:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.app-nav__account .dropdown-menu { margin-top: 8px !important; border-radius: 14px; box-shadow: var(--shadow-xl); }
.app-nav__ara {
display: inline-flex;
align-items: center;
gap: 7px;
height: 34px;
padding: 0 14px 0 10px;
border: 1px solid color-mix(in srgb, var(--color-primary-ink) 22%, transparent);
border-radius: 999px;
background: var(--color-info-bg);
color: var(--color-primary-ink) !important;
font-size: 13.5px;
font-weight: 700;
white-space: nowrap;
text-decoration: none !important;
transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out);
}
.app-nav__ara:hover { border-color: color-mix(in srgb, var(--color-primary-ink) 50%, transparent); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--color-primary-ink) 60%, transparent); }
.app-nav__ara:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.app-nav__ara i { font-size: 17px; color: var(--color-primary-ink); }
.app-nav__ara small { font-size: 12px; font-weight: 500; color: var(--color-muted-foreground); }
.app-nav__ara.is-active, .app-nav__ara.active-menu { background: color-mix(in srgb, var(--color-primary-ink) 16%, var(--color-card)); color: var(--color-primary-ink) !important; }
/* 1200-1439: no icons on the top items, tighter spacing, so the row fits */
@media (min-width: 1200px) and (max-width: 1439.98px) {
.app-menu__top .app-menu__icon { display: none; }
.app-menu__top { padding: 0 10px; }
.app-nav__ara small { display: none; }
}
/* below 1200px the menu row becomes a drawer */
.app-nav-backdrop {
position: fixed;
inset: 0;
z-index: 1; /* inside the header: over its bar, under the drawer */
background: rgba(7, 13, 26, .55);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
animation: app-fade-in 200ms var(--ease-out);
}
.app-nav-backdrop[hidden] { display: none; }
@media (max-width: 1199.98px) {
.app-header { top: 0; }
.app-header__bar { height: 58px; padding: 0 var(--space-lg); gap: var(--space-md); }
.app-header__menu { display: inline-flex !important; margin-left: -6px; }
.app-search-trigger { width: 40px; height: 40px; padding: 0; justify-content: center; border-color: transparent; background: transparent; color: var(--sidebar-fg); }
.app-search-trigger > i { font-size: 20px; }
.app-search-trigger__text, .app-search-trigger__kbd { display: none; }
.app-user__meta, .app-user__chev { display: none; }
.app-nav {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 2;
width: min(340px, 88vw);
height: auto;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0;
border: 0;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--color-card);
color: var(--color-foreground);
border-bottom: 0;
transform: translateX(-100%);
visibility: hidden;
transition: transform 240ms ease-in, visibility 0s linear 240ms;
}
:root.app-drawer-open .app-nav {
transform: none;
visibility: visible;
box-shadow: 24px 0 60px -20px rgba(0, 0, 0, .6);
transition: transform 340ms var(--ease-emph);
}
:root.app-drawer-open { overflow: hidden; }
.app-nav__head {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
flex: 0 0 auto;
height: 58px;
padding: 0 var(--space-md) 0 var(--space-xl);
background: var(--color-card);
border-bottom: 1px solid var(--color-border);
}
.app-nav__head .app-brand { color: var(--color-foreground) !important; }
.app-nav__head .app-icon-btn { color: var(--color-foreground) !important; }
.app-nav__head .app-icon-btn:hover { background: var(--color-muted); }
.app-nav__head .app-icon-btn:focus-visible { outline-color: var(--color-ring); }
.app-nav__mini, .app-nav__search, .app-nav__account { display: none !important; }
.app-menu { flex-direction: column; align-items: stretch; gap: 2px; padding: var(--space-md); transform: none !important; }
.app-menu__top { width: 100%; height: 48px; padding: 0 var(--space-lg); font-size: 15px; color: var(--color-foreground) !important; }
.app-menu__top .app-menu__icon { display: inline-block; width: 22px; font-size: 19px; color: var(--color-muted-foreground); }
.app-menu__top .app-menu__chev { margin-left: auto; }
.app-menu__top::after { left: 0; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto; border-radius: 0 3px 3px 0; transform: scaleY(0); }
.app-menu__top.is-active::after, .app-menu__top.is-active-parent::after { transform: scaleY(1); }
.app-menu__top:focus-visible, .app-menu__link:focus-visible { outline-color: var(--color-ring); }
.app-menu__panel, .app-menu__flyout, .app-menu__panel.is-open, .app-menu__flyout.is-open {
position: static;
display: none;
min-width: 0;
max-width: none;
padding: 2px 0 var(--space-md) var(--space-xl);
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
transition: none;
}
.app-menu__panel.is-open, .app-menu__flyout.is-open { display: block; animation: app-drawer-sub 260ms var(--ease-emph); }
.app-menu__flyout, .app-menu__flyout.is-open { margin-left: 26px; padding: 2px 0 6px var(--space-md); border-left: 1px solid var(--color-border); }
.app-menu__panel--grid > .app-menu__list { display: block; }
.app-menu__flyhead, .app-menu__desc { display: none; }
.app-menu__link { min-height: 44px; padding: 4px 10px; color: var(--color-foreground) !important; }
.app-menu__link:hover, .app-menu__subtoggle[aria-expanded="true"] { background: var(--color-muted); }
.app-menu__tile { width: 30px; height: 30px; border-radius: 8px; font-size: 16px; }
.app-menu__subtoggle[aria-expanded="true"] .app-menu__subchev { transform: rotate(90deg); color: var(--color-primary-ink); }
.app-menu__link--l3 { min-height: 42px; color: var(--color-muted-foreground) !important; }
.app-menu__link.is-active, .app-menu__link--l3.is-active { background: var(--color-info-bg); color: var(--color-primary-ink) !important; box-shadow: inset 3px 0 0 var(--color-primary-ink); }
.app-menu .app-menu__link.active-menu { color: var(--color-foreground) !important; }
.app-nav__end { margin: auto 0 0; padding: var(--space-md); border-top: 1px solid var(--color-border); }
.app-nav__ara { width: 100%; height: 46px; border-radius: 12px; justify-content: flex-start; padding: 0 var(--space-lg); }
}
@media (max-width: 767.98px) {
.app-quick-action-item { display: none; }
.app-company-pill { max-width: 44vw; }
.app-header__sep { display: none; }
}
@media (max-width: 479.98px) {
.app-brand__word { display: none; }
.app-company-pill__chev { display: none; }
.app-company-pill { max-width: 52vw; padding: 0 var(--space-md); }
}
/* the drawer heading keeps its wordmark on phones; the floating ARA button steps aside while the drawer is open */
.app-nav__head .app-brand__word { display: inline !important; }
:root.app-drawer-open #ara-widget-btn, :root.app-drawer-open #ara-widget-panel { visibility: hidden; }
@keyframes app-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes app-drawer-sub { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* page content */
.stellar-main { padding: 28px var(--space-2xl) var(--space-2xl); min-height: calc(100dvh - var(--hdr-bar-h) - var(--hdr-nav-h)); }
@media (max-width: 767.98px) { .stellar-main { padding: var(--space-xl) var(--space-lg); } }
/* page search dialog */
.app-cmdk-layer[hidden] { display: none; }
.app-cmdk-backdrop {
position: fixed;
inset: 0;
z-index: 1090;
background: rgba(7, 13, 26, .5);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
animation: app-fade-in 180ms var(--ease-out);
}
.app-cmdk {
position: fixed;
z-index: 1091;
top: 12vh;
left: 50%;
transform: translateX(-50%);
width: min(640px, calc(100vw - 32px));
max-height: 70vh;
display: flex;
flex-direction: column;
background: var(--color-card);
color: var(--color-card-foreground);
border: 1px solid var(--color-border);
border-radius: 16px;
box-shadow: 0 28px 70px -18px rgba(2, 8, 23, .5);
overflow: hidden;
animation: app-cmdk-in 280ms var(--ease-emph);
}
@keyframes app-cmdk-in { from { opacity: 0; transform: translate(-50%, -10px) scale(.98); } to { opacity: 1; transform: translateX(-50%); } }
.app-cmdk__field {
display: flex;
align-items: center;
gap: var(--space-lg);
padding: 0 var(--space-xl);
border-bottom: 1px solid var(--color-border);
}
.app-cmdk__field > i { font-size: 18px; color: var(--color-muted-foreground); }
.app-cmdk__input {
flex: 1 1 auto;
height: 56px !important;
min-height: 56px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
font-size: 16px !important;
color: var(--color-card-foreground);
}
.app-cmdk__input:focus { outline: none; }
.app-cmdk kbd {
padding: 2px 6px;
border: 1px solid var(--color-border);
border-radius: 5px;
background: var(--color-muted);
color: var(--color-muted-foreground);
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 600;
line-height: 1.4;
box-shadow: none;
}
.app-cmdk__list { list-style: none; margin: 0; padding: var(--space-md); overflow-y: auto; }
.app-cmdk__opt {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-lg);
padding: 10px var(--space-lg);
border-radius: var(--control-radius);
cursor: pointer;
}
.app-cmdk__opt.is-active { background: var(--color-info-bg); }
.app-cmdk__opt.is-active .app-cmdk__name { color: var(--color-info-ink); }
.app-cmdk__name { font-weight: 600; font-size: 14px; }
.app-cmdk__where { font-size: 12.5px; color: var(--color-muted-foreground); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-cmdk__empty { padding: var(--space-2xl) var(--space-xl); color: var(--color-muted-foreground); text-align: center; font-size: 14px; }
.app-cmdk__foot {
display: flex;
gap: var(--space-xl);
padding: var(--space-md) var(--space-xl);
border-top: 1px solid var(--color-border);
font-size: 12px;
color: var(--color-muted-foreground);
}
.app-cmdk__foot kbd { margin-right: 3px; }
.app-cmdk__esc { margin-left: auto; }
:root.app-cmdk-open { overflow: hidden; }
/* print: reports print the page content only */
@media print {
.app-header, .app-nav-backdrop, .app-cmdk-layer, .scroll-top-btn { display: none !important; }
}
/* motion: everything above is short; under reduced motion it is instant */
@media (prefers-reduced-motion: reduce) {
.app-header, .app-header *, .app-nav-backdrop, .app-cmdk, .app-cmdk-backdrop,
.modal.fade .modal-dialog, .modalDialog, .modalDialog > .modal-dialog {
transition: none !important;
animation: none !important;
}
}
/* --- R8. Dashboard ---------------------------------------------------------------- */
.dash { padding-bottom: var(--space-3xl); }
.dash-head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-xl);
margin: var(--space-sm) 0 var(--space-2xl);
}
.dash-title {
margin: 0;
font-size: 26px !important;
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.2;
color: var(--color-foreground) !important;
}
.dash-sub { margin: 6px 0 0; color: var(--color-muted-foreground); font-size: 14.5px; }
.dash-head__meta { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.dash-pill {
display: inline-flex;
align-items: center;
gap: var(--space-md);
min-height: 34px;
padding: 4px var(--space-lg);
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-card);
color: var(--color-foreground);
font-size: 13px;
font-weight: 600;
}
.dash-pill > i { font-size: 16px; color: var(--color-muted-foreground); }
.dash-pill__muted { color: var(--color-muted-foreground); font-weight: 500; }
.dash-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-xl);
margin-bottom: var(--space-2xl);
}
@media (max-width: 1279.98px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .dash-kpis { grid-template-columns: minmax(0, 1fr); } }
.dash-kpi {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-md);
min-height: 156px;
padding: var(--space-xl) var(--space-xl) var(--space-lg);
background: var(--color-card);
color: var(--color-card-foreground) !important;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
text-decoration: none !important;
transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
a.dash-kpi:hover { border-color: var(--color-border-control); box-shadow: var(--shadow-md); }
a.dash-kpi:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.dash-kpi__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.dash-kpi__label { font-size: 13px; font-weight: 600; color: var(--color-muted-foreground); }
.dash-kpi__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
font-size: 20px;
}
.dash-kpi__icon--navy { background: var(--color-info-bg); color: var(--color-info-ink); }
.dash-kpi__icon--green { background: var(--color-success-bg); color: var(--color-success-ink); }
.dash-kpi__icon--amber { background: var(--color-warning-bg); color: var(--color-warning-ink); }
.dash-kpi__icon--violet { background: color-mix(in srgb, var(--chart-3) 14%, var(--color-card)); color: var(--chart-3); }
.dash-kpi__value {
font-size: 30px;
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.1;
color: var(--color-foreground);
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dash-kpi__value--money { font-size: 26px; }
.dash-kpi__cur { font-size: .66em; font-weight: 600; color: var(--color-muted-foreground); margin-right: 2px; vertical-align: .18em; }
.dash-kpi__dec { font-size: .66em; color: var(--color-muted-foreground); font-weight: 600; }
.dash-kpi__foot {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
min-height: 28px;
}
.dash-kpi__note { font-size: 12.5px; color: var(--color-muted-foreground); }
.dash-kpi__go {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
color: var(--color-muted-foreground);
font-size: 16px;
transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
a.dash-kpi:hover .dash-kpi__go { background: var(--color-info-bg); color: var(--color-info-ink); }
.dash-card {
background: var(--color-card);
color: var(--color-card-foreground);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.dash-card + .dash-card, .dash-grid { margin-top: var(--space-2xl); }
.dash-grid > .dash-card { margin-top: 0; }
.dash-card__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
padding: var(--space-xl) var(--space-2xl);
border-bottom: 1px solid var(--color-border);
}
.dash-card__title { margin: 0; font-size: 16px !important; font-weight: 700; color: var(--color-foreground) !important; display: flex; align-items: center; gap: var(--space-md); }
.dash-card__title > i { font-size: 18px; color: var(--color-muted-foreground); }
.dash-card__sub { margin: 2px 0 0; font-size: 13px; color: var(--color-muted-foreground); }
.dash-card__body { padding: var(--space-xl) var(--space-2xl); }
.dash-card__foot { padding: var(--space-md) var(--space-2xl); border-top: 1px solid var(--color-border); font-size: 12.5px; color: var(--color-muted-foreground); text-align: right; }
.dash-chart { height: 360px; }
.dash-select { display: inline-flex; align-items: center; gap: var(--space-md); font-size: 13px; color: var(--color-muted-foreground); font-weight: 600; }
.dash-select label { margin: 0; font-size: 13px; color: var(--color-muted-foreground); }
.dash-select .form-select { width: auto; min-width: 104px; }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); }
@media (max-width: 991.98px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }
.dash-list { list-style: none; margin: 0; padding: 0; max-height: 400px; overflow-y: auto; }
.dash-list__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
padding: var(--space-lg) var(--space-2xl);
border-bottom: 1px solid var(--color-border);
}
.dash-list__item:last-child { border-bottom: 0; }
.dash-list__main { min-width: 0; }
.dash-list__title { font-size: 14px; font-weight: 600; color: var(--color-foreground); margin: 0 0 2px; }
.dash-list__meta { font-size: 12.5px; color: var(--color-muted-foreground); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.dash-list__time { font-size: 12.5px; color: var(--color-muted-foreground); white-space: nowrap; }
.dash-empty { padding: var(--space-3xl) var(--space-2xl); text-align: center; color: var(--color-muted-foreground); font-size: 14px; }
.dash-empty > i { display: block; font-size: 28px; margin-bottom: var(--space-md); }
/* --- R9. Standalone pages: sign-in, Select Company, Create Company, error page ----------
Same tokens and controls as the app; the header is the app header's bar. */
.std-body {
min-height: 100dvh;
display: flex;
flex-direction: column;
margin: 0;
background: var(--color-background);
color: var(--color-foreground);
}
.std-head {
position: sticky;
top: 0;
z-index: 1020;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-xl);
height: var(--hdr-bar-h);
padding: 0 var(--space-2xl);
color: var(--sidebar-fg);
background:
radial-gradient(900px 140px at 88% -40px, rgba(0, 210, 255, .14), transparent 70%),
radial-gradient(700px 160px at 8% -60px, rgba(99, 102, 241, .16), transparent 70%),
linear-gradient(180deg, var(--hdr-bg) 0%, var(--hdr-bg-2) 100%);
}
.err-brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--color-foreground) !important;
font-family: var(--font-display, var(--font-sans));
font-size: 18px;
font-weight: 700;
letter-spacing: -.02em;
text-decoration: none !important;
}
.err-brand img { object-fit: contain; }
/* full width: the page uses the whole window, with comfortable side padding */
.std-main { flex: 1 0 auto; width: 100%; margin: 0; padding: 40px clamp(16px, 3vw, 48px) 64px; }
.std-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-xl); margin-bottom: var(--space-2xl); }
.std-hero .std-sub { margin-bottom: 0; }
.std-hero .std-search { flex: 0 1 420px; margin-bottom: 0; }
.std-title { margin: 0; font-size: 30px !important; font-weight: 700; letter-spacing: -.02em; color: var(--color-foreground) !important; }
.std-sub { margin: 6px 0 var(--space-2xl); color: var(--color-muted-foreground); font-size: 15px; }
.std-search { position: relative; margin-bottom: var(--space-xl); }
.std-search > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--color-muted-foreground); pointer-events: none; }
.std-search .form-control { height: 48px !important; min-height: 48px !important; padding-left: 44px !important; font-size: 15px; }
.company-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-lg); }
.company-card {
position: relative;
display: flex;
align-items: center;
gap: 14px;
width: 100%;
min-height: 76px;
margin: 0;
padding: 14px var(--space-xl);
border: 1px solid var(--color-border);
border-radius: 14px;
background: var(--color-card);
color: var(--color-card-foreground);
font: inherit;
text-align: left;
cursor: pointer;
transition: border-color var(--duration-fast) var(--ease-out), box-shadow 260ms var(--ease-out), transform 260ms var(--ease-emph);
}
.company-card[hidden] { display: none; }
.company-card:hover { border-color: var(--color-border-control); box-shadow: 0 14px 30px -18px rgba(2, 8, 23, .35); transform: translateY(-2px); }
.company-card:active { transform: translateY(0) scale(.99); }
.company-card:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.company-card__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--color-info-bg);
color: var(--color-info-ink);
font-size: 17px;
font-weight: 700;
transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.company-card:hover .company-card__avatar { background: var(--color-primary); color: var(--color-on-primary); }
.company-card__name { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.company-card__go { flex: 0 0 auto; font-size: 18px; color: var(--color-muted-foreground); transition: transform 260ms var(--ease-emph), color var(--duration-fast) var(--ease-out); }
.company-card:hover .company-card__go { color: var(--color-primary-ink); transform: translateX(3px); }
.std-empty { padding: var(--space-3xl) var(--space-xl); text-align: center; color: var(--color-muted-foreground); font-size: 14.5px; grid-column: 1 / -1; }
.std-empty > i { display: block; font-size: 32px; margin-bottom: var(--space-md); }
.std-empty__title { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--color-foreground); }
.std-empty--search { padding: var(--space-2xl); }
.std-actions { display: flex; justify-content: center; margin-top: var(--space-2xl); }
.std-foot {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-xl) clamp(16px, 3vw, 48px);
border-top: 1px solid var(--color-border);
font-size: 13px;
color: var(--color-muted-foreground);
}
@media (max-width: 575.98px) {
.std-head { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.std-head .app-user__meta, .std-head .app-user__chev { display: none; }
.std-hero .std-search { flex-basis: 100%; }
}
/* Create Company: the form card uses the full width too */
.stellar-form-page .card { max-width: none; }
.stellar-form-page > .content { padding: 28px clamp(16px, 3vw, 48px) !important; }
.stellar-form-page > .content > .container-fluid { padding-left: 0; padding-right: 0; } /* a legacy rule added 48px more */
/* sign-in ------------------------------------------------------------------------------------------------ */
.auth-body {
position: relative;
min-height: 100dvh;
margin: 0;
overflow-x: hidden;
color: var(--color-foreground);
background:
radial-gradient(1100px 760px at 12% 8%, rgba(70, 95, 255, .22), transparent 62%),
radial-gradient(900px 700px at 92% 96%, rgba(0, 210, 255, .14), transparent 60%),
linear-gradient(160deg, #050A15 0%, #0A1428 48%, #0F1D38 100%);
}
.auth-sky { position: fixed; inset: 0; z-index: 0; display: block; pointer-events: none; }
.auth-nebula {
position: fixed;
inset: -20%;
z-index: 0;
pointer-events: none;
background:
radial-gradient(40% 30% at 30% 30%, rgba(99, 102, 241, .10), transparent 70%),
radial-gradient(35% 28% at 75% 70%, rgba(0, 210, 255, .08), transparent 70%);
animation: auth-nebula 40s ease-in-out infinite alternate;
}
@keyframes auth-nebula { from { transform: translate3d(-2%, -1%, 0) rotate(0deg); } to { transform: translate3d(2%, 2%, 0) rotate(4deg); } }
.auth-shell { position: relative; z-index: 1; min-height: 100dvh; display: grid; place-items: center; padding: 32px 24px; }
.auth-frame {
display: grid;
grid-template-columns: minmax(380px, 460px) minmax(0, 1fr);
width: min(1200px, 100%);
min-height: min(740px, calc(100dvh - 64px));
border-radius: 28px;
background: var(--color-card);
box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .07), 0 0 80px -20px rgba(0, 210, 255, .18);
overflow: hidden;
animation: auth-rise 800ms var(--ease-emph) both;
}
@keyframes auth-rise { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.auth-pane {
position: relative;
display: flex;
flex-direction: column;
gap: 28px;
padding: 40px 48px 28px;
background:
radial-gradient(420px 260px at 100% 0%, color-mix(in srgb, var(--color-info-bg) 70%, transparent), transparent 70%),
var(--color-card);
}
.auth-logo { display: flex; align-items: center; gap: 12px; font-family: var(--font-display, var(--font-sans)); font-size: 26px; font-weight: 700; letter-spacing: -.03em; color: var(--color-foreground); }
.auth-logo img { object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0, 120, 255, .35)); }
.auth-card { width: 100%; max-width: 380px; margin: auto 0; }
.auth-title { margin: 0 0 6px; font-family: var(--font-display, var(--font-sans)); font-size: 32px !important; font-weight: 700; letter-spacing: -.03em; color: var(--color-foreground) !important; }
.auth-sub { margin: 0 0 26px; font-size: 15px; color: var(--color-muted-foreground); }
.auth-field { margin-bottom: 18px; }
.auth-input { position: relative; }
.auth-input > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--color-muted-foreground); pointer-events: none; transition: color var(--duration-fast) var(--ease-out); }
.auth-input:focus-within > i { color: var(--color-primary-ink); }
.auth-input .form-control { height: 50px !important; min-height: 50px !important; padding-left: 44px !important; font-size: 15px; border-radius: 12px; }
.auth-input--toggle .form-control { padding-right: 52px !important; }
.auth-input__toggle {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--color-muted-foreground);
font-size: 18px;
cursor: pointer;
}
.auth-input__toggle:hover { background: var(--color-muted); color: var(--color-foreground); }
.auth-input__toggle:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 1px; }
.auth-error {
display: flex;
gap: 10px;
margin-bottom: 18px;
padding: 12px 14px;
border: 1px solid color-mix(in srgb, var(--color-destructive-ink) 30%, transparent);
border-radius: 12px;
background: var(--color-destructive-bg);
color: var(--color-destructive-ink);
font-size: 14px;
line-height: 1.45;
animation: auth-shake 420ms var(--ease-out);
}
@keyframes auth-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.auth-error > i { font-size: 18px; flex: 0 0 auto; margin-top: 1px; }
.auth-error p { margin: 0; }
.auth-error p + p { margin-top: 4px; }
.auth-submit {
width: 100%;
height: 50px !important;
min-height: 50px !important;
margin-top: 6px;
border-radius: 12px !important;
transition: box-shadow 260ms var(--ease-out), transform 260ms var(--ease-emph), background-color var(--duration-fast) var(--ease-out);
}
.auth-card .auth-submit { box-shadow: 0 14px 28px -14px rgba(23, 55, 117, .8); }
.auth-submit i { transition: transform 260ms var(--ease-emph); }
.auth-card .auth-submit:hover { transform: translateY(-1px); box-shadow: 0 18px 34px -14px rgba(23, 55, 117, .9); }
.auth-submit:hover i { transform: translateX(3px); }
.auth-submit:active { transform: translateY(0) scale(.99); }
.auth-help { margin: 14px 0 0; font-size: 13.5px; color: var(--color-muted-foreground); text-align: center; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 28px 0 16px; font-size: 13px; color: var(--color-muted-foreground); }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--color-border); }
.auth-demo { width: 100%; height: 46px !important; min-height: 46px !important; border-radius: 12px !important; }
.auth-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 0; font-size: 12.5px; text-align: center; color: var(--color-muted-foreground); }
.auth-foot a { color: var(--color-muted-foreground) !important; text-decoration: underline; text-underline-offset: 2px; }
.auth-foot a:hover { color: var(--color-foreground) !important; }
/* the form side settles in, one beat after the card */
.auth-logo, .auth-title, .auth-sub, .auth-error, .auth-field, .auth-submit, .auth-help, .auth-divider, .auth-demo, .auth-foot {
animation: auth-in 640ms var(--ease-emph) both;
}
.auth-title { animation-delay: 120ms; } .auth-sub { animation-delay: 170ms; }
.auth-field:nth-of-type(1) { animation-delay: 230ms; } .auth-field:nth-of-type(2) { animation-delay: 290ms; }
.auth-submit { animation-delay: 350ms; } .auth-help { animation-delay: 400ms; }
.auth-divider, .auth-demo { animation-delay: 450ms; } .auth-foot { animation-delay: 520ms; }
.auth-error { animation: auth-in 400ms var(--ease-emph) both, auth-shake 420ms var(--ease-out) 300ms; }
@keyframes auth-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* the illustration */
.auth-art { position: relative; padding: 12px; min-width: 0; }
.sx-stage {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
min-height: 600px;
overflow: hidden;
border-radius: 20px;
isolation: isolate;
background:
radial-gradient(70% 55% at 50% 46%, rgba(46, 92, 190, .55) 0%, rgba(14, 27, 58, .2) 60%, transparent 75%),
radial-gradient(60% 40% at 85% 8%, rgba(0, 210, 255, .18), transparent 70%),
radial-gradient(55% 45% at 10% 95%, rgba(99, 102, 241, .22), transparent 70%),
linear-gradient(165deg, #0B1630 0%, #0A1226 55%, #070D1C 100%);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
/* the illustration fills what the caption leaves */
.sx-scene { position: relative; z-index: 1; flex: 1 1 auto; min-height: 400px; }
.sx-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
background-size: 40px 40px;
-webkit-mask-image: radial-gradient(70% 60% at 50% 46%, #000 0%, transparent 75%);
mask-image: radial-gradient(70% 60% at 50% 46%, #000 0%, transparent 75%);
}
.sx-twinkle {
position: absolute;
left: var(--x);
top: var(--y);
width: 3px;
height: 3px;
border-radius: 50%;
background: #FFFFFF;
box-shadow: 0 0 8px 2px rgba(186, 236, 255, .7);
animation: sx-twinkle 3.6s ease-in-out var(--d) infinite;
}
@keyframes sx-twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.2); } }
.sx-shoot {
position: absolute;
top: 14%;
left: 78%;
width: 120px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, #FFFFFF, rgba(186, 236, 255, 0));
opacity: 0;
transform: rotate(-28deg);
animation: sx-shoot 9s ease-in 3s infinite;
}
.sx-shoot--2 { top: 6%; left: 46%; width: 90px; animation-delay: 6.2s; animation-duration: 11s; }
.sx-shoot--3 { top: 34%; left: 96%; width: 140px; animation-delay: 1.4s; animation-duration: 13s; }
@keyframes sx-shoot {
0% { opacity: 0; transform: translate(0, 0) rotate(-28deg); }
3% { opacity: 1; }
12% { opacity: 0; transform: translate(-260px, 140px) rotate(-28deg); }
100% { opacity: 0; transform: translate(-260px, 140px) rotate(-28deg); }
}
.sx-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sx-link {
fill: none;
stroke: rgba(125, 211, 252, .45);
stroke-width: 1.4px;
stroke-dasharray: 4 7;
vector-effect: non-scaling-stroke;
animation: sx-flow 2.4s linear infinite;
}
.sx-link--b { animation-duration: 2.9s; } .sx-link--c { animation-duration: 3.2s; } .sx-link--d { animation-duration: 2.6s; }
@keyframes sx-flow { to { stroke-dashoffset: -22; } }
/* core + orbits */
.sx-orbit {
position: absolute;
left: 50%;
top: 50%;
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
border: 1px dashed rgba(186, 236, 255, .22);
animation: sx-spin 90s linear infinite;
}
.sx-orbit--outer { width: min(64%, 400px); }
.sx-orbit--inner { width: min(38%, 240px); border-style: solid; border-color: rgba(186, 236, 255, .12); animation-duration: 60s; animation-direction: reverse; }
@keyframes sx-spin { to { rotate: 360deg; } }
.sx-sat {
position: absolute;
display: grid;
place-items: center;
width: 46px;
height: 46px;
translate: -50% -50%;
border-radius: 50%;
background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
border: 1px solid rgba(255, 255, 255, .22);
box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .18);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: #BAECFF;
font-size: 20px;
animation: sx-spin 90s linear infinite reverse; /* cancels the orbit's turn: icons stay upright */
}
.sx-orbit--inner .sx-sat { animation-duration: 60s; animation-direction: normal; }
.sx-sat--sm { width: 36px; height: 36px; font-size: 16px; }
.sx-core {
position: absolute;
left: 50%;
top: 50%;
width: 116px;
height: 116px;
translate: -50% -50%;
display: grid;
place-items: center;
border-radius: 50%;
background: radial-gradient(circle at 50% 45%, rgba(0, 210, 255, .28), rgba(23, 55, 117, .25) 55%, transparent 72%);
}
.sx-core img { position: relative; z-index: 1; object-fit: contain; filter: drop-shadow(0 0 22px rgba(0, 210, 255, .6)); animation: sx-breathe 5s ease-in-out infinite; }
.sx-core__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(0, 210, 255, .5); animation: sx-pulse 3.6s var(--ease-out) infinite; }
.sx-core__ring--2 { animation-delay: 1.8s; }
@keyframes sx-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes sx-pulse { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
/* glass cards */
.sx-card {
position: absolute;
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px;
border-radius: 16px;
background: linear-gradient(150deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
border: 1px solid rgba(255, 255, 255, .16);
box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .14);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
animation: sx-in 900ms var(--ease-emph) both, sx-float 9s ease-in-out infinite;
}
.sx-card--run { left: 6%; top: 6%; width: min(42%, 230px); animation-delay: 250ms, 1.2s; }
.sx-card--chart { right: 6%; top: 10%; width: min(36%, 200px); animation-delay: 380ms, 0s; animation-duration: 900ms, 10s; }
.sx-card--slip { left: 6%; bottom: 4%; width: min(38%, 210px); animation-delay: 510ms, 2.4s; animation-duration: 900ms, 11s; }
.sx-card--geo { right: 6%; bottom: 8%; width: min(32%, 180px); padding: 10px; animation-delay: 640ms, .6s; animation-duration: 900ms, 8.5s; }
@keyframes sx-in { from { opacity: 0; translate: 0 18px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes sx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.sx-row { display: flex; align-items: center; gap: 10px; }
.sx-row--gap { justify-content: space-between; }
.sx-tile { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; font-size: 17px; color: #FFFFFF; }
.sx-tile--cyan { background: linear-gradient(135deg, #00B4E6, #2563EB); box-shadow: 0 6px 16px -6px rgba(0, 180, 230, .8); }
.sx-tile--indigo { background: linear-gradient(135deg, #6366F1, #8B5CF6); box-shadow: 0 6px 16px -6px rgba(99, 102, 241, .8); }
.sx-lines { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.sx-bar { display: block; width: var(--w); height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .5); }
.sx-bar--dim { background: rgba(255, 255, 255, .2); }
.sx-bar--full { height: 6px; }
.sx-faces { display: flex; }
.sx-face { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #12224A; margin-left: -7px; }
.sx-face:first-child { margin-left: 0; }
.sx-face--a { background: linear-gradient(135deg, #F9A8D4, #F472B6); }
.sx-face--b { background: linear-gradient(135deg, #FDE68A, #F59E0B); }
.sx-face--c { background: linear-gradient(135deg, #A7F3D0, #10B981); }
.sx-face--more { background: rgba(255, 255, 255, .18); }
.sx-done {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: #22C55E;
color: #052E16;
font-size: 15px;
box-shadow: 0 0 0 4px rgba(34, 197, 94, .2);
animation: sx-pop 7s var(--ease-emph) infinite;
}
@keyframes sx-pop { 0%, 46% { opacity: 0; transform: scale(.3); } 52% { opacity: 1; transform: scale(1.15); } 56%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.6); } }
.sx-progress { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.sx-progress__fill { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #00D2FF, #6366F1); transform-origin: left; animation: sx-fill 7s var(--ease-out) infinite; }
@keyframes sx-fill { 0% { transform: scaleX(0); } 45%, 92% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
.sx-bars { display: flex; align-items: flex-end; gap: 6px; height: 92px; }
.sx-bars span {
flex: 1 1 0;
height: var(--h);
border-radius: 5px 5px 2px 2px;
background: linear-gradient(180deg, #7DD3FC, #3B82F6);
transform-origin: bottom;
animation: sx-grow 6s var(--ease-emph) infinite;
animation-delay: calc(var(--i) * 110ms);
opacity: .9;
}
.sx-bars span:nth-child(6) { background: linear-gradient(180deg, #A5F3FC, #00D2FF); box-shadow: 0 0 16px -2px rgba(0, 210, 255, .7); }
@keyframes sx-grow { 0% { transform: scaleY(.08); } 22%, 88% { transform: scaleY(1); } 100% { transform: scaleY(.08); } }
.sx-trend { position: absolute; left: 14px; right: 14px; top: 16px; height: 50px; width: calc(100% - 28px); overflow: visible; }
.sx-trend path { fill: none; stroke: #FDE68A; stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 4px rgba(253, 230, 138, .7)); animation: sx-draw 6s var(--ease-out) infinite 700ms; }
@keyframes sx-draw { 0% { stroke-dashoffset: 100; } 30%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.sx-card--slip { gap: 8px; }
.sx-amount { display: block; width: 58%; height: 14px; margin-top: 4px; border-radius: 7px; background: linear-gradient(90deg, #34D399, #10B981); box-shadow: 0 0 14px -2px rgba(16, 185, 129, .7); }
.sx-stamp {
position: absolute;
right: 12px;
bottom: 10px;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid #34D399;
color: #34D399;
font-size: 22px;
background: rgba(16, 185, 129, .12);
animation: sx-stamp 7s var(--ease-emph) infinite 1.5s;
}
@keyframes sx-stamp { 0%, 40% { opacity: 0; transform: scale(1.8) rotate(-30deg); } 48% { opacity: 1; transform: scale(.92) rotate(-12deg); } 52%, 92% { opacity: 1; transform: scale(1) rotate(-12deg); } 100% { opacity: 0; transform: scale(1) rotate(-12deg); } }
.sx-map {
position: relative;
height: 108px;
border-radius: 12px;
overflow: hidden;
background:
radial-gradient(circle at 30% 30%, rgba(52, 211, 153, .18), transparent 40%),
linear-gradient(135deg, rgba(30, 64, 120, .7), rgba(15, 32, 66, .9));
}
.sx-road { position: absolute; background: rgba(255, 255, 255, .16); }
.sx-road--h { left: 0; right: 0; top: 62%; height: 6px; transform: rotate(-8deg); }
.sx-road--v { top: 0; bottom: 0; left: 36%; width: 5px; transform: rotate(12deg); }
.sx-fence { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; translate: -50% -50%; border-radius: 50%; border: 1.5px dashed rgba(0, 210, 255, .8); background: rgba(0, 210, 255, .08); animation: sx-spin 24s linear infinite; }
.sx-ping { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; translate: -50% -50%; border-radius: 50%; border: 2px solid #00D2FF; animation: sx-pulse 2.4s var(--ease-out) infinite; }
.sx-ping--2 { animation-delay: 1.2s; }
.sx-pin { position: absolute; left: 50%; top: 50%; translate: -50% -88%; color: #FF6B8B; font-size: 26px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); animation: sx-drop 4.8s var(--ease-emph) infinite; }
@keyframes sx-drop { 0%, 100% { transform: translateY(0); } 10% { transform: translateY(-8px); } 18% { transform: translateY(0); } }
.sx-clock {
position: absolute;
right: -10px;
top: -12px;
width: 38px;
height: 38px;
border-radius: 50%;
background: #FFFFFF;
box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .6), inset 0 0 0 3px #E2E8F0;
}
.sx-clock::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; translate: -50% -50%; border-radius: 50%; background: #15253A; }
.sx-clock__hand { position: absolute; left: 50%; top: 50%; width: 2px; height: 13px; margin-left: -1px; border-radius: 2px; background: #2563EB; transform-origin: 50% 0; rotate: 180deg; animation: sx-spin 6s steps(12) infinite; }
/* the caption: what Stellar is, in one line and four short points (white / #C7D4E8 on the dark panel: 15+ / 11+ : 1) */
.sx-copy {
position: relative;
z-index: 2;
flex: 0 0 auto;
padding: 22px 30px 28px;
background: linear-gradient(180deg, rgba(7, 13, 28, 0) 0%, rgba(7, 13, 28, .55) 38%, rgba(7, 13, 28, .78) 100%);
animation: sx-in 900ms var(--ease-emph) 760ms both;
}
.sx-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7DD3FC; }
.sx-headline {
margin: 0 0 14px;
max-width: 30ch;
font-family: var(--font-display, var(--font-sans));
font-size: 24px !important;
font-weight: 700;
line-height: 1.25;
letter-spacing: -.02em;
color: #FFFFFF !important;
text-wrap: balance;
}
.sx-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0; padding: 0; list-style: none; }
.sx-points li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; line-height: 1.35; color: #C7D4E8; }
.sx-points i {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 30px;
height: 30px;
border-radius: 9px;
background: rgba(125, 211, 252, .12);
border: 1px solid rgba(125, 211, 252, .22);
color: #7DD3FC;
font-size: 15px;
}
@media (max-width: 1099.98px) {
.auth-frame { grid-template-columns: minmax(360px, 420px) minmax(0, 1fr); }
.sx-card--geo { display: none; }
.sx-points { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
.auth-shell { padding: 24px 16px; }
.auth-frame { grid-template-columns: minmax(0, 1fr); width: min(480px, 100%); min-height: 0; border-radius: 24px; }
.auth-art { display: none; }
.auth-pane { padding: 32px 28px 24px; gap: 24px; }
.auth-card { margin: 0; max-width: none; }
}
@media (max-width: 420px) {
.auth-pane { padding: 28px 20px 22px; }
.auth-title { font-size: 28px !important; }
}
@media (prefers-reduced-motion: reduce) {
.auth-nebula, .auth-frame, .auth-pane *, .sx-stage, .sx-stage * { animation: none !important; transition: none !important; }
.sx-shoot { display: none; }
}
/* error page */
.err { flex: 1 0 auto; display: grid; place-items: center; padding: var(--space-2xl); }
.err-card {
width: min(480px, 100%);
padding: 36px 32px 32px;
text-align: center;
background: var(--color-card);
color: var(--color-card-foreground);
border: 1px solid var(--color-border);
border-radius: 16px;
box-shadow: var(--shadow-md);
animation: auth-rise 600ms var(--ease-emph) both;
}
.err-brand { margin-bottom: 28px; }
.err-icon {
display: grid;
place-items: center;
width: 64px;
height: 64px;
margin: 0 auto 20px;
border-radius: 16px;
background: var(--color-info-bg);
color: var(--color-info-ink);
font-size: 30px;
}
.err-title { margin: 0 0 8px; font-size: 22px !important; font-weight: 700; color: var(--color-foreground) !important; }
.err-text { margin: 0 0 24px; font-size: 15px; line-height: 1.55; color: var(--color-muted-foreground); }
.err-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* --- R10. Motion: small, purposeful, everywhere ------------------------------------------------------------
Enter: decelerate (ease-out / --ease-emph). Exit: shorter. Nothing loops in the app itself. All of it is
switched off under prefers-reduced-motion. Animations end at transform: none, so no ancestor of a position:fixed
element (Bootstrap / hash dialogs inside the page) keeps a transform after the page has settled. */
@media (prefers-reduced-motion: no-preference) {
/* the page settles in */
.stellar-main > :not(.modal):not(.modalDialog):not(script):not(style) { animation: app-page-in 420ms var(--ease-emph) backwards; }
@keyframes app-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* buttons: colour eases, a press gives a little */
.btn { transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out),
transform 120ms var(--ease-out); }
.btn:not(:disabled):not(.disabled):active { transform: translateY(1px) scale(.985); }
/* dropdowns (notifications, account, table menus) drop in */
.dropdown-menu.show { animation: app-drop-in 200ms var(--ease-emph); }
@keyframes app-drop-in { from { opacity: 0; translate: 0 -6px; scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }
/* table rows and form controls react softly */
table tbody tr { transition: background-color var(--duration-fast) var(--ease-out); }
.form-control, .form-select, select { transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out); }
/* dashboard cards and links lift a touch */
.dash-kpi[href] { transition: transform 260ms var(--ease-emph), box-shadow 260ms var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.dash-kpi[href]:hover { transform: translateY(-2px); }
/* SweetAlert dialogs share the modal entrance */
.swal2-popup.swal2-show { animation: app-swal-in 280ms var(--ease-emph) !important; }
@keyframes app-swal-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
/* Select Company: cards arrive in sequence */
.company-list > .company-card { animation: app-page-in 420ms var(--ease-emph) backwards; }
.company-list > .company-card:nth-child(2) { animation-delay: 40ms; }
.company-list > .company-card:nth-child(3) { animation-delay: 80ms; }
.company-list > .company-card:nth-child(4) { animation-delay: 120ms; }
.company-list > .company-card:nth-child(5) { animation-delay: 160ms; }
.company-list > .company-card:nth-child(n+6) { animation-delay: 200ms; }
}
/* --- R11. Page fixes ------------------------------------------------------------------------------------------ */
/* Employee > Other Deduction Setup: the note and "View All" share one aligned row; each row's Update / View
buttons sit side by side (they were stacked and offset), and the cells line up on the middle. */
.od-setup-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-md) var(--space-xl);
margin: var(--space-md) 0 var(--space-lg);
}
.od-setup-note { font-size: 14px; color: var(--color-foreground); }
.od-setup-note i { vertical-align: -2px; }
/* custom.css pads every body cell 2em (!important); this form-in-a-table wants compact rows */
#stellar_payroll-table-dtr.od-setup-table > tbody > tr > td { padding: 10px 8px !important; vertical-align: middle; }
.od-setup-table label.checkbox { display: flex; align-items: center; gap: 10px; margin: 0; text-align: left; line-height: 1.3; font-weight: 600; }
.od-setup-table label.checkbox > input { flex: 0 0 auto; margin: 0 !important; }
.row-actions { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); flex-wrap: nowrap; }
/* ARA chat (floating widget + full page): the text box sits inside its own bordered row, so it takes no border or
focus ring of its own - the global textarea:focus ring drew a thick second border the moment the chat opened and
focused it. The row's border darkens a step instead, so focus is still visible without the heavy outline. */
.ara-widget-input, .ara-widget-input:focus, .ara-widget-input:focus-visible,
.ara-input, .ara-input:focus, .ara-input:focus-visible {
border: 0 !important;
box-shadow: none !important;
outline: none !important;
}
.ara-widget-input-area .ara-widget-input-row:focus-within, .ara-input-area .ara-input-wrapper:focus-within { border-color: var(--color-border-control); box-shadow: none; }