html {
font-size: 15px;
position: relative;
min-height: 100%;
}
/* ---- Page transition fade (see js/page-transitions.js) ----
Scoped to .fade-region, NOT body — persistent chrome (sidebar, top bar,
the auth background blobs) must stay put and never fade. */
.fade-region {
opacity: 1;
animation: page-fade-in .18s ease;
animation-fill-mode: forwards;
}
.fade-region.page-fade-out {
opacity: 0 !important;
transition: opacity .15s ease;
}
@keyframes page-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.fade-region { animation: none; opacity: 1; }
.fade-region.page-fade-out { transition: none; }
}
/* ---- Top loading bar for slow full-page navigations (see js/page-transitions.js) ----
Fills the gap between the fade-out and the server's response — Azure cold starts /
SQL Serverless resume can leave the page sitting dimmed for seconds with no feedback.
Fixed chrome appended to , deliberately OUTSIDE .fade-region so it never fades
with the page it's reporting on. Shown only after a delay (JS-side) so fast loads
never flash it. */
#page-loading-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
z-index: 2147483000;
pointer-events: none;
opacity: 0;
overflow: hidden;
transition: opacity .2s ease;
}
#page-loading-bar::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 40%;
border-radius: 2px;
background: linear-gradient(90deg, transparent, var(--accent-color), var(--accent-color));
box-shadow: 0 0 8px var(--accent-color);
transform: translateX(-100%);
}
#page-loading-bar.active {
opacity: 1;
}
#page-loading-bar.active::before {
animation: page-loading-sweep 1.2s ease-in-out infinite;
}
@keyframes page-loading-sweep {
from { transform: translateX(-100%); }
to { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) {
#page-loading-bar.active::before {
animation: none;
transform: none;
width: 100%;
background: var(--accent-color);
}
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
/* Focus ring — neutral on buttons, brand on form fields */
.btn:focus,
.btn:active:focus,
.btn:focus-visible,
.btn-link.nav-link:focus {
box-shadow: 0 0 0 2px var(--color-stroke-strong);
outline: none;
}
.btn-primary:focus,
.btn-primary:active:focus,
.btn-primary:focus-visible,
.btn-success:focus,
.btn-success:active:focus,
.btn-success:focus-visible {
box-shadow: 0 0 0 2px var(--color-stroke-strong);
outline: none;
}
.form-control:focus,
.form-check-input:focus {
box-shadow: 0 0 0 1px var(--color-brand);
outline: none;
}
.form-check-input {
background-color: var(--color-bg-surface);
border-color: var(--color-stroke-strong);
}
.form-check-input:checked {
background-color: var(--color-brand);
border-color: var(--color-brand);
}
.form-check-label {
color: var(--color-text-primary);
}
.progress {
background-color: var(--color-bg-subtle);
border-radius: var(--radius-sm);
}
.list-group-item {
background-color: var(--color-bg-surface);
border-color: var(--color-stroke-default);
color: var(--color-text-primary);
}
[data-theme="dark"] .btn-close {
filter: invert(1);
}
[data-theme="light"] .btn-close {
filter: none;
}
/* Helpdesk ticket comment thread */
.comment-thread {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.comment-bubble {
max-width: 85%;
padding: 0.6rem 0.9rem;
border-radius: var(--radius-lg);
border: 1px solid var(--color-stroke-default);
}
.comment-bubble-tenant {
align-self: flex-start;
background-color: var(--color-bg-subtle);
color: var(--color-text-primary);
border-bottom-left-radius: 4px;
}
.comment-bubble-manager {
align-self: flex-end;
background-color: var(--color-brand-subtle);
border-color: var(--color-brand);
color: var(--color-text-primary);
border-bottom-right-radius: 4px;
}
.comment-bubble-header {
display: flex;
justify-content: space-between;
gap: 0.75rem;
font-size: 0.8rem;
color: var(--color-text-muted);
margin-bottom: 0.2rem;
}
.comment-bubble-author {
font-weight: 600;
color: var(--color-text-secondary);
}
.comment-bubble-meta {
display: flex;
align-items: center;
gap: 0.3rem;
white-space: nowrap;
}
.comment-tick-sent {
color: var(--color-text-muted);
}
.comment-tick-read {
color: var(--color-brand);
}
.comment-bubble-body {
white-space: pre-wrap;
word-break: break-word;
}