/* =========================================================================
Asset Management — Design Tokens (Modern Corporate: indigo + slate)
All UI colors, radii, shadows flow from these variables.
Toggle dark mode by adding `.dark-mode` to .
========================================================================= */
:root {
/* Brand */
--color-primary: #4f46e5; /* indigo-600 */
--color-primary-hover: #4338ca; /* indigo-700 */
--color-primary-active: #3730a3; /* indigo-800 */
--color-primary-soft: #eef2ff; /* indigo-50 */
--color-primary-soft-border: #e0e7ff;
--color-on-primary: #ffffff;
/* Status */
--color-success: #10b981;
--color-success-soft: #ecfdf5;
--color-warning: #f59e0b;
--color-warning-soft: #fffbeb;
--color-danger: #ef4444;
--color-danger-soft: #fef2f2;
--color-info: #0ea5e9;
--color-info-soft: #f0f9ff;
/* Surfaces & text (slate scale) */
--color-bg: #f8fafc; /* page background */
--color-surface: #ffffff; /* cards, header, menu */
--color-surface-alt: #f1f5f9; /* hover / striped */
--color-border: #e2e8f0; /* slate-200 */
--color-border-strong: #cbd5e1; /* slate-300 */
--color-text: #0f172a; /* slate-900 */
--color-text-muted: #475569; /* slate-600 */
--color-text-subtle: #94a3b8; /* slate-400 */
/* Nav chrome */
--color-sidebar-bg: #0f172a; /* slate-900 */
--color-sidebar-surface: #1e293b; /* slate-800 */
--color-sidebar-hover: #334155; /* slate-700 */
--color-sidebar-text: #e2e8f0;
--color-sidebar-text-muted: #94a3b8;
--color-sidebar-active: var(--color-primary);
--color-header-bg: #ffffff;
--color-header-border: #e2e8f0;
--color-header-text: #0f172a;
/* Nav accent palette for sidebar icons */
--icon-1: #6366f1; /* indigo */
--icon-2: #0ea5e9; /* sky */
--icon-3: #14b8a6; /* teal */
--icon-4: #a855f7; /* purple*/
--icon-5: #f59e0b; /* amber */
--icon-6: #ec4899; /* pink */
--icon-7: #22c55e; /* green */
/* Effects */
--radius-sm: 4px;
--radius: 6px;
--radius-lg: 10px;
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-md: 0 4px 10px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12);
--focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.25);
/* Keep Bootstrap aware of the brand so utilities inherit */
--bs-primary: var(--color-primary);
--bs-primary-rgb: 79, 70, 229;
--bs-link-color: var(--color-primary);
--bs-link-hover-color: var(--color-primary-hover);
--bs-body-color: var(--color-text);
--bs-body-bg: var(--color-bg);
--bs-border-color: var(--color-border);
}
body.dark-mode {
--color-bg: #0b1220;
--color-surface: #111827;
--color-surface-alt: #1f2937;
--color-border: #1f2937;
--color-border-strong: #334155;
--color-text: #e5e7eb;
--color-text-muted: #94a3b8;
--color-text-subtle: #64748b;
--color-sidebar-bg: #0b1220;
--color-sidebar-surface: #111827;
--color-sidebar-hover: #1f2937;
--color-sidebar-text: #e5e7eb;
--color-sidebar-text-muted: #94a3b8;
--color-header-bg: #111827;
--color-header-border: #1f2937;
--color-header-text: #e5e7eb;
--color-primary-soft: #1e1b4b;
--color-primary-soft-border: #312e81;
--color-success-soft: #064e3b;
--color-warning-soft: #451a03;
--color-danger-soft: #450a0a;
--color-info-soft: #082f49;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
--shadow-md: 0 4px 10px rgba(0, 0, 0, 0.55);
--shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6);
--bs-body-bg: var(--color-bg);
--bs-body-color: var(--color-text);
--bs-border-color: var(--color-border);
}
/* ---------- Global baseline ---------- */
html,
body {
background-color: var(--color-bg);
color: var(--color-text);
}
/* Use tokens for Bootstrap's link color */
a {
color: var(--color-primary);
}
a:hover {
color: var(--color-primary-hover);
}
/* ---------- Buttons: compact, consistent, icon-aware ---------- */
.btn {
--bs-btn-font-weight: 500;
border-radius: var(--radius);
padding: 0.375rem 0.85rem;
font-size: 0.875rem;
line-height: 1.35;
transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .02s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
white-space: nowrap;
}
.btn:focus-visible {
box-shadow: var(--focus-ring);
}
.btn.btn-sm {
padding: 0.25rem 0.6rem;
font-size: 0.8rem;
border-radius: var(--radius-sm);
}
.btn.btn-lg {
padding: 0.6rem 1.25rem;
font-size: 1rem;
border-radius: var(--radius-lg);
}
/* Any icon inside a button gets even spacing and size */
.btn > i,
.btn > .bi,
.btn > .fa {
font-size: 1em;
line-height: 1;
}
/* Solid variants */
.btn-primary {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-on-primary);
}
.btn-primary:hover,
.btn-primary:focus {
background-color: var(--color-primary-hover);
border-color: var(--color-primary-hover);
color: var(--color-on-primary);
}
.btn-primary:active,
.btn-primary.active {
background-color: var(--color-primary-active) !important;
border-color: var(--color-primary-active) !important;
}
.btn-success {
background-color: var(--color-success);
border-color: var(--color-success);
color: #fff;
}
.btn-danger {
background-color: var(--color-danger);
border-color: var(--color-danger);
color: #fff;
}
.btn-warning {
background-color: var(--color-warning);
border-color: var(--color-warning);
color: #1f1300;
}
.btn-info {
background-color: var(--color-info);
border-color: var(--color-info);
color: #fff;
}
/* Outline variants */
.btn-outline-primary {
color: var(--color-primary);
border-color: var(--color-primary);
background-color: transparent;
}
.btn-outline-primary:hover {
background-color: var(--color-primary);
color: var(--color-on-primary);
}
.btn-outline-secondary {
color: var(--color-text-muted);
border-color: var(--color-border-strong);
background-color: transparent;
}
.btn-outline-secondary:hover {
background-color: var(--color-surface-alt);
color: var(--color-text);
border-color: var(--color-border-strong);
}
.btn-outline-info,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger {
background-color: transparent;
}
.btn-outline-info {
color: var(--color-info);
border-color: var(--color-info);
}
.btn-outline-info:hover {
background-color: var(--color-info);
color: #fff;
}
.btn-outline-success {
color: var(--color-success);
border-color: var(--color-success);
}
.btn-outline-success:hover {
background-color: var(--color-success);
color: #fff;
}
.btn-outline-warning {
color: var(--color-warning);
border-color: var(--color-warning);
}
.btn-outline-warning:hover {
background-color: var(--color-warning);
color: #1f1300;
}
.btn-outline-danger {
color: var(--color-danger);
border-color: var(--color-danger);
}
.btn-outline-danger:hover {
background-color: var(--color-danger);
color: #fff;
}
/* Soft tonal variants (used by some pages already as btn-soft-*) */
.btn-soft-primary {
background-color: var(--color-primary-soft);
color: var(--color-primary);
border: 1px solid var(--color-primary-soft-border);
}
.btn-soft-primary:hover {
background-color: var(--color-primary);
color: var(--color-on-primary);
border-color: var(--color-primary);
}
.btn-soft-success {
background-color: var(--color-success-soft);
color: var(--color-success);
border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
}
.btn-soft-success:hover {
background-color: var(--color-success);
color: #fff;
}
.btn-soft-warning {
background-color: var(--color-warning-soft);
color: #92400e;
border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
}
.btn-soft-warning:hover {
background-color: var(--color-warning);
color: #1f1300;
}
.btn-soft-danger {
background-color: var(--color-danger-soft);
color: var(--color-danger);
border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
}
.btn-soft-danger:hover {
background-color: var(--color-danger);
color: #fff;
}
.btn-soft-info {
background-color: var(--color-info-soft);
color: var(--color-info);
border: 1px solid color-mix(in srgb, var(--color-info) 30%, transparent);
}
.btn-soft-info:hover {
background-color: var(--color-info);
color: #fff;
}
/* Disabled should look disabled, not invisible */
.btn:disabled,
.btn.disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* ---------- Form controls: sharp + tokenized ---------- */
.form-control,
.form-select {
background-color: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius);
font-size: 0.9rem;
}
.form-control:focus,
.form-select:focus {
border-color: var(--color-primary);
box-shadow: var(--focus-ring);
background-color: var(--color-surface);
color: var(--color-text);
}
.form-control::placeholder {
color: var(--color-text-subtle);
}
.form-label {
color: var(--color-text-muted);
font-weight: 500;
font-size: 0.85rem;
}
/* ---------- Cards ---------- */
.card {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs);
color: var(--color-text);
}
.card-header {
background-color: var(--color-surface);
border-bottom: 1px solid var(--color-border);
color: var(--color-text);
}
.card-footer {
background-color: var(--color-surface);
border-top: 1px solid var(--color-border);
color: var(--color-text-muted);
}
/* ---------- Tables (keeps GridBlazor rules untouched) ---------- */
.table {
--bs-table-bg: transparent;
color: var(--color-text);
}
.table > :not(caption) > * > * {
border-color: var(--color-border);
}
/* ---------- Dropdowns ---------- */
.dropdown-menu {
background-color: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
padding: 0.35rem;
}
.dropdown-item {
color: var(--color-text);
border-radius: var(--radius-sm);
padding: 0.4rem 0.6rem;
font-size: 0.875rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: var(--color-surface-alt);
color: var(--color-text);
}
/* ---------- Badges / pills ---------- */
.badge {
border-radius: 999px;
font-weight: 500;
}
/* ---------- Breadcrumbs ---------- */
.breadcrumb-container {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow-xs);
color: var(--color-text);
padding: 6px 16px;
margin: 0 0 6px 0;
}
.breadcrumb {
margin-bottom: 0;
font-size: 0.875rem;
}
.breadcrumb a {
color: var(--color-primary);
text-decoration: none;
}
.breadcrumb a:hover {
color: var(--color-primary-hover);
}
.breadcrumb-item.active {
color: var(--color-text-muted) !important;
}
.breadcrumb-item + .breadcrumb-item::before {
color: var(--color-text-subtle) !important;
}
/* ---------- Header ---------- */
.header {
background-color: var(--color-header-bg) !important;
color: var(--color-header-text);
border-bottom: 1px solid var(--color-header-border);
box-shadow: var(--shadow-xs);
}
.header .icons i {
color: var(--color-text-muted);
transition: color .15s;
}
.header .icons i:hover {
color: var(--color-primary);
}
.header #menu-toggle {
background-color: var(--color-surface-alt);
color: var(--color-text);
border: 1px solid var(--color-border);
}
.header #menu-toggle:hover {
background-color: var(--color-border);
}
.app-version {
font-family: inherit;
font-size: 0.75rem;
font-weight: 600;
color: var(--color-primary);
background: var(--color-primary-soft);
padding: 2px 8px;
border-radius: 999px;
border: 1px solid var(--color-primary-soft-border);
}
/* ---------- Sidebar ---------- */
.sidebar {
background-color: var(--color-sidebar-bg) !important;
color: var(--color-sidebar-text);
border-right: 1px solid var(--color-border);
}
.sidebar a {
color: var(--color-sidebar-text) !important;
font-size: 0.9rem;
padding: 10px 14px !important;
border-radius: 0;
}
.sidebar a:hover {
background-color: var(--color-sidebar-hover);
}
.sidebar a.active,
.sidebar a.has-submenu.active {
background-color: var(--color-sidebar-hover);
color: #fff !important;
}
.sidebar a .bi,
.sidebar a .fa {
color: var(--color-sidebar-text-muted);
width: 1.2rem;
text-align: center;
font-size: 1rem;
}
.sidebar a:hover .bi,
.sidebar a:hover .fa,
.sidebar a.active .bi,
.sidebar a.active .fa {
color: var(--color-primary);
}
.sidebar .app-info {
background-color: var(--color-sidebar-surface);
border-bottom: 1px solid var(--color-sidebar-hover);
}
.sidebar .submenu a {
font-size: 0.82rem !important;
color: var(--color-sidebar-text-muted) !important;
padding: 6px 10px !important;
}
.sidebar .submenu a:hover {
color: #fff !important;
background: transparent;
}
.logout {
border-top: 1px solid var(--color-sidebar-hover) !important;
}
.logout a:hover {
background-color: var(--color-sidebar-hover);
}
/* ---------- Sidebar footer: logout + version ---------- */
.sidebar-footer {
margin-top: auto;
}
.sidebar-footer .logout {
border-top: 1px solid var(--color-sidebar-hover) !important;
}
/* Version label shown below the logout button */
.sidebar-version {
display: flex !important;
align-items: center;
justify-content: center;
padding: 8px 14px !important;
font-size: 0.72rem !important;
color: var(--color-sidebar-text-muted) !important;
text-decoration: none;
letter-spacing: 0.3px;
}
.sidebar-version:hover {
color: var(--color-primary) !important;
background: transparent !important;
}
/* Distinct per-section icon accents (replaces inline style= colors) */
.sidebar-icon-dashboard {
color: var(--icon-5) !important;
}
.sidebar-icon-companies {
color: var(--icon-2) !important;
}
.sidebar-icon-employees {
color: var(--icon-3) !important;
}
.sidebar-icon-assets {
color: var(--icon-4) !important;
}
.sidebar-icon-allocation {
color: var(--icon-1) !important;
}
.sidebar-icon-reports {
color: var(--icon-5) !important;
}
.sidebar-icon-certificates {
color: var(--icon-6) !important;
}
.sidebar-icon-users {
color: var(--icon-1) !important;
}
.sidebar-icon-developer {
color: var(--icon-7) !important;
}
.sidebar-icon-logout {
color: var(--color-danger) !important;
}
/* ---------- Scrollbars ---------- */
* {
scrollbar-color: var(--color-border-strong) transparent;
scrollbar-width: thin;
}
/* ---------- Utility: the hardcoded `.borderd` used throughout ---------- */
.borderd {
border: 1px solid var(--color-border) !important;
}
body.dark-mode .borderd {
border-color: var(--color-border) !important;
}
/* =========================================================================
Dark-mode defensive overrides
Neutralize Bootstrap utility classes and hardcoded light backgrounds
that otherwise leak through in dark mode.
========================================================================= */
body.dark-mode .bg-white,
body.dark-mode .bg-light {
background-color: var(--color-surface) !important;
color: var(--color-text) !important;
}
body.dark-mode .text-dark {
color: var(--color-text) !important;
}
body.dark-mode .text-black {
color: var(--color-text) !important;
}
body.dark-mode .text-muted {
color: var(--color-text-muted) !important;
}
body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom,
body.dark-mode .border-start,
body.dark-mode .border-end {
border-color: var(--color-border) !important;
}
/* Force form-select / form-control to always obey the token in dark mode,
even when combined with utility classes like bg-light */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.dark-mode textarea {
background-color: var(--color-surface) !important;
color: var(--color-text) !important;
border-color: var(--color-border-strong) !important;
}
body.dark-mode .form-select:focus,
body.dark-mode .form-control:focus {
background-color: var(--color-surface) !important;
color: var(--color-text) !important;
border-color: var(--color-primary) !important;
box-shadow: var(--focus-ring) !important;
}
body.dark-mode .form-control::placeholder {
color: var(--color-text-subtle) !important;
}
body.dark-mode .input-group-text {
background-color: var(--color-surface-alt) !important;
color: var(--color-text) !important;
border-color: var(--color-border-strong) !important;
}
/* The `bg-primary` input-group-text should keep its brand color but
flip to on-primary text in dark mode */
body.dark-mode .input-group-text.bg-primary {
background-color: var(--color-primary) !important;
color: var(--color-on-primary) !important;
border-color: var(--color-primary) !important;
}
/* Cards / card-footers in dark mode (Bootstrap defaults are semi-transparent).
Note: stat cards and headers with explicit bg-* utility classes keep
their intentional colors. */
body.dark-mode .card:not(.stats-card),
body.dark-mode .card:not(.stats-card) > .card-body,
body.dark-mode .card:not(.stats-card) > .card-footer {
background-color: var(--color-surface) !important;
color: var(--color-text) !important;
border-color: var(--color-border) !important;
}
body.dark-mode .card:not(.stats-card) > .card-header:not([class*="bg-"]) {
background-color: var(--color-surface) !important;
color: var(--color-text) !important;
border-color: var(--color-border) !important;
}
/* Colored popup headers — preserve in dark mode + ensure text is readable */
.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-info,
.card-header.bg-danger,
.card-header.bg-secondary {
color: #fff !important;
border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}
.card-header.bg-primary h1,
.card-header.bg-primary h2,
.card-header.bg-primary h3,
.card-header.bg-primary h4,
.card-header.bg-primary h5,
.card-header.bg-primary h6,
.card-header.bg-success h1,
.card-header.bg-success h2,
.card-header.bg-success h3,
.card-header.bg-success h4,
.card-header.bg-success h5,
.card-header.bg-success h6,
.card-header.bg-info h1,
.card-header.bg-info h2,
.card-header.bg-info h3,
.card-header.bg-info h4,
.card-header.bg-info h5,
.card-header.bg-info h6,
.card-header.bg-danger h1,
.card-header.bg-danger h2,
.card-header.bg-danger h3,
.card-header.bg-danger h4,
.card-header.bg-danger h5,
.card-header.bg-danger h6,
.card-header.bg-secondary h1,
.card-header.bg-secondary h2,
.card-header.bg-secondary h3,
.card-header.bg-secondary h4,
.card-header.bg-secondary h5,
.card-header.bg-secondary h6 {
color: #fff !important;
margin: 0;
}
.card-header.bg-warning {
color: #1f1300 !important;
}
.card-header.bg-warning h1,
.card-header.bg-warning h2,
.card-header.bg-warning h3,
.card-header.bg-warning h4,
.card-header.bg-warning h5,
.card-header.bg-warning h6 {
color: #1f1300 !important;
margin: 0;
}
/* Universal dialog close button — sits at the right edge of a colored header */
.dialog-close-btn {
cursor: pointer;
margin-left: auto;
color: rgba(255, 255, 255, 0.85);
line-height: 1;
transition: color 0.15s, transform 0.15s;
padding: 2px 4px;
border-radius: var(--radius-sm);
text-decoration: none;
display: inline-flex;
align-items: center;
}
.dialog-close-btn:hover,
.dialog-close-btn:focus {
color: #fff;
background-color: rgba(255, 255, 255, 0.12);
transform: scale(1.05);
}
.dialog-close-btn > i {
font-size: 1.1rem;
line-height: 1;
}
/* When header is warning (light yellow bg), close icon should be dark */
.card-header.bg-warning .dialog-close-btn {
color: rgba(31, 19, 0, 0.75);
}
.card-header.bg-warning .dialog-close-btn:hover {
color: #1f1300;
background-color: rgba(0, 0, 0, 0.08);
}
/* When header has no bg-* class (neutral), close icon should use danger tone */
.card-header:not([class*="bg-"]) .dialog-close-btn {
color: var(--color-danger);
}
.card-header:not([class*="bg-"]) .dialog-close-btn:hover {
color: var(--color-danger);
background-color: var(--color-danger-soft);
}
/* Responsive dialog widths + text wrapping */
.dialog {
width: min(380px, 92vw) !important;
max-width: 92vw;
}
.dialog.dialog-wide {
width: min(720px, 95vw) !important;
max-width: 95vw;
}
/* Prevent overflow from any dialog card */
.dialog .card {
overflow: hidden;
word-break: break-word;
overflow-wrap: anywhere;
}
.dialog .card-header {
min-width: 0;
}
.dialog .card-header h6 {
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
flex: 1;
}
.dialog .card-body {
overflow-y: auto;
overflow-x: hidden;
max-height: 70vh;
word-break: break-word;
overflow-wrap: anywhere;
}
/* Stat cards: keep their vivid brand background in both modes,
and make the footer a translucent darker overlay that blends with the card color */
body.dark-mode .stats-card .card-footer,
.stats-card .card-footer {
background: rgba(0, 0, 0, 0.18) !important;
color: #fff !important;
border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}
body.dark-mode .stats-card .card-footer a,
.stats-card .card-footer a {
color: #fff !important;
}
/* Modal */
body.dark-mode .modal-content,
body.dark-mode .modal-header,
body.dark-mode .modal-body,
body.dark-mode .modal-footer {
background-color: var(--color-surface) !important;
color: var(--color-text) !important;
border-color: var(--color-border) !important;
}
body.dark-mode .modal-header .btn-close,
body.dark-mode .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
/* Nav tabs / pills */
body.dark-mode .nav-tabs,
body.dark-mode .nav-pills {
border-color: var(--color-border);
}
body.dark-mode .nav-link {
color: var(--color-text-muted);
}
body.dark-mode .nav-link:hover {
color: var(--color-text);
}
body.dark-mode .nav-link.active {
background-color: var(--color-surface-alt);
color: var(--color-text);
border-color: var(--color-border);
}
/* Popovers / tooltips */
body.dark-mode .popover,
body.dark-mode .tooltip-inner {
background-color: var(--color-surface-alt);
color: var(--color-text);
border-color: var(--color-border);
}
/* List groups */
body.dark-mode .list-group-item {
background-color: var(--color-surface);
color: var(--color-text);
border-color: var(--color-border);
}
/* Close buttons / kbd / pre */
body.dark-mode kbd,
body.dark-mode pre,
body.dark-mode code {
background-color: var(--color-surface-alt);
color: var(--color-text);
}
/* Keep colored stat cards unchanged in dark mode (they're intentionally vivid) */
body.dark-mode .bg-info-custom,
body.dark-mode .bg-warning-custom,
body.dark-mode .bg-success-custom,
body.dark-mode .bg-danger-custom {
color: #fff !important;
}
/* Bootstrap "soft" active pill in breadcrumb */
body.dark-mode .btn-soft-primary {
background-color: var(--color-primary-soft);
color: #c7d2fe;
border-color: var(--color-primary-soft-border);
}
/* =========================================================================
Utility tokens — replace common inline-style hacks scattered through pages
========================================================================= */
/* `
` replaces `
` */
.hr-accent {
color: var(--color-warning);
border: 0;
border-top: 1px solid var(--color-warning);
opacity: 0.5;
margin: 0.6rem 0;
}
body.dark-mode .hr-accent {
border-top-color: var(--color-warning);
opacity: 0.55;
}
/* `` replaces `style="background: darkgrey"` / `darkcyan` */
.section-panel {
background-color: var(--color-surface-alt);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: var(--radius);
}
body.dark-mode .section-panel {
background-color: var(--color-surface-alt);
color: var(--color-text);
border-color: var(--color-border);
}
/* =========================================================================
Auth shell — centered login / forgot / reset / change-password / register
Uses tokens so dark mode flips automatically.
========================================================================= */
.auth-shell {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
background:
radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 60%),
radial-gradient(900px 500px at 110% 110%, color-mix(in srgb, var(--color-info) 14%, transparent), transparent 60%),
var(--color-bg);
position: relative;
overflow: hidden;
}
.auth-shell::before {
content: "";
position: absolute;
inset: 0;
background-image: url('/assets/img/curved-images/curved5-small.jpg');
background-size: cover;
background-position: center;
opacity: 0.08;
pointer-events: none;
}
body.dark-mode .auth-shell::before {
opacity: 0.05;
}
.auth-card {
position: relative;
z-index: 1;
width: min(440px, 100%);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 1.75rem 1.75rem 1.4rem;
color: var(--color-text);
}
.auth-card.auth-card-wide {
width: min(720px, 100%);
}
.auth-brand {
text-align: center;
margin-bottom: 1.1rem;
}
.auth-brand img {
width: 54px;
height: 54px;
border-radius: 12px;
box-shadow: var(--shadow-sm);
background: var(--color-surface-alt);
padding: 6px;
margin-bottom: 0.5rem;
}
/* The brand lockup is drawn inline by the CredentLogo component rather than loaded as an
image, so the wordmark inherits the card's text colour and stays legible in both themes.
The badge brings its own dark background, so it needs no backing box or shadow here. */
.auth-brand .credent-logo {
margin-bottom: 0.9rem;
max-width: 100%;
color: var(--color-text);
}
.auth-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0;
color: var(--color-text);
text-align: center;
}
.auth-subtitle {
margin: 0.25rem 0 0;
text-align: center;
font-size: 0.82rem;
color: var(--color-text-muted);
}
.auth-form .form-label {
font-size: 0.78rem;
font-weight: 600;
color: var(--color-text-muted);
margin-bottom: 0.25rem;
}
.auth-form .input-group-text {
background-color: var(--color-surface-alt);
color: var(--color-text-muted);
border-color: var(--color-border-strong);
}
.auth-form .form-control {
background-color: var(--color-surface);
color: var(--color-text);
border-color: var(--color-border-strong);
font-size: 0.9rem;
padding: 0.5rem 0.75rem;
}
.auth-form .form-control:focus {
border-color: var(--color-primary);
box-shadow: var(--focus-ring);
}
.auth-form .validation-message {
color: var(--color-danger);
font-size: 0.72rem;
margin-top: 0.15rem;
}
.auth-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
background-color: var(--color-primary);
border: 1px solid var(--color-primary);
color: var(--color-on-primary);
font-weight: 600;
padding: 0.55rem 0.75rem;
border-radius: var(--radius);
transition: background-color .15s;
}
.auth-btn-primary:hover:not(:disabled) {
background-color: var(--color-primary-hover);
border-color: var(--color-primary-hover);
color: #fff;
}
.auth-btn-primary:disabled {
opacity: 0.65;
}
.auth-divider {
display: flex;
align-items: center;
gap: 0.6rem;
color: var(--color-text-subtle);
font-size: 0.75rem;
margin: 1rem 0;
}
.auth-divider::before,
.auth-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--color-border);
}
.auth-links {
text-align: center;
font-size: 0.85rem;
color: var(--color-text-muted);
}
.auth-links a {
color: var(--color-primary);
text-decoration: none;
font-weight: 500;
}
.auth-links a:hover {
color: var(--color-primary-hover);
text-decoration: underline;
}
.auth-alert {
border-radius: var(--radius);
padding: 0.55rem 0.75rem;
font-size: 0.82rem;
margin-bottom: 0.8rem;
border: 1px solid transparent;
}
.auth-alert.auth-alert-danger {
background: var(--color-danger-soft);
color: var(--color-danger);
border-color: color-mix(in srgb, var(--color-danger) 25%, transparent);
}
.auth-alert.auth-alert-success {
background: var(--color-success-soft);
color: var(--color-success);
border-color: color-mix(in srgb, var(--color-success) 25%, transparent);
}
.auth-alert.auth-alert-info {
background: var(--color-info-soft);
color: var(--color-info);
border-color: color-mix(in srgb, var(--color-info) 25%, transparent);
}
.password-toggle {
cursor: pointer;
color: var(--color-text-muted);
}
.password-toggle:hover {
color: var(--color-primary);
}
/* Detail view — shared card layout for view dialogs across the app */
.detail-view {
max-width: 900px;
}
.detail-profile-header {
display: flex;
align-items: center;
gap: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--color-border);
}
.detail-avatar {
width: 52px;
height: 52px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
font-weight: 700;
background: var(--color-primary-soft);
color: var(--color-primary);
flex-shrink: 0;
}
.detail-section {
margin-top: 0.75rem;
padding-top: 0.65rem;
border-top: 1px solid var(--color-border);
}
.detail-section-title {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
color: var(--color-primary);
margin-bottom: 0.4rem;
}
/* Each field = a .detail-field div containing a label div + value div.
Block elements so they never glue together even if CSS caching lags. */
.detail-field {
padding-bottom: 0.4rem;
}
.detail-field-label {
font-size: 0.68rem;
font-weight: 700;
color: var(--color-text-subtle);
text-transform: uppercase;
letter-spacing: 0.4px;
line-height: 1.3;
margin-bottom: 0.15rem;
}
.detail-field-value {
font-size: 0.88rem;
color: var(--color-text);
word-break: break-word;
line-height: 1.4;
min-height: 1.25em;
}
.detail-field-value:empty::after {
content: "\2014";
color: var(--color-text-subtle);
}
/* Legacy aliases (keep for any existing usage) */
.detail-label { display: block; font-size: 0.68rem; font-weight: 700; color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 0.15rem; }
.detail-value { display: block; font-size: 0.88rem; color: var(--color-text); word-break: break-word; min-height: 1.25em; padding-bottom: 0.35rem; }
.detail-value:empty::after { content: "\2014"; color: var(--color-text-subtle); }
/* Clickable avatar thumbnail inside data grids */
.grid-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--color-border);
background: var(--color-surface-alt);
display: block;
transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.grid-avatar-link {
display: inline-block;
line-height: 0;
cursor: zoom-in;
}
.grid-avatar-link:hover .grid-avatar {
transform: scale(1.08);
border-color: var(--color-primary);
box-shadow: 0 0 0 2px var(--color-primary-soft);
}
/* Normalize Select2 / DropdownSelect height to match standard form-control inputs */
.select2-container--bootstrap-5 .select2-selection {
min-height: 0 !important;
height: auto !important;
padding: 0.35rem 0.6rem !important;
font-size: 0.9rem !important;
line-height: 1.35 !important;
border-color: var(--color-border-strong) !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
padding: 0 !important;
line-height: 1.35 !important;
font-size: 0.9rem !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
height: 100% !important;
}
/* Inside .form-section-body, make Select2 match the compact inputs */
.form-section-body .select2-container--bootstrap-5 .select2-selection {
padding: 0.35rem 0.6rem !important;
font-size: 0.85rem !important;
}
.form-section-body .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
font-size: 0.85rem !important;
}
/* Form section card — used by long multi-section forms (employee config, etc.)
Note: `overflow: visible` so native