No records found
Try adjusting your filters.
*/
.empty-state {
text-align: center;
padding: var(--space-8) var(--space-4);
color: var(--text-muted);
}
.empty-state__icon {
font-size: 2rem;
color: var(--text-muted);
opacity: 0.6;
margin-bottom: var(--space-3);
display: block;
}
.empty-state__title {
font-weight: var(--font-weight-semibold);
color: var(--text-secondary);
margin-bottom: 0.25rem;
}
.empty-state__hint {
font-size: var(--font-size-sm);
margin-bottom: 0;
}
/* ---------- Skeleton loaders ---------- */
.skeleton {
background: linear-gradient(90deg, var(--border-color) 25%, var(--surface-muted) 37%, var(--border-color) 63%);
background-size: 400% 100%;
animation: skeleton-loading 1.4s ease infinite;
border-radius: var(--radius-sm);
}
@keyframes skeleton-loading {
0% { background-position: 100% 50%; }
100% { background-position: 0 50%; }
}
/* ---------- Command palette ---------- */
.command-palette {
position: fixed;
inset: 0;
z-index: 1050;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 10vh;
}
.command-palette__backdrop {
position: absolute;
inset: 0;
background: rgba(38, 50, 56, 0.55);
}
.command-palette__panel {
position: relative;
width: min(560px, 90vw);
background-color: var(--surface-overlay);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.command-palette__input {
width: 100%;
border: none;
padding: 1rem 1.25rem;
font-size: 1rem;
border-bottom: 1px solid var(--border-color);
background: transparent;
color: var(--text-primary);
outline: none;
}
.command-palette__results {
list-style: none;
margin: 0;
padding: 0.5rem;
max-height: 320px;
overflow-y: auto;
}
.command-palette__results li a {
display: block;
padding: 0.6rem 0.75rem;
border-radius: var(--radius-sm);
color: var(--text-primary);
text-decoration: none;
font-size: var(--font-size-sm);
}
.command-palette__results li a:hover,
.command-palette__results li a.active {
background-color: var(--surface-sunken);
color: var(--brand);
}
/* ---------- Focus visibility (WCAG 2.1 AA) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
outline: 2px solid var(--focus-ring-color);
outline-offset: 2px;
}
@media (max-width: 991.98px) {
.app-sidebar {
position: fixed;
z-index: 30;
transform: translateX(-100%);
box-shadow: var(--shadow-lg);
}
.app-sidebar.show {
transform: translateX(0);
}
.app-content {
padding: 1rem 1rem 2rem;
}
.app-topbar {
padding: 0 1rem;
}
.app-breadcrumbs {
padding: 0.75rem 1rem 0;
}
}
/* ---------- Login screen ---------- */
/* Matches Flat-Able's real .auth-wrapper treatment (dist/assets/css/style.css): a solid teal
fallback under a full-bleed background photo, with a plain white, minimally-rounded card on top -
see dist/auth-signin.html. Background image is the template's own img-auth-big.jpg, vendored
locally (wwwroot/images/auth/) alongside the other self-hosted assets. */
.login-body {
position: relative;
min-height: 100vh;
/* Flat teal fill - one of Flat-Able's own auth variants (no photo). The template's bundled photo
background was a generic stock airplane image with no relevance to an education ERP, so it was
dropped rather than kept just for template fidelity; swap in a real campus photo here later via
background-image: url("../images/auth/