/* ============================================
   KENDOX DEVOPS PORTAL — DESIGN SYSTEM
   Industrial-Utilitarian / Calm Dashboard
   ============================================ */

/* --- 1. CSS Custom Properties --- */
:root {
    --surface-primary: #0a0b0f;
    --surface-secondary: #12131a;
    --surface-elevated: #1a1b25;
    --surface-hover: #22232f;
    --border-subtle: #1e2030;
    --border-input: #2a2c3e;
    --text-primary: #e2e4f0;
    --text-secondary: #8b8ea3;
    --text-muted: #5a5d74;
    --accent-blue: #5b8af5;
    --accent-blue-muted: rgba(91, 138, 245, 0.15);
    --accent-cyan: #22d3ee;
    --accent-green: #4ade80;
    --accent-green-muted: rgba(74, 222, 128, 0.15);
    --accent-amber: #fbbf24;
    --accent-amber-muted: rgba(251, 191, 36, 0.15);
    --accent-purple: #a78bfa;
    --accent-purple-muted: rgba(167, 139, 250, 0.15);
    --danger: #f87171;
    --danger-muted: rgba(248, 113, 113, 0.15);
    --hover-row: rgba(255, 255, 255, 0.03);
    --transition-fast: 120ms ease;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

[data-bs-theme="dark"] {
    /* Bootstrap core */
    --bs-body-bg: var(--surface-primary);
    --bs-body-color: var(--text-primary);
    --bs-border-color: var(--border-subtle);
    --bs-tertiary-bg: var(--surface-elevated);
    --bs-secondary-bg: var(--surface-secondary);
    --bs-emphasis-color: var(--text-primary);
    --bs-secondary-color: var(--text-secondary);
    --bs-tertiary-color: var(--text-muted);
    --bs-link-color: var(--accent-blue);
    --bs-link-hover-color: var(--accent-cyan);
    --bs-code-color: var(--accent-cyan);
    --bs-primary-rgb: 91, 138, 245;

    /* Bootstrap table — keep transparent so our row-level styles work */
    --bs-table-bg: transparent;

    /* Bootstrap modal */
    --bs-modal-bg: var(--surface-secondary);
    --bs-modal-border-color: var(--border-subtle);
    --bs-modal-header-border-color: var(--border-subtle);
    --bs-modal-footer-border-color: var(--border-subtle);
    --bs-modal-color: var(--text-primary);

    /* Bootstrap card */
    --bs-card-bg: var(--surface-secondary);
    --bs-card-border-color: var(--border-subtle);
    --bs-card-cap-bg: var(--surface-elevated);
    --bs-card-color: var(--text-primary);

    /* Bootstrap input */
    --bs-form-control-bg: var(--surface-elevated);
    --bs-border-color-translucent: var(--border-input);

    /* Bootstrap offcanvas */
    --bs-offcanvas-bg: var(--surface-secondary);
    --bs-offcanvas-border-color: var(--border-subtle);
    --bs-offcanvas-color: var(--text-primary);

    /* Bootstrap toast */
    --bs-toast-bg: var(--surface-elevated);
    --bs-toast-border-color: var(--border-subtle);
    --bs-toast-header-bg: var(--surface-secondary);
    --bs-toast-header-border-color: var(--border-subtle);
    --bs-toast-color: var(--text-primary);

    /* Bootstrap list-group */
    --bs-list-group-bg: var(--surface-secondary);
    --bs-list-group-border-color: var(--border-subtle);
    --bs-list-group-color: var(--text-primary);
    --bs-list-group-action-hover-bg: var(--surface-hover);
    --bs-list-group-active-bg: var(--accent-blue);
    --bs-list-group-active-border-color: var(--accent-blue);

    /* Bootstrap popover */
    --bs-popover-bg: var(--surface-elevated);
    --bs-popover-border-color: var(--border-input);
    --bs-popover-header-bg: var(--surface-secondary);
    --bs-popover-body-color: var(--text-primary);

    /* Havit sidebar */
    --hx-sidebar-background-color: var(--surface-secondary);
    --hx-sidebar-item-color: var(--text-secondary);
    --hx-sidebar-item-icon-color: var(--text-muted);
    --hx-sidebar-item-hover-color: var(--text-primary);
    --hx-sidebar-item-hover-background-color: 255, 255, 255;
    --hx-sidebar-item-hover-background-opacity: 0.04;
    --hx-sidebar-item-hover-icon-color: var(--text-primary);
    --hx-sidebar-item-active-color: var(--accent-blue);
    --hx-sidebar-item-active-background-color: 91, 138, 245;
    --hx-sidebar-item-active-background-opacity: 0.15;
    --hx-sidebar-item-active-icon-color: var(--accent-blue);
    --hx-sidebar-item-active-font-weight: 500;
    --hx-sidebar-brand-name-color: var(--text-primary);
    --hx-sidebar-toggler-background: var(--text-muted);

    /* Havit grid */
    --hx-grid-button-hover-background: var(--surface-hover);
    --hx-grid-sorted-icon-color: var(--accent-blue);
    --hx-grid-progress-indicator-color: var(--accent-blue);

    /* Havit multi-select / tags */
    --hx-multi-select-background-color: var(--surface-elevated);
    --hx-autosuggest-item-highlighted-background-color: var(--surface-hover);
    --hx-input-tags-dropdown-item-highlighted-background-color: var(--surface-hover);
    --hx-input-tags-control-focused-border-color: var(--accent-blue);
    --hx-input-tags-control-focused-box-shadow: 0 0 0 2px var(--accent-blue-muted);

    /* Havit context menu / dropdown */
    --hx-context-menu-button-hover-background: var(--surface-hover);

    /* Havit progress indicator */
    --hx-progress-indicator-background: var(--surface-secondary);
    --hx-progress-indicator-border-color: var(--border-subtle);
    --hx-progress-indicator-spinner-color: var(--accent-blue);

    /* Havit progress overlay */
    --hx-progress-overlay-color: var(--text-primary);

    /* Havit search box */
    --hx-search-box-item-highlighted-background-color: var(--surface-hover);
}


/* --- 2. Original Styles (preserved) --- */

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}


/* --- 3. Global Base --- */

body {
    background-color: var(--surface-primary);
    color: var(--text-primary);
}

.doc-content.main {
    background-color: var(--surface-primary);
}


/* ============================================
   4. TABLE: DENSITY & RHYTHM
   ============================================ */

/* Column headers — recede, don't compete with data */
.table > thead > tr > th {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-input);
    background-color: var(--surface-secondary) !important;
    white-space: nowrap;
}

/* Table cells — compact, scannable */
.table > tbody > tr > td {
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: background-color var(--transition-fast);
}

/* Row hover highlight */
.table > tbody > tr:hover > td {
    background-color: var(--surface-hover);
}

/* Remove default Bootstrap table border */
.table {
    --bs-table-border-color: transparent;
    border-color: transparent;
    margin-bottom: 0;
}

/* No alternating row colors — clean uniform look */

/* Add button in table header — ghost style */
.table > thead .btn.btn-primary {
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid var(--border-input) !important;
    color: var(--accent-blue) !important;
    box-shadow: none !important;
    opacity: 0.7;
    transition: all var(--transition-fast);
}

.table > thead .btn.btn-primary:hover {
    background-color: var(--accent-blue-muted) !important;
    border-color: var(--accent-blue) !important;
    opacity: 1;
}


/* ============================================
   5. CLICK-TO-EDIT INLINE FIELDS
   Inputs look like plain text by default.
   On focus, they reveal as editable inputs.
   ============================================ */

/* Remove Havit/Bootstrap wrapper margin inside table cells */
.table td .mb-3,
.table td .mb-2,
.table td .mb-1 {
    margin-bottom: 0 !important;
}

/* Hide form labels inside table cells */
.table td .form-label {
    display: none;
}

/* --- Text inputs & textareas: transparent by default --- */
.table td .form-control,
.table td .form-select {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--text-primary);
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast);
    min-height: unset;
    height: auto;
    line-height: 1.5;
}

/* Textarea specific */
.table td textarea.form-control {
    resize: none;
    overflow: hidden;
    min-height: 1.75rem;
}

/* Select: hide dropdown arrow by default */
.table td .form-select {
    background-image: none;
    padding-right: 0.5rem;
    cursor: pointer;
}

/* --- Hover hint: subtle border appears --- */
.table td .form-control:hover,
.table td .form-select:hover {
    border-color: var(--border-input);
}

/* Select: show chevron on hover */
.table td .form-select:hover {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff80' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    padding-right: 2rem;
    background-position: right 0.5rem center;
    background-size: 12px 8px;
    background-repeat: no-repeat;
}

/* --- Focus / Edit mode: reveal as input --- */
.table td .form-control:focus,
.table td .form-select:focus,
.table td:focus-within .form-control,
.table td:focus-within .form-select {
    background-color: var(--surface-elevated);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px var(--accent-blue-muted);
    outline: none;
}

/* Select: always show chevron in focus/edit mode */
.table td .form-select:focus,
.table td:focus-within .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff80' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    padding-right: 2rem;
    background-position: right 0.5rem center;
    background-size: 12px 8px;
    background-repeat: no-repeat;
}

/* Disabled inputs — stay muted */
.table td .form-control:disabled,
.table td .form-select:disabled,
.table td .form-control[readonly],
.table td .form-select[readonly] {
    background-color: transparent;
    border-color: transparent;
    opacity: 0.65;
    cursor: default;
}

/* --- Tags/chips input in table cells --- */
.table td .hx-multi-select-input-tags {
    background-color: transparent;
    border-color: transparent;
    min-height: unset;
    padding: 0.15rem 0.25rem;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast);
}

.table td .hx-multi-select-input-tags:hover {
    border-color: var(--border-input);
}

.table td .hx-multi-select-input-tags:focus-within {
    background-color: var(--surface-elevated);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px var(--accent-blue-muted);
}

/* Tags/chips badges — refined */
.table td .hx-multi-select-input-tags .badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    background-color: var(--accent-blue-muted) !important;
    color: var(--accent-blue) !important;
}

/* HxInputTags rendered container */
.table td .hx-input-tags {
    background-color: transparent;
    border-color: transparent;
    min-height: unset;
    padding: 0.15rem 0.25rem;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast);
    border-radius: var(--radius-sm);
}

.table td .hx-input-tags:hover {
    border-color: var(--border-input);
}

.table td .hx-input-tags:focus-within {
    background-color: var(--surface-elevated);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px var(--accent-blue-muted);
}


/* ============================================
   6. PROGRESSIVE ACTION BUTTON REVEAL
   ============================================ */

/* Target action buttons in the last column.
   Using the min-width:210px div as the action container. */
.table > tbody > tr > td:last-child {
    white-space: nowrap;
}

/* All action buttons hidden by default (except Save / .btn-primary) */
.table > tbody > tr > td:last-child .btn:not(.btn-primary) {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

/* Info icon (not a button, wrapped in tooltip) */
.table > tbody > tr > td:last-child .bi-info-circle {
    opacity: 0;
    transition: opacity var(--transition-fast);
}

/* On row hover: reveal ALL action buttons */
.table > tbody > tr:hover > td:last-child .btn:not(.btn-primary),
.table > tbody > tr:focus-within > td:last-child .btn:not(.btn-primary) {
    opacity: 1;
    pointer-events: auto;
}

.table > tbody > tr:hover > td:last-child .bi-info-circle,
.table > tbody > tr:focus-within > td:last-child .bi-info-circle {
    opacity: 1;
}

/* Save button (.btn-primary) always fully visible when rendered */
.table > tbody > tr > td:last-child .btn-primary {
    opacity: 1;
    pointer-events: auto;
}

/* Tighten action button spacing */
.table > tbody > tr > td:last-child .btn {
    margin-left: 0.15rem !important;
    margin-right: 0.15rem !important;
    padding: 0.2rem 0.35rem;
    font-size: 0.8rem;
}

.table > tbody > tr > td:last-child .bi-info-circle {
    margin-left: 0.15rem;
    margin-right: 0.15rem;
}

/* Action button base styling — ghost style */
.table > tbody > tr > td:last-child .btn-secondary {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}

.table > tbody > tr > td:last-child .btn-secondary:hover {
    background-color: var(--surface-hover);
    color: var(--text-primary);
}

/* Destructive action: Delete/Trash gets red hover */
.table > tbody > tr > td:last-child .btn .bi-trash::before,
.table > tbody > tr > td:last-child .btn .bi-trash3::before {
    transition: color var(--transition-fast);
}

.table > tbody > tr > td:last-child .btn:hover .bi-trash,
.table > tbody > tr > td:last-child .btn:hover .bi-trash3 {
    color: var(--danger);
}

/* Reduce action column min-width for tighter layout */
.table > tbody > tr > td:last-child > div[style*="min-width"] {
    min-width: 160px !important;
}

.table > thead > tr > th:last-child > div[style*="min-width"] {
    min-width: 160px !important;
}


/* ============================================
   7. TYPOGRAPHY & HIERARCHY
   ============================================ */

/* Cell values in display mode (text rendered by DefaultItemTextSelector) */
.table > tbody > tr > td > span {
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Deleted item strikethrough styling */
.table > tbody > tr > td del {
    color: var(--text-muted);
    opacity: 0.6;
}

/* List layout title — clean, not too loud */
.hx-list-layout h3,
.hx-list-layout .h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0;
}


/* ============================================
   8. SIDEBAR POLISH
   ============================================ */

/* Sidebar base */
.hx-sidebar {
    background-color: var(--surface-secondary) !important;
    border-right: 1px solid var(--border-subtle);
}

/* Sidebar brand area */
.hx-sidebar .hx-sidebar-brand {
    padding: 1rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
}

/* Sidebar nav items */
.hx-sidebar .hx-sidebar-item {
    border-radius: 0;
    margin: 1px 0;
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                border-left-color var(--transition-fast);
    border-left: 3px solid transparent;
}

.hx-sidebar .hx-sidebar-item:hover {
    background-color: var(--surface-hover);
    color: var(--text-primary);
}

/* Active sidebar item: left accent border + tinted background */
.hx-sidebar .hx-sidebar-item.active,
.hx-sidebar .hx-sidebar-item[aria-current="page"] {
    border-left: 3px solid var(--accent-blue);
    background-color: var(--accent-blue-muted);
    color: var(--accent-blue);
    font-weight: 500;
}

/* Sidebar icons — consistent sizing */
.hx-sidebar .hx-sidebar-item .bi {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    opacity: 0.7;
}

.hx-sidebar .hx-sidebar-item.active .bi,
.hx-sidebar .hx-sidebar-item[aria-current="page"] .bi {
    opacity: 1;
}

/* Sidebar divider — more spacing between groups */
.hx-sidebar hr {
    margin: 0.6rem 0;
    border-color: var(--border-subtle);
    opacity: 0.5;
}


/* ============================================
   9. TOP TABS & CONTROLS (SubNav)
   ============================================ */

/* Tab navigation underline variant */
.nav-underline {
    border-bottom: 1px solid var(--border-subtle);
    gap: 0;
}

.nav-underline .nav-link {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 400;
    padding: 0.6rem 1rem;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast),
                border-color var(--transition-fast);
    margin-bottom: -1px;
}

.nav-underline .nav-link:hover {
    color: var(--text-primary);
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

/* Active tab — bottom accent + bolder */
.nav-underline .nav-link.active {
    color: var(--accent-blue);
    font-weight: 600;
    border-bottom: 2px solid var(--accent-blue);
    background-color: transparent;
}

/* All header buttons — unified ghost style */
.hx-list-layout-header .btn,
.hx-list-layout .card-header .btn {
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid var(--border-input) !important;
    color: var(--text-secondary) !important;
    font-size: 0.8rem;
    padding: 0.3rem 0.65rem;
    opacity: 0.8;
    transition: all var(--transition-fast);
    box-shadow: none !important;
}

.hx-list-layout-header .btn:hover,
.hx-list-layout .card-header .btn:hover {
    background-color: var(--surface-hover) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
    opacity: 1;
}

/* Active state for toggle buttons (e.g. filter active) */
.hx-list-layout-header .btn.btn-primary,
.hx-list-layout .card-header .btn.btn-primary {
    color: var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
    background-color: var(--accent-blue-muted) !important;
}

/* Add/primary button in header — blue accent variant */
.hx-list-layout-header .btn.btn-primary:hover,
.hx-list-layout .card-header .btn.btn-primary:hover {
    background-color: var(--accent-blue-muted) !important;
    border-color: var(--accent-blue) !important;
    color: var(--accent-blue) !important;
}


/* ============================================
   10. PAGINATION
   ============================================ */

.pagination {
    gap: 0.15rem;
    font-size: 0.8rem;
}

.page-link {
    background-color: transparent;
    border-color: var(--border-subtle);
    color: var(--text-secondary);
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm) !important;
    transition: all var(--transition-fast);
    font-size: 0.8rem;
}

.page-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border-color: var(--border-input);
}

.page-item.active .page-link {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}

.page-item.disabled .page-link {
    background-color: transparent;
    border-color: var(--border-subtle);
    color: var(--text-muted);
    opacity: 0.5;
}


/* ============================================
   11. FILTER BAR
   ============================================ */

.d-flex.flex-wrap.gap-2.align-items-end.mb-2.p-2.border.rounded {
    background-color: var(--surface-secondary);
    border-color: var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.75rem !important;
}

/* Filter inputs */
.d-flex.flex-wrap .form-control-sm {
    background-color: var(--surface-elevated);
    border-color: var(--border-input);
    color: var(--text-primary);
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
}

.d-flex.flex-wrap .form-control-sm:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px var(--accent-blue-muted);
}

.d-flex.flex-wrap .form-label {
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}


/* ============================================
   12. SWITCHES & CHECKBOXES
   ============================================ */

.form-check-input {
    border-color: var(--border-input);
    background-color: transparent;
}

.form-check-input:checked {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.form-check-input:focus {
    box-shadow: 0 0 0 2px var(--accent-blue-muted);
    border-color: var(--accent-blue);
}

.form-switch .form-check-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}


/* ============================================
   13. BUTTONS — GLOBAL REFINEMENT
   ============================================ */

.btn-primary {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.btn-primary:hover {
    background-color: #4a7ae0;
    border-color: #4a7ae0;
}

.btn-secondary {
    background-color: var(--surface-elevated);
    border-color: var(--border-input);
    color: var(--text-secondary);
}

.btn-secondary:hover {
    background-color: var(--surface-hover);
    border-color: var(--border-input);
    color: var(--text-primary);
}

.btn-outline-secondary {
    border-color: var(--border-input);
    color: var(--text-secondary);
}

.btn-outline-secondary:hover {
    background-color: var(--surface-elevated);
    border-color: var(--border-input);
    color: var(--text-primary);
}


/* ============================================
   14. CARDS & ELEVATED SURFACES
   ============================================ */

.card {
    background-color: var(--surface-secondary);
    border-color: var(--border-subtle);
    border-radius: var(--radius-md);
}

.card-header {
    background-color: var(--surface-elevated);
    border-bottom-color: var(--border-subtle);
}


/* ============================================
   15. MODALS & DIALOGS
   ============================================ */

.modal-content {
    background-color: var(--surface-secondary) !important;
    border: 1px solid var(--border-input) !important;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    color: var(--text-primary);
}

.modal-header {
    background-color: var(--surface-elevated);
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.75rem 1rem;
}

.modal-header .modal-title,
.modal-header .h5,
.modal-header h5 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.5;
}

.modal-header .btn-close:hover {
    opacity: 0.8;
}

.modal-body {
    background-color: var(--surface-secondary);
    color: var(--text-primary);
    padding: 1rem;
}

.modal-footer {
    background-color: var(--surface-elevated);
    border-top: 1px solid var(--border-subtle);
    padding: 0.6rem 1rem;
}

/* Form controls inside modals */
.modal .form-control,
.modal .form-select {
    background-color: var(--surface-elevated);
    border-color: var(--border-input);
    color: var(--text-primary);
}

.modal .form-control:focus,
.modal .form-select:focus {
    background-color: var(--surface-hover);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px var(--accent-blue-muted);
    color: var(--text-primary);
}

.modal .form-label {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* Tables inside modals */
.modal .table {
    color: var(--text-primary);
}

/* Offcanvas (slide-out panels) */
.offcanvas {
    background-color: var(--surface-secondary) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary);
}

.offcanvas-header {
    background-color: var(--surface-elevated);
    border-bottom: 1px solid var(--border-subtle);
}

.offcanvas-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.5;
}


/* ============================================
   16. DROPDOWNS
   ============================================ */

.dropdown-menu {
    background-color: var(--surface-elevated);
    border-color: var(--border-input);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.dropdown-item {
    color: var(--text-primary);
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--surface-hover);
    color: var(--text-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--accent-blue-muted);
    color: var(--accent-blue);
}


/* ============================================
   17. TOOLTIPS
   ============================================ */

.tooltip-inner {
    background-color: var(--surface-elevated);
    border: 1px solid var(--border-input);
    color: var(--text-primary);
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
    max-width: 300px;
    text-align: left;
    padding: 0.5rem 0.75rem;
}

.tooltip .tooltip-arrow::before {
    border-top-color: var(--surface-elevated);
}


/* ============================================
   18. FORM CONTROLS OUTSIDE TABLES
   (settings pages, dialogs, etc.)
   ============================================ */

.form-control,
.form-select {
    background-color: var(--surface-elevated);
    border-color: var(--border-input);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                background-color var(--transition-fast);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--surface-hover);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px var(--accent-blue-muted);
    color: var(--text-primary);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--surface-secondary);
    border-color: var(--border-subtle);
    color: var(--text-muted);
    opacity: 0.7;
}

/* Form labels */
.form-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Input groups */
.input-group-text {
    background-color: var(--surface-elevated);
    border-color: var(--border-input);
    color: var(--text-secondary);
}


/* ============================================
   19. HX LIST LAYOUT REFINEMENT
   ============================================ */

.hx-list-layout {
    margin-bottom: 1rem;
}

/* Tighten the header bar */
.hx-list-layout > div:first-child {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
    background-color: var(--surface-secondary);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Grid container background */
.hx-list-layout .table-responsive,
.hx-list-layout > div:nth-child(2) {
    background-color: var(--surface-primary);
}

/* HxGrid header buttons (sort icons, etc.) */
.hx-grid-button {
    color: var(--text-muted);
}

.hx-grid-button:hover {
    background-color: var(--surface-hover);
    color: var(--text-primary);
}


/* ============================================
   20. SCROLLBAR STYLING (Webkit)
   ============================================ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-input);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}


/* ============================================
   21. TABLE RESPONSIVE CONTAINER
   ============================================ */

.table-responsive {
    border-radius: var(--radius-md);
}

/* Keep overflow visible for dropdowns in table */
.overflow-visible {
    overflow: visible !important;
}


/* ============================================
   22. ACCORDION (used in settings, policies)
   ============================================ */

.accordion-item {
    background-color: var(--surface-secondary);
    border-color: var(--border-subtle);
}

.accordion-button {
    background-color: var(--surface-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.accordion-button:not(.collapsed) {
    background-color: var(--accent-blue-muted);
    color: var(--accent-blue);
}

.accordion-button:focus {
    box-shadow: 0 0 0 2px var(--accent-blue-muted);
}

.accordion-body {
    background-color: var(--surface-primary);
}


/* ============================================
   23. MODAL & DIALOG BACKDROP
   ============================================ */

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.6);
}

.modal-backdrop.show {
    opacity: 1;
}