:root {
    /* Page / UI tokens (original look) */
    --bs-body-bg: #fafafa; /* page background (light mode: #fafafa) */
    --bs-dark: #0C243D; /* navbar / dark surface (navigation menu background changed to #0C243D) */
    --surface-bg: #ffffff;
    --surface-alt: #f8f9fa;
    --surface-muted: #f8f9fa;
    --surface-border: rgba(0,0,0,0.06);
    /* Text */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    /* Brand */
    --color-primary-accent: #2e6df0;
    --color-primary-alt: #fd7e14; /* brand orange used in navbar */
    --brand-color: var(--color-primary-alt);
    /* Page-header specific tokens (light theme) */
    --page-header-bg: #f6f8ff; /* subtle light bluish surface for page header */
    --page-header-border: rgba(46,109,240,0.08);
    /* Nav-specific (original hard-coded look) */
    --nav-text: #f8f9fa; /* nav text color (light on dark bar) */
    --nav-link-color: #f8f9fa;
    --nav-link-active-color: var(--color-primary-alt);
    /* Bootstrap-like fallbacks used in code */
    --bs-primary: #0d6efd;
    --bs-success: #198754;
    --bs-danger: #dc3545;
    --bs-warning: #fd7e14;
    --bs-info: #0dcaf0;
    --bs-secondary: #6c757d;
    --bs-teal: #20c997;
    --bs-orange: var(--bs-warning);
    /* Dropdown / controls */
    --dropdown-item-color: inherit;
    --dropdown-item-active-text: #fff;
    /* Optional layout tokens */
    --radius-lg: 0.75rem;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 6px 18px rgba(0,0,0,0.08);
    --shadow-lg: 0 24px 48px rgba(0,0,0,0.12);
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    /* Compatibility / alias variables used across older CSS files — keep colors centralized here */
    --bs-card-bg: var(--surface-bg);
    --dashboard-card-bg: #262f42; /* centralized dashboard card background (light theme) */
    --bs-border-color: var(--surface-border);
    --bs-secondary-color: var(--text-secondary);
    --bs-emphasis-color: var(--text-primary);
    --bs-body-color: var(--text-primary);
    --bs-light: #ffffff;
    --accent: var(--color-primary-accent);
    --chart-surface: var(--surface-bg);
    --chart-plot: var(--surface-alt);
    --surface-elevated: rgba(0,0,0,0.08);
    --overlay-bg: rgba(0,0,0,0.5);
    --neutral-75: rgba(0,0,0,0.06);
    --neutral-100: rgba(0,0,0,0.03);
    --table-head-color: var(--text-primary);
    /* Skeleton / shimmer token (centralized) */
    --skeleton-gradient: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.14), rgba(255,255,255,0.06));
}

/* Inspired background gradient utility (uses existing tokens from :root / [data-theme="dark"]) */
:root {
    /* bright/visible gradient for light mode (uses design tokens already defined) */
    --bg-inspired-gradient: linear-gradient(
        135deg,
        rgba(46,109,240,0.98) 0%,   /* --color-primary-accent */
        rgba(13,110,253,0.92) 34%,  /* --bs-primary / --bs-primary-ish */
        rgba(13,208,240,0.86) 62%,  /* --bs-info */
        rgba(253,126,20,0.92) 100%  /* --color-primary-alt (accent orange) */
    );

    /* softer, low-contrast variant for light surfaces */
    --bg-inspired-gradient-soft: linear-gradient(
        135deg,
        rgba(46,109,240,0.12) 0%,
        rgba(13,110,253,0.10) 40%,
        rgba(13,208,240,0.08) 70%,
        rgba(253,126,20,0.10) 100%
    );
}

[data-theme="dark"] {
    /* muted dark-mode variant that keeps hue but reduces intensity */
    --bg-inspired-gradient: linear-gradient(
        135deg,
        rgba(79,123,248,0.14) 0%,   /* muted blue */
        rgba(13,110,253,0.12) 36%,
        rgba(13,208,240,0.08) 68%,
        rgba(253,126,20,0.08) 100%
    );

    --bg-inspired-gradient-soft: linear-gradient(
        135deg,
        rgba(79,123,248,0.06) 0%,
        rgba(13,110,253,0.04) 40%,
        rgba(13,208,240,0.03) 70%,
        rgba(253,126,20,0.04) 100%
    );
}

/* Utility classes */
.bg-inspired {
    background: var(--bg-inspired-gradient);
    background-size: 400% 400%;
    animation: bgInspiredShift 16s ease infinite;
}

.bg-inspired-soft {
    background: var(--bg-inspired-gradient-soft);
}

/* Dark-theme tweak: lower opacity for overlays so content stays readable */
[data-theme="dark"] .bg-inspired {
    opacity: 0.22;
    background-blend-mode: overlay;
}

@keyframes bgInspiredShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

[data-theme="dark"] {
    --bs-body-bg: #262f42;
    --bs-dark: #0C243D; /* navbar / dark surface (navigation menu background changed to #0C243D) */
    --surface-bg: #262f42;
    --surface-alt: #111827;
    --surface-muted: rgba(255,255,255,0.02);
    --surface-border: rgba(255,255,255,0.06);
    --text-primary: #e6eef8;
    --text-secondary: #9aa7b8;
    --color-primary-accent: #4f7bf8;
    --color-primary-alt: #fd7e14;
    --brand-color: var(--color-primary-alt);
    /* Page-header specific tokens (dark theme) */
    --page-header-bg: rgba(79,123,248,0.06); /* subtle bluish overlay on dark surface */
    --page-header-border: rgba(255,255,255,0.06);
    --nav-text: #f8f9fa;
    --nav-link-color: #f8f9fa;
    --nav-link-active-color: var(--color-primary-alt);
    /* keep bootstrap fallbacks same or tweak if needed */
    --bs-primary: #0d6efd;
    --bs-success: #198754;
    --bs-danger: #dc3545;
    --bs-warning: #fd7e14;
    /* Table/input specific tokens for dark mode */
    --table-head-bg: #0f1720;
    --table-row-odd: rgba(255,255,255,0.02);
    --input-bg: #262f42;
    --input-border: rgba(255,255,255,0.06);
    --input-placeholder: rgba(255,255,255,0.6);

    /* Centralized dashboard card background for dark theme */
    --dashboard-card-bg: #0d1528;

    /* Compatibility aliases for dark */
    --bs-card-bg: var(--surface-alt);
    --bs-border-color: var(--surface-border);
    --bs-secondary-color: var(--text-secondary);
    --bs-emphasis-color: var(--text-primary);
    --bs-body-color: var(--text-primary);
    --bs-light: #ffffff;
    --accent: var(--color-primary-accent);
    --chart-surface: var(--surface-alt);
    --chart-plot: rgba(255,255,255,0.02);
    --surface-elevated: #232d37;
    --overlay-bg: rgba(0,0,0,0.65);
    --neutral-75: rgba(255,255,255,0.03);
    --neutral-100: rgba(255,255,255,0.02);
    --skeleton-gradient: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}

/* Make native date picker calendar icon visible (white) in dark mode */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
    -webkit-filter: invert(1) brightness(1.2) saturate(0);
    filter: invert(1) brightness(1.2) saturate(0);
    opacity: 1; /* ensure indicator is fully visible */
}

/* Firefox (Gecko) support */
[data-theme="dark"] input[type="date"]::-moz-calendar-picker-indicator {
    filter: invert(1) brightness(1.2) saturate(0);
    opacity: 1;
}

/* Ensure the indicator doesn't get hidden by background/image settings */
[data-theme="dark"] input[type="date"] {
    background-clip: padding-box;
}

/* Base page styles */
html, body {
    background: var(--bs-body-bg);
    color: var(--text-primary);
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Navbar / component helpers — revert to original look */
.custom-navbar {
    background: var(--bs-dark);
    color: var(--nav-text);
}

.navbar-brand {
    color: var(--brand-color);
}

.nav-link {
    color: var(--nav-link-color);
}

    .nav-link.active,
    .parent-split-inner.active-parent .parent-link {
        color: var(--nav-link-active-color);
    }

.mega-menu {
    background: var(--bs-body-bg);
}

.dropdown-item {
    color: var(--dropdown-item-color);
}

    .dropdown-item.active {
        background: var(--color-primary-alt);
        color: var(--dropdown-item-active-text);
    }

    /* Login page enhancements (scoped; apply .login-page only on login view) */
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}

    .login-page::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background: linear-gradient(-45deg, var(--neutral-75), var(--neutral-100), var(--color-primary-accent), var(--neutral-75));
        background-size: 400% 400%;
        animation: bgGradientShift 18s ease infinite;
    }

@keyframes bgGradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

[data-theme="dark"] .login-page::before {
    background: linear-gradient(-45deg, var(--surface-bg), var(--surface-alt), var(--color-primary-accent), var(--surface-bg));
    opacity: 0.25;
    background-size: 400% 400%;
}

/* Scoped login card */
.login-page .login-card {
    background: var(--surface-alt);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    width: 360px;
    max-width: 90%;
    padding: var(--space-6);
    position: relative;
    z-index: 1;
    text-align: center;
    backdrop-filter: blur(8px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* small-screen fallback */
@media (max-width: 480px) {
    .login-page .login-card {
        padding: var(--space-4);
    }
}

/* === UI common block (tables, buttons, modals, nav tweaks) === */

/* Table improvements */
.table thead th {
    background: var(--surface-muted);
    color: var(--table-head-color);
    font-weight: 600;
    border-bottom: 2px solid var(--surface-border);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--surface-alt);
}

.table td, .table th {
    vertical-align: middle;
}

/* Make all table headers use the page-header surface & border (light/dark via variables) */
table th,
.table thead th,
.table th {
    background-color: var(--page-header-bg) !important;
    border-color: var(--page-header-border) !important;
    color: var(--text-primary) !important;
    text-align: center !important;
    vertical-align: middle;
}

/* Button improvements */
.btn-primary {
    background: linear-gradient(90deg, var(--color-primary-accent) 0%, var(--bs-primary) 100%);
    border: none;
}

    .btn-primary:hover, .btn-primary:focus {
        background: linear-gradient(90deg, var(--bs-primary) 0%, var(--color-primary-accent) 100%);
        box-shadow: 0 2px 8px rgba(79,140,255,0.15);
    }

.btn-warning {
    color: #fff;
    background: var(--bs-warning);
    border: none;
}

    .btn-warning:hover, .btn-warning:focus {
        background: var(--bs-warning);
    }

    /* Logout button style */
.nav-item form button {
    transition: color 0.2s ease;
}

    .nav-item form button:hover {
        color: #fff;
        background-color: var(--color-primary-alt);
        border-radius: 0.25rem;
    }

.header-widget {
    color: #f8f9fa;
    background: transparent;
    border: none;
}

.header-widget {
    color: #f8f9fa;
    background: transparent;
    border: none;
}

.header-widget {
    color: #f8f9fa;
    background: transparent;
    border: none;
}

.header-widget {
    color: #f8f9fa;
    background: transparent;
    border: none;
}

/* Header and filter card use surface and text tokens */
.themed-header {
    /* stronger, consistent surface + border (overrides .bg-light) */
    background-color: var(--surface-bg) !important;
    color: var(--text-primary);
    border: 1px solid var(--surface-border) !important;
    /* ensure internal spacing is consistent regardless of Bootstrap utilities */
    padding: 1rem 1.25rem !important;
    gap: 0.5rem;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* On medium+ screens use horizontal layout (matches PageHeader.razor intention) */
@media (min-width: 768px) {
    .themed-header {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Icon area */
.page-header-icon {
    color: var(--brand-color);
    font-size: 1.375rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    /* Circle icon variant (UseIconCircle = true) */
    .page-header-icon.rounded-circle,
    .circle-48 {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--surface-alt);
        color: var(--brand-color);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--surface-border);
        box-shadow: var(--shadow-sm);
        font-size: 1.1rem;
    }

/* Title + help text */
.page-header-title {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
    line-height: 1.1;
}

/* Make help/muted text visible but subtle */
.themed-header .text-muted {
    color: var(--text-secondary);
    margin: 0;
}

/* Dark mode adjustments for header elements */
[data-theme="dark"] .themed-header {
    background-color: var(--surface-bg) !important;
    border-color: var(--surface-border) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .page-header-icon,
[data-theme="dark"] .page-header-icon.rounded-circle,
[data-theme="dark"] .circle-48 {
    color: var(--color-primary-accent);
    background: var(--surface-alt);
    border-color: var(--surface-border);
}

[data-theme="dark"] .themed-header .text-muted {
    color: rgba(255,255,255,0.65);
}

/* Modal themed surfaces */
.themed-modal {
    background-color: var(--surface-bg);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
}

.custom-modal-header {
    background-color: var(--surface-muted);
    border-bottom-color: var(--surface-bg);
}

.custom-modal-title {
    color: var(--text-primary);
}

/* Overlay and dialog (supports stacking/plural overlays) */
.custom-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: 1040;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: modalOverlayFadeIn 0.25s ease;
    transition: background 0.2s;
    pointer-events: all;
}

    /* Stacked overlays: increase z-index and darkness/blur for each level */
    .custom-modal-overlay[data-overlay-level="2"] {
        z-index: 1050;
        background: rgba(0,0,0,0.65);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    .custom-modal-overlay[data-overlay-level="3"] {
        z-index: 1060;
        background: rgba(0,0,0,0.75);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    /* Base navbar style tweaks */
.navbar {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.95rem;
}

/* Navbar brand highlight */
.navbar-brand {
    font-size: 1.25rem;
    letter-spacing: 0.5px;
}

/* Improve dropdown styling */
.dropdown-menu {
    border-radius: 0.5rem;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
}

/* Dropdown item improvements */
.dropdown-item {
    padding: 0.5rem 1.25rem;
    transition: background 0.2s ease, color 0.2s ease;
}

    .dropdown-item:hover {
        background-color: var(--color-primary-alt);
        color: #fff;
    }

    /* Highlight nav-link on hover */
.nav-link {
    transition: color 0.2s ease;
}

    .nav-link:hover {
        color: var(--color-primary-alt);
    }

    /* Highlight current page (if applicable via class or JS) */
    .nav-link.active,
    .dropdown-item.active {
        color: var(--color-primary-alt);
        font-weight: 600;
    }

    /* Theme toggle button styling */
.nav-item button.btn-link {
    color: #ccc;
    transition: color 0.2s ease;
    text-decoration: none;
}

    .nav-item button.btn-link:hover {
        color: var(--color-primary-alt);
    }

    /* Logout button style */
.nav-item form button {
    transition: color 0.2s ease;
}

    .nav-item form button:hover {
        color: #fff;
        background-color: var(--color-primary-alt);
        border-radius: 0.25rem;
    }

    /* Responsive spacing */
.navbar-nav .nav-item {
    margin-left: 0.5rem;
}

/* Mobile tweaks */
@media (max-width: 768px) {
    .navbar-nav .nav-item {
        margin-left: 0;
    }
}

@keyframes modalOverlayFadeIn {
    from {
        opacity: 0;
        background: rgba(0,0,0,0.01);
    }

    to {
        opacity: 1;
        background: var(--overlay-bg);
    }
}

/* Optional utilities */
.circle-48 {
    width: 48px;
    height: 48px;
}

/* Sticky helpers */
.sticky-header {
    position: sticky;
    top: 56px;
    z-index: 1040;
    background: var(--bs-body-bg);
}

.sticky-filter {
    position: sticky;
    top: 120px;
    z-index: 1039;
    background: var(--bs-body-bg);
}

.dropdown-menu,
.dropdown-menu.show {
    z-index: 2000 !important;
}

/* === Dark-mode specific component overrides to ensure visibility === */

/* Tables: make data and headers visible in dark mode */
[data-theme="dark"] .table,
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    color: var(--text-primary);
    border-color: var(--surface-border);
}

    [data-theme="dark"] .table thead th {
        background: var(--table-head-bg);
        color: var(--text-primary);
        border-bottom-color: rgba(255,255,255,0.08);
    }

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--table-row-odd);
}

/* Page headers and small text elements */
[data-theme="dark"] .themed-header,
[data-theme="dark"] .page-title,
[data-theme="dark"] .fancy-title,
[data-theme="dark"] .page-header,
[data-theme="dark"] .custom-modal-title {
    color: var(--text-primary);
}

/* Inputs / selects (search fields) - use surface tokens so they contrast */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea {
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--input-border);
    box-shadow: none;
}

    /* Placeholder color */
    [data-theme="dark"] .form-control::placeholder,
    [data-theme="dark"] input::placeholder,
    [data-theme="dark"] textarea::placeholder {
        color: var(--input-placeholder);
    }

    /* Input focus ring */
    [data-theme="dark"] .form-control:focus,
    [data-theme="dark"] .form-select:focus,
    [data-theme="dark"] input:focus,
    [data-theme="dark"] textarea:focus {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(79,140,255,0.15);
        border-color: rgba(79,140,255,0.6);
    }

    /* Make muted text readable but still subdued */
[data-theme="dark"] .text-muted {
    color: rgba(255,255,255,0.65) !important;
}

/* Buttons: ensure contrast on warning / primary if needed */
[data-theme="dark"] .btn-warning {
    background: linear-gradient(90deg, #ffb300 0%, #ff9800 100%);
    color: #111;
}

/* Ensure dropdowns display above dark overlays */
[data-theme="dark"] .dropdown-menu {
    background: var(--surface-bg);
    color: var(--text-primary);
    border: 1px solid var(--surface-border);
}

/* Component-specific page header (distinct visual style from generic/themed headers)
   - Uses dedicated variables so light/dark background can be tuned independently
*/
.component-page-header {
    background-color: var(--page-header-bg) !important;
    color: var(--text-primary);
    border: 1px solid var(--page-header-border) !important;
    padding: 1rem 1.25rem !important;
    gap: 0.75rem;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* horizontal layout on md+ screens (matches component markup) */
@media (min-width: 768px) {
    .component-page-header {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Component icon: use a filled brand circle to distinguish from other header icons */
.component-page-header .page-header-icon.rounded-circle,
.component-page-header .circle-48 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brand-color);
    color: var(--bs-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: none;
    font-size: 1.1rem;
}

/* Non-circle icon sizing inside the component */
.component-page-header .page-header-icon {
    color: var(--brand-color);
    font-size: 1.375rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Slightly larger title for the component header so it reads as the primary header */
.component-page-header .page-header-title {
    margin: 0;
    font-size: 1.375rem;
    color: var(--text-primary);
    line-height: 1.1;
}

/* Muted/help text */
.component-page-header .text-muted {
    color: var(--text-secondary);
    margin: 0;
}

/* Dark-mode adjustments for component header use the page-header variables */
[data-theme="dark"] .component-page-header {
    background: var(--page-header-bg);
    border-color: var(--page-header-border);
    color: var(--text-primary);
}

    [data-theme="dark"] .component-page-header .page-header-icon.rounded-circle,
    [data-theme="dark"] .component-page-header .circle-48 {
        background: var(--color-primary-accent);
        color: var(--bs-light);
        border-color: var(--surface-border);
    }

[data-theme="dark"] .themed-header.component-page-header {
    background-color: var(--page-header-bg) !important;
}

/* Dark-mode: ensure card titles are white for contrast */
[data-theme="dark"] .card .card-title,
[data-theme="dark"] .themed-card .card-title {
    color: var(--text-primary);
}

/* Page-specific filters surface (matches page header surface in light/dark) */
.page-filters {
    background-color: var(--page-header-bg) !important;
    color: var(--text-primary);
    border: 1px solid var(--page-header-border) !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    width: 100%;
    box-sizing: border-box;
}

    /* Single-line centered controls with action buttons pinned to the right */
    .page-filters .card-body {
        background: transparent;
        padding: 1rem 1.25rem;
        /* core layout: one row, full width */
        display: flex;
        align-items: center;
        width: 100%;
        gap: 0.75rem;
        flex-wrap: nowrap;
    }

        /* Non-action controls take remaining space and center their content.
   Action buttons (.btn / .btn-group) keep intrinsic size and end up to the right. */
        .page-filters .card-body > :not(.btn):not(.btn-group) {
            flex: 1 1 0;
            min-width: 0; /* let items shrink correctly */
            text-align: center;
        }

        /* Push the first button (and any following sibling buttons) to the far right */
        .page-filters .card-body .btn:first-of-type {
            margin-left: auto;
        }

        /* Ensure all filter controls stay on one line and action buttons are pinned to the far right.
   Place after the existing .page-filters rules. */
        .page-filters .card-body .row {
            display: flex !important; /* ensure bootstrap .row behaves as a single flex row here */
            flex-wrap: nowrap !important; /* prevent wrapping on md+ screens */
            align-items: center;
            gap: 0.75rem;
        }

            /* Make each column sized to its content (avoid Bootstrap's column width behavior) */
            .page-filters .card-body .row > [class*="col-"] {
                flex: 0 0 auto;
                width: auto;
                min-width: 0; /* allow inputs to shrink if necessary */
            }

            /* Pin the actions/buttons column to the right */
            .page-filters .card-body .row > .col-md-4,
            .page-filters .card-body .row > .actions,
            .page-filters .card-body .row > .btn-actions {
                margin-left: auto;
                display: flex;
                justify-content: flex-end;
                gap: 0.5rem;
            }

        /* Keep button groups / buttons intrinsic-sized */
        .page-filters .card-body .btn,
        .page-filters .card-body .btn-group {
            flex: 0 0 auto;
        }

    /* Mobile: allow wrapping and stack controls so the UI remains usable */
    @media (max-width: 767.98px) {
        .page-filters .card-body .row {
            flex-wrap: wrap !important;
        }

            .page-filters .card-body .row > [class*="col-"] {
                flex: 1 1 100%;
                width: 100%;
            }

            .page-filters .card-body .row > .col-md-4,
            .page-filters .card-body .row > .actions,
            .page-filters .card-body .row > .btn-actions {
                margin-left: 0;
                justify-content: flex-start;
            }
    }

    /* Ensure filters panel does not force full-column height */
    .filters-panel .card-body {
        padding: 0.75rem;
        display: block;
    }

/* Cell widget for flagged values (reusable) */
.cell-widget {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.18rem 0.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* Warning variant used for "Mapp" values */
.cell-widget-warning {
    background: var(--bs-warning, #ffc107);
    color: #111;
    border: 1px solid rgba(0,0,0,0.06);
}

/* Icon inside widget */
.cell-widget .bi {
    font-size: 0.9rem;
}

/* Dark-mode adjustments: keep widget readable */
[data-theme="dark"] .cell-widget-warning {
    background: #ffd96a; /* slightly lighter for dark bg */
    color: #111;
    border-color: rgba(0,0,0,0.06);
}

/* === APPFOOTER LIGHT-MODE OVERRIDES (append at end of file) ===
   Ensure LastRefresh/LastSync are black when the site is in light mode.
   Targets data-theme and data-bs-theme toggles and the prefers-color-scheme.
*/
:root[data-theme="light"] .app-footer .footer-widget,
html[data-theme="light"] .app-footer .footer-widget,
body[data-theme="light"] .app-footer .footer-widget,
:root[data-bs-theme="light"] .app-footer .footer-widget,
html[data-bs-theme="light"] .app-footer .footer-widget,
body[data-bs-theme="light"] .app-footer .footer-widget {
    color: #000 !important;
    border-color: rgba(0,0,0,.08) !important;
    background: rgba(255,255,255,0.02) !important;
}

    /* make the icon and timestamp class inherit the widget color */
    :root[data-theme="light"] .app-footer .footer-widget i,
    html[data-theme="light"] .app-footer .footer-widget i,
    body[data-theme="light"] .app-footer .footer-widget i,
    :root[data-bs-theme="light"] .app-footer .footer-widget i {
        color: inherit !important;
    }

    :root[data-theme="light"] .app-footer .footer-widget .footer-ts,
    html[data-theme="light"] .app-footer .footer-widget .footer-ts,
    body[data-theme="light"] .app-footer .footer-widget .footer-ts,
    :root[data-bs-theme="light"] .app-footer .footer-widget .footer-ts {
        color: inherit !important;
    }

    /* ensure all children inherit (covers spans, small, etc.) */
    :root[data-theme="light"] .app-footer .footer-widget * {
        color: inherit !important;
        border-color: inherit !important;
    }
}