body {
  font-family: "Roboto", "Inter", sans-serif;
}

/* =========
   MD-3 inspired styling (scoped)
   =========
   Apply this ONLY inside `.md3-page` to avoid global regressions.
*/
.md3-page .card {
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 2px 8px rgba(16, 24, 40, 0.06);
}

.md3-page .card-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: #ffffff;
}

.md3-page .form-control,
.md3-page textarea.form-control {
    border-radius: 12px;
    border-color: rgba(0, 0, 0, 0.12);
    background-color: #fbfbfc;
    color-scheme: light;
}

.md3-page .form-control:focus,
.md3-page textarea.form-control:focus {
    border-color: rgba(13, 110, 253, 0.55); /* Tabler/Bootstrap primary */
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.12);
    background-color: #ffffff;
}

.md3-page .btn {
    border-radius: 999px;
}

.md3-page .btn.btn-icon {
    border-radius: 999px;
}

.md3-page hr {
    opacity: 0.08;
}

/* =========
   Global layout consistency
   ========= */
/* Ensure consistent space between a Tabler page header and the following main container across the platform. */
.page-header + .container-xl {
    margin-top: 1rem;
}

/* =========
   AG Grid (Quartz) – pagination icon contrast
   =========
   Problem: pagination chevrons/icons can look too faint against the Tabler UI palette.
   Fix: increase icon/foreground contrast while keeping disabled state visually distinct.
*/
.ag-theme-quartz {
    --ag-foreground-color: #1f2937 !important;              /* dark slate */
    --ag-secondary-foreground-color: #374151 !important;    /* slate */
    --ag-icon-color: #111827 !important;                    /* near-black */
    --ag-disabled-foreground-color: rgba(17, 24, 39, 0.35) !important;
}

.ag-theme-quartz .ag-paging-panel {
    color: var(--ag-foreground-color);
    font-weight: 500;
}

.ag-theme-quartz .ag-paging-button .ag-icon {
    opacity: 1 !important;
    color: var(--ag-icon-color) !important;
    background-color: var(--ag-icon-color) !important; /* some AG Grid icons use mask + bg-color */
    filter: none !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
}

/* Ensure pagination icons are visible and properly sized */
.ag-theme-quartz .ag-paging-button {
    min-width: 2rem;
    min-height: 2rem;
}

.ag-theme-quartz .ag-paging-button .ag-icon {
    width: 1rem !important;
    height: 1rem !important;
    display: inline-block !important;
}

/* Fallback: ensure any AG Grid icon (not just paging) is visible */
.ag-theme-quartz .ag-icon {
    color: var(--ag-icon-color) !important;
    background-color: var(--ag-icon-color) !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
}

.ag-theme-quartz .ag-paging-button[disabled] .ag-icon,
.ag-theme-quartz .ag-paging-button.ag-disabled .ag-icon {
    opacity: 0.35;
    cursor: not-allowed;
}
/* Sticky navbar helper */
.navbar-sticky {
  position: sticky;
  top: 0;
  z-index: 1020;

}
/* Custom styles for Immidart StatusBridge */
/* Debug styles to test font loading */

.ti {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-align: center;
  font-size: 1.2em;
}

/* Override any missing tabler styles */

.avatar {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}
.status {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;

}

.status-green {
    background-color: #28a745;

}

.status-red {
    background-color: #dc3545;

}

.status-yellow {
    background-color: #ffc107;

}
/* Custom form styles */

.form-hint {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}
/* Card actions */

.card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;

}
/* Responsive adjustments */

@media (max-width: 768px) {
    .card-actions {
        flex-direction: column;
        align-items: stretch;

    }
}

/* Prevent navbar menu wrapping.
   IMPORTANT: allow dropdowns (mega menus) to overflow on desktop; only enable horizontal scroll on small screens. */
.navbar-nav {
    flex-wrap: nowrap !important;
    white-space: nowrap;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

@media (max-width: 992px) {
    .navbar-nav {
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
}
/* Header menu background and shadow */

.navbar-expand-md {
    background: #fff;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.07), 0 1.5px 0 #e3f2fd;
    border-bottom: 1.5px solid #e3f2fd;
}
.header-separator {
    width: 100%;
    height: 1.5px;
    background: #e3f2fd;
    margin: 0;
    border: none;
}

/* Uniform spacing for menu items, allow more to fit */

.navbar-nav .nav-item {
    min-width: 90px;
    margin-right: 0.5rem;
}

.navbar-nav .nav-item:last-child {
    margin-right: 0.5rem;
    padding-right: 1.5rem; /* Ensure last item is not clipped */
}

/* Remove default hr or border if present */
hr, .navbar hr {
    display: none;
}

/* Hide native horizontal scrollbar for navbar menu */
.navbar-nav {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
}

.navbar-nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Webkit */
}
/* Scroll buttons for navbar */

.menu-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: transparent;
    border: none;
    padding: 0.25rem 0.5rem;
    opacity: 0.3;
    transition: opacity 0.2s, background 0.2s;
    cursor: pointer;
    outline: none;
    box-shadow: none;
}

.menu-scroll-btn.left {
    left: 0.25rem;
}

.menu-scroll-btn.right {
    right: 0.25rem;
}

.menu-scroll-btn:hover, .menu-scroll-btn:focus {
    opacity: 0.8;
    background: rgba(0,0,0,0.05);

}

.menu-scroll-btn img {
    width: 1.5em;
    height: 1.5em;
    pointer-events: none;
}

/* Ensure nav icons are always visible */
.nav-link-icon {
    display: inline-block !important;
    margin-right: 0.5rem;
}

/* Notification icon styling */
.nav-link .ti-bell {
    font-size: 1.25rem;
    color: var(--tblr-body-color);
}

/* Notification dropdown styling - compact notification-style width */
.dropdown-menu-notifications {
    min-width: 24rem !important;
    max-width: 28rem !important;
    width: 26rem !important;
    max-height: 32rem !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    margin-top: 0.5rem !important;
    box-shadow: 0 0.5rem 1rem rgba(30, 34, 40, 0.08) !important;
    border: 1px solid var(--tblr-border-color, #e9ecef) !important;
    border-radius: var(--tblr-border-radius, 0.375rem) !important;
}

/* Ensure notification dropdown is not constrained by parent containers - HIGHEST SPECIFICITY */
.navbar .nav-item.dropdown .dropdown-menu-notifications,
.navbar .dropdown .dropdown-menu-notifications,
.navbar-nav .nav-item .dropdown-menu-notifications,
.navbar .dropdown-menu.dropdown-menu-notifications {
    min-width: 24rem !important;
    max-width: 28rem !important;
    width: 26rem !important;
    position: absolute !important;
    left: auto !important;
    right: -0.5rem !important;
    transform: none !important;
    margin-top: 0.5rem !important;
}

/* Ensure notification dropdown stays within viewport on large displays */
@media (min-width: 1200px) {
    .navbar .dropdown-menu-notifications {
        /* On large displays, prevent overflow while maintaining consistent width */
        max-width: min(28rem, calc(100vw - 2rem)) !important;
        width: 26rem !important;
    }
    
    /* Ensure proper right alignment on large screens */
    .navbar .dropdown-menu-notifications[data-bs-popper] {
        right: -0.5rem !important;
        left: auto !important;
    }
}

/* Override any inline styles that Bootstrap Popper might add */
.dropdown-menu-notifications[style*="width"],
.dropdown-menu-notifications[style*="min-width"],
.dropdown-menu-notifications[style*="max-width"] {
    min-width: 24rem !important;
    max-width: 28rem !important;
    width: 26rem !important;
}

.dropdown-menu-notifications .dropdown-menu-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--tblr-border-color, #e9ecef);
    position: sticky;
    top: 0;
    background: var(--tblr-bg-surface, #fff);
    z-index: 1;
    margin: 0;
    border-radius: var(--tblr-border-radius, 0.375rem) var(--tblr-border-radius, 0.375rem) 0 0;
}

.dropdown-menu-notifications .dropdown-header {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    padding: 0;
}

.dropdown-menu-notifications .list-group {
    max-height: calc(32rem - 60px);
    overflow-y: auto;
    overflow-x: hidden;
}

.dropdown-menu-notifications .list-group-item {
    padding: 1rem;
    border-left: 3px solid transparent;
    border-right: none;
    border-top: 1px solid var(--tblr-border-color, #f0f0f0);
    border-bottom: 1px solid var(--tblr-border-color, #f0f0f0);
    margin-bottom: 0;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    min-height: auto;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-left-color 0.15s ease-in-out;
    background-color: var(--tblr-bg-surface, #ffffff);
    text-decoration: none;
    display: block;
}

.dropdown-menu-notifications .list-group-item .row {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    display: flex;
    align-items: flex-start;
}


.dropdown-menu-notifications .list-group-item:first-child {
    border-top: 1px solid #e9ecef;
}

.dropdown-menu-notifications .list-group-item:last-child {
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 0;
}

.dropdown-menu-notifications .list-group-item-action:hover,
.dropdown-menu-notifications .list-group-item-action:focus {
    background-color: var(--tblr-bg-surface-secondary, #f8f9fa) !important;
    border-left-color: var(--tblr-primary, #206bc4) !important;
    border-top-color: #e0e0e0 !important;
    border-bottom-color: #e0e0e0 !important;
    z-index: 1;
}

.dropdown-menu-notifications .list-group-item-action:active {
    background-color: var(--tblr-bg-surface-tertiary, #e9ecef) !important;
}

.dropdown-menu-notifications .list-group-item .col {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Ensure notification content doesn't get constrained */
.dropdown-menu-notifications .row {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

.dropdown-menu-notifications .col-auto {
    flex: 0 0 auto;
    width: auto;
    padding-right: 0.75rem;
    padding-top: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.dropdown-menu-notifications .status-dot {
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.dropdown-menu-notifications .row.g-2 {
    margin-left: 0;
    margin-right: 0;
    align-items: flex-start;
}

.dropdown-menu-notifications .row {
    display: flex;
    align-items: flex-start;
}

.dropdown-menu-notifications .notification-message {
    max-width: 100% !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-menu-notifications .text-body {
    line-height: 1.4;
    word-break: break-word;
    font-size: 0.8125rem;
    color: var(--tblr-body-color, #212529);
}

.dropdown-menu-notifications .notification-date {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--tblr-body-color, #212529);
    margin-bottom: 0.375rem;
    display: block;
}

.dropdown-menu-notifications .notification-meta {
    font-size: 0.6875rem;
    color: #6c757d;
    margin-top: 0.375rem;
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.dropdown-menu-notifications .notification-meta span {
    white-space: nowrap;
}

.dropdown-menu-notifications .notification-separator {
    color: #adb5bd;
    margin: 0 0.25rem;
}

.dropdown-menu-notifications .notification-time,
.dropdown-menu-notifications .notification-type,
.dropdown-menu-notifications .notification-severity {
    display: inline-block;
}

/* Improve scrollbar appearance for notification dropdown */
.dropdown-menu-notifications .list-group-flush::-webkit-scrollbar {
    width: 8px;
}

.dropdown-menu-notifications .list-group-flush::-webkit-scrollbar-track {
    background: var(--tblr-bg-surface, #ffffff);
}

.dropdown-menu-notifications .list-group-flush::-webkit-scrollbar-thumb {
    background: var(--tblr-border-color, #d1d5db);
    border-radius: 4px;
}

.dropdown-menu-notifications .list-group-flush::-webkit-scrollbar-thumb:hover {
    background: var(--tblr-border-color-dark, #9ca3af);
}

/* Ensure notification dropdown can break out of viewport constraints */
@media (min-width: 992px) {
    .dropdown-menu-notifications {
        min-width: 24rem !important;
        max-width: 28rem !important;
        width: 26rem !important;
    }
}

/* On smaller viewports, use a slightly narrower width */
@media (max-width: 768px) {
    .dropdown-menu-notifications {
        min-width: 20rem !important;
        max-width: 24rem !important;
        width: 22rem !important;
    }
}

/* Ensure parent containers don't constrain the dropdown */
.navbar,
.navbar-nav,
.navbar-collapse,
.container-xl,
.nav-item.dropdown {
    overflow: visible !important;
}

/* Force dropdown positioning to allow proper width */
.nav-item.dropdown .dropdown-menu-notifications {
    position: absolute !important;
    inset: auto auto auto auto !important;
    transform: translate3d(0, 0, 0) !important;
    will-change: auto !important;
}

/* Ensure dropdown toggle shows active state */
.nav-link.dropdown-toggle[aria-expanded="true"] {
    color: var(--tblr-primary);
}

/* NOTE:
   Let Tabler/Bootstrap manage dropdown positioning + show/hide behavior.
   Overriding dropdown positioning/display here can prevent navbar submenus from rendering. */

/* Error page card styling */
.card.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.card.border-danger {
    border-color: var(--tblr-danger) !important;
}

.card.border-warning {
    border-color: var(--tblr-warning) !important;
}

/* Avatar styling for error pages */
.avatar-lg {
    width: 4rem !important;
    height: 4rem !important;
}

.avatar.bg-danger-lt {
    background-color: rgba(var(--tblr-danger-rgb), 0.1) !important;
}

.avatar.bg-warning-lt {
    background-color: rgba(var(--tblr-warning-rgb), 0.1) !important;
}

/* Ensure proper spacing for error page content */
.card-body.text-center {
    padding: 2rem !important;
}

/* List unstyled with icons */
.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.list-unstyled li {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

/* Card footer button spacing */
.card-footer .d-flex {
    gap: 0.5rem;
}

/* Enhanced navbar brand image */
.navbar-brand-image {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.navbar-brand-image--square {
    width: 32px;
    height: 32px;
}

/* ============================================
   Visual Query Builder (avoid inline styles)
   ============================================ */
.vqb-page-loader {
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
}

.vqb-spinner-lg {
    width: 3rem;
    height: 3rem;
}

.vqb-spinner-sm {
    width: 0.75rem;
    height: 0.75rem;
}

.vqb-select-loading {
    z-index: 10;
    pointer-events: none;
}

.vqb-tables-search {
    max-width: 200px;
}

.vqb-tables-list {
    max-height: 400px;
    overflow-y: auto;
}

.vqb-canvas {
    height: 500px;
    width: 100%;
    background: #f8f9fa;
}

.vqb-table-details {
    max-height: 500px;
    overflow-y: auto;
    padding: 0.5rem;
}

/* Ensure dropdowns are not clipped and are visible above navbar */
.navbar, .navbar-nav, .navbar-collapse, .container-xl { overflow: visible !important; }

/* Ensure dropdowns inside flex containers are visible */
.btn-list, .flex-nowrap, .btn-list.flex-nowrap {
    overflow: visible !important;
    position: relative !important;
}

/* MaterializedViews table action buttons - ensure single line horizontal layout */
.table .btn-list.flex-nowrap {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 0.25rem !important;
    display: flex !important;
    align-items: center !important;
}

.table .btn-list.flex-nowrap .btn {
    flex-shrink: 0 !important;
    min-width: auto !important;
}

/* Ensure action column in MaterializedViews table has adequate width */
.table.table-vcenter th:last-child,
.table.table-vcenter td:last-child {
    white-space: nowrap !important;
    width: auto !important;
    min-width: fit-content !important;
}
.dropdown {
    position: relative !important;
}
.dropdown-menu {
    /* Keep dropdowns above modal backdrops (bootstrap backdrop is 1050) */
    z-index: 1080 !important;
    min-width: 8rem;
    background: #fff !important;
    color: #212529 !important;
}

.navbar .dropdown-menu {
    min-width: 8rem !important;
    max-width: 16rem !important;
}

/* Notification dropdown must override navbar dropdown width restrictions - MULTIPLE SELECTORS FOR MAXIMUM SPECIFICITY */
.navbar .dropdown-menu-notifications,
.navbar .nav-item .dropdown-menu-notifications,
.navbar-nav .nav-item .dropdown-menu-notifications,
.navbar .dropdown-menu.dropdown-menu-end.dropdown-menu-notifications {
    min-width: 24rem !important;
    max-width: 28rem !important;
    width: 26rem !important;
    left: auto !important;
    right: -0.5rem !important;
}

/* Mega menu styling (let Tabler position it; we only control visibility via `.show`) */
.navbar .dropdown-menu.dropdown-menu-columns {
    min-width: auto !important;
    max-width: calc(100vw - 2rem) !important;
    margin-top: 0.25rem !important;
    position: absolute !important;
}

/* Dropdown visibility:
   Some themes/JS can leave inline style="display:none" on menus.
   Ensure `.show` always wins (including against inline styles) for reliable click-to-open. */
.dropdown-menu.show {
    display: block !important;
}

/* Mega menu (columns) */
.navbar .dropdown-menu.dropdown-menu-columns:not(.show) {
    display: none !important;
}

.navbar .dropdown-menu.dropdown-menu-columns.show {
    display: flex !important;
}

.navbar .dropdown-menu-columns {
    flex-wrap: nowrap; /* Prevent wrapping to ensure 3 columns */
    padding: 0.5rem 0;
    max-width: calc(100vw - 2rem);
    display: flex !important; /* Always use flex layout */
}

.navbar .dropdown-menu-column {
    min-width: 12rem;
    max-width: 16rem;
    padding: 0 0.5rem;
    flex: 1 1 33.333%; /* Force 3 columns - each column takes 1/3 of available space */
}

.navbar .dropdown-menu-column:first-child {
    padding-left: 0.5rem;
}

.navbar .dropdown-menu-column:last-child {
    padding-right: 0.5rem;
}

/* Mega menu group headers */
.navbar .dropdown-menu-column .dropdown-header {
    padding: 0.5rem 1rem;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tblr-text-muted, #6c757d);
    border-bottom: 1px solid var(--tblr-border-color, rgba(0, 0, 0, 0.1));
    margin-top: 0.5rem;
}

.navbar .dropdown-menu-column .dropdown-header:first-child {
    margin-top: 0;
}

.navbar .dropdown-menu-mega .dropdown-menu-column {
    min-width: 180px;
}

/* Responsive dropdown positioning */
@media (max-width: 991.98px) {
    .navbar .dropdown-menu.dropdown-menu-columns {
        max-width: calc(100vw - 1rem) !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        transform: none !important;
    }
    
    .navbar .dropdown-menu-columns {
        flex-direction: column;
        max-width: 100%;
    }
    
    .navbar .dropdown-menu-column {
        max-width: 100%;
        width: 100%;
    }
}

/* Ensure dropdowns don't overflow on smaller screens */
@media (max-width: 576px) {
    .navbar .dropdown-menu.dropdown-menu-columns {
        max-width: calc(100vw - 0.5rem) !important;
        left: 0.25rem !important;
        right: 0.25rem !important;
    }
}

/* NOTE:
   Do not override dropdown show/hide mechanics in custom CSS.
   Tabler/Bootstrap controls dropdown visibility via `.show` + inline styles/Popper. */

/* Remove blue border/shadow from dropdowns */
.dropdown-menu {
    box-shadow: 0 0.5rem 1rem rgba(30, 34, 40, 0.04) !important;
    border: 1px solid #e9ecef !important;
    outline: none !important;
}

/* NOTE: don't force-align all dropdowns to the right; Tabler positions them correctly per toggle */

.dropdown-menu:focus,
.dropdown-menu.show {
    outline: none !important;
    box-shadow: 0 0.5rem 1rem rgba(30, 34, 40, 0.04) !important;
    border-color: #e9ecef !important;
}

/* Status highlights (non-badge elements) - white text for colored backgrounds */
.status-badge,
.bg-red:not(.badge),
.bg-yellow:not(.badge),
.bg-green:not(.badge),
.bg-blue:not(.badge),
.bg-orange:not(.badge),
.bg-primary:not(.badge),
.bg-success:not(.badge),
.bg-danger:not(.badge),
.bg-warning:not(.badge),
.bg-info:not(.badge),
.bg-current:not(.badge) {
    color: #fff !important;
}

/* Note: Badge text colors are handled in the Enhanced Badge Contrast section below */

/* Global font-family for Tabler UI consistency */
html, body, * {
  font-family: 'Roboto', 'Inter', sans-serif !important;
}

/* ============================================
   TomSelect (Global) – Tabler-aligned styling
   Ensures enhanced dropdowns never render black/un-styled while loading.
   ============================================ */
.ts-wrapper {
    width: 100%;
}

/* TomSelect wraps the original <select class="form-select"> with a DIV and often copies `form-select` to the wrapper.
   Prevent Tabler's `.form-select` styles (padding + caret background-image) from applying to the wrapper,
   otherwise you get a "double caret / split control" look. */
.ts-wrapper.form-select {
    padding: 0 !important;
    background-image: none !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.ts-wrapper.form-select:focus {
    box-shadow: none !important;
}

.ts-control,
.ts-dropdown,
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-control input {
    font-family: 'Roboto', 'Inter', sans-serif !important;
}

.ts-control {
    /* Match Tabler `.form-select` */
    --tblr-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.4375rem 2.25rem 0.4375rem 0.75rem;
    font-family: var(--tblr-body-font-face, 'Roboto', 'Inter', sans-serif) !important;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4285714286;
    color: var(--tblr-body-color, #212529) !important;
    background-color: var(--tblr-bg-forms, #ffffff) !important;
    background-image: var(--tblr-form-select-bg-img), var(--tblr-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: var(--tblr-border-width, 1px) solid var(--tblr-border-color, #d1d5db) !important;
    border-radius: var(--tblr-border-radius, 0.375rem) !important;
    box-shadow: var(--tblr-shadow-input, none);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.ts-wrapper.focus .ts-control {
    border-color: #83b7e8 !important; /* Tabler `.form-select:focus` */
    box-shadow: var(--tblr-shadow-input, none), 0 0 0 0.25rem rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.25) !important;
}

/* Dark-theme caret stroke (Tabler uses a lighter stroke) */
[data-bs-theme=dark] .ts-control,
body[data-bs-theme=dark] [data-bs-theme=light] .ts-control {
    --tblr-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e5e7eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.ts-dropdown {
    background-color: var(--tblr-bg-surface, #ffffff) !important;
    color: var(--tblr-body-color, #212529) !important;
    border-color: var(--tblr-border-color, #d1d5db) !important;
    border-radius: var(--tblr-border-radius, 0.375rem) !important;
    box-shadow: 0 0.5rem 1rem rgba(30, 34, 40, 0.08) !important;
    z-index: 2000 !important; /* keep above cards/help text */
}

.ts-dropdown .option,
.ts-dropdown .optgroup-header {
    color: var(--tblr-body-color, #212529) !important;
}

.ts-dropdown .option.active,
.ts-dropdown .active.create {
    background-color: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.10) !important;
    color: var(--tblr-body-color, #212529) !important;
}

/* Disabled */
.ts-wrapper.disabled .ts-control {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    opacity: 0.75;
}

/* Custom Tooltip Styles - Tabler UI compliant */
.tooltip {
    font-family: var(--tblr-font-sans-serif, 'Roboto', 'Inter', sans-serif) !important;
    z-index: var(--tblr-tooltip-zindex, 1080) !important;
}

/* Regular tooltip (dark) - Tabler UI style using CSS variables */
.tooltip-inner {
    background-color: var(--tblr-tooltip-bg, var(--tblr-bg-surface-inverted, #1e293b)) !important;
    color: var(--tblr-tooltip-color, var(--tblr-text-inverted, #ffffff)) !important;
    font-size: var(--tblr-tooltip-font-size, 0.765625rem) !important;
    font-weight: 400 !important;
    line-height: 1.4285714286 !important;
    padding: var(--tblr-tooltip-padding-y, var(--tblr-spacer-1, 0.25rem)) var(--tblr-tooltip-padding-x, var(--tblr-spacer-3, 0.75rem)) !important;
    border-radius: var(--tblr-tooltip-border-radius, var(--tblr-border-radius, 0.375rem)) !important;
    box-shadow: var(--tblr-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)) !important;
    max-width: 500px !important;
    text-align: left !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    opacity: var(--tblr-tooltip-opacity, 0.9) !important;
}

.tooltip.show {
    opacity: var(--tblr-tooltip-opacity, 0.9) !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--tblr-tooltip-bg, var(--tblr-bg-surface-inverted, #1e293b)) !important;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: var(--tblr-tooltip-bg, var(--tblr-bg-surface-inverted, #1e293b)) !important;
}

.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: var(--tblr-tooltip-bg, var(--tblr-bg-surface-inverted, #1e293b)) !important;
}

.tooltip.bs-tooltip-end .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: var(--tblr-tooltip-bg, var(--tblr-bg-surface-inverted, #1e293b)) !important;
}

/* Light tooltip variant - Tabler UI compliant */
.tooltip-light .tooltip-inner {
    background-color: var(--tblr-bg-surface, #ffffff) !important;
    color: var(--tblr-body-color, #1e293b) !important;
    border: 1px solid var(--tblr-border-color, #e9ecef) !important;
    box-shadow: var(--tblr-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)) !important;
}

.tooltip-light.bs-tooltip-top .tooltip-arrow::before,
.tooltip-light.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--tblr-bg-surface, #ffffff) !important;
}

.tooltip-light.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip-light.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: var(--tblr-bg-surface, #ffffff) !important;
}

.tooltip-light.bs-tooltip-start .tooltip-arrow::before,
.tooltip-light.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: var(--tblr-bg-surface, #ffffff) !important;
}

.tooltip-light.bs-tooltip-end .tooltip-arrow::before,
.tooltip-light.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: var(--tblr-bg-surface, #ffffff) !important;
}

/* Compact card styles for settings page */
.card-sm {
    border-radius: 0.5rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease-in-out !important;
}

.card-sm:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px) !important;
}

.avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 0.5rem !important;
}

.avatar-md {
    width: 3rem !important;
    height: 3rem !important;
}

/* Enhanced Badge Contrast - Comprehensive Rules */

/* Dark/Colored Backgrounds - White Text */
.badge.bg-primary,
.badge.bg-blue,
.badge.bg-info,
.badge.bg-cyan,
.badge.bg-success,
.badge.bg-green,
.badge.bg-danger,
.badge.bg-red,
.badge.bg-warning,
.badge.bg-yellow,
.badge.bg-orange,
.badge.bg-purple,
.badge.bg-pink,
.badge.bg-indigo,
.badge.bg-teal {
    color: #ffffff !important;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Light Backgrounds - Black/Dark Text */
.badge.bg-secondary,
.badge.bg-gray,
.badge.bg-grey,
.badge.bg-light,
.badge.bg-white,
.badge.bg-primary-lt,
.badge.bg-blue-lt,
.badge.bg-info-lt,
.badge.bg-cyan-lt,
.badge.bg-success-lt,
.badge.bg-green-lt,
.badge.bg-danger-lt,
.badge.bg-red-lt,
.badge.bg-warning-lt,
.badge.bg-yellow-lt,
.badge.bg-orange-lt,
.badge.bg-purple-lt,
.badge.bg-pink-lt,
.badge.bg-indigo-lt,
.badge.bg-teal-lt {
    color: #1f2937 !important;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Special Cases - Colored Text for Better Visualization */
/* Status badges with colored text for semantic meaning */
.badge.bg-success-lt,
.badge.bg-green-lt {
    color: #15803d !important; /* Dark green for better visibility on light green */
}

.badge.bg-warning-lt,
.badge.bg-yellow-lt {
    color: #b45309 !important; /* Dark amber for better visibility on light yellow */
}

.badge.bg-danger-lt,
.badge.bg-red-lt {
    color: #b91c1c !important; /* Dark red for better visibility on light red */
}

.badge.bg-info-lt,
.badge.bg-blue-lt,
.badge.bg-cyan-lt {
    color: #0c4a6e !important; /* Dark blue for better visibility on light blue */
}

.badge.bg-primary-lt {
    color: #1e40af !important; /* Dark blue for better visibility on light primary */
}

.badge.bg-purple-lt {
    color: #6b21a8 !important; /* Dark purple for better visibility on light purple */
}

.badge.bg-pink-lt {
    color: #9f1239 !important; /* Dark pink for better visibility on light pink */
}

.badge.bg-orange-lt {
    color: #9a3412 !important; /* Dark orange for better visibility on light orange */
}

/* Outline badges - use colored text matching the border */
.badge-outline.bg-primary,
.badge-outline.bg-blue {
    color: #206bc4 !important;
    border-color: #206bc4 !important;
}

.badge-outline.bg-success,
.badge-outline.bg-green {
    color: #22c55e !important;
    border-color: #22c55e !important;
}

.badge-outline.bg-danger,
.badge-outline.bg-red {
    color: #ef4444 !important;
    border-color: #ef4444 !important;
}

.badge-outline.bg-warning,
.badge-outline.bg-yellow {
    color: #f59e0b !important;
    border-color: #f59e0b !important;
}

.badge-outline.bg-info,
.badge-outline.bg-cyan {
    color: #0ea5e9 !important;
    border-color: #0ea5e9 !important;
}

.badge-outline.bg-secondary,
.badge-outline.bg-gray,
.badge-outline.bg-grey {
    color: #6b7280 !important;
    border-color: #6b7280 !important;
}

/* Ensure all badges have readable text */
.badge:not([class*="bg-"]) {
    color: #1f2937 !important;
    background-color: #f3f4f6 !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Badge notification dots - no text needed */
.badge:empty,
.badge-dot {
    color: transparent !important;
}

/* ============================================
   Form Select (Dropdown) – Use Tabler defaults
   ============================================
   Important:
   - Do NOT force native select rendering (appearance:auto) or remove Tabler's caret/background-image.
   - Keep only a minimal safeguard for OS dark-mode rendering quirks.
*/

.form-select {
    /* Prevent OS dark-mode from painting the control in dark colors on Windows */
    color-scheme: light;
}

/* Loading hint (used by some pages that set data-loading="true") */
.form-select[data-loading="true"],
select[data-loading="true"] {
    cursor: wait !important;
}

/* Code block styling - Light theme to align with Tabler UI */
pre.code,
pre.code code {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border: 1px solid #e9ecef !important;
}

pre.code code {
    background-color: transparent !important;
    padding: 0 !important;
}

/* Response body code block */
#response-body {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border: 1px solid #e9ecef !important;
}

/* ============================================
   Enterprise Filter Bars (prevent overflow)
   ============================================ */
.client-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
}

.client-filters__toggle {
    margin: 0;
    padding: 0.15rem 0.25rem;
}

.client-filters__search {
    flex: 1 1 420px;
    min-width: 260px;
}

.client-filters__select {
    flex: 0 1 220px;
    min-width: 180px;
}

.client-filters__select--status {
    flex-basis: 180px;
    min-width: 160px;
}

.client-filters__select--auth {
    flex-basis: 200px;
    min-width: 180px;
}

.client-filters__select--pageSize {
    flex: 0 0 96px;
    min-width: 96px;
}

.client-filters__actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

@media (max-width: 768px) {
    .client-filters__search,
    .client-filters__select {
        flex: 1 1 100%;
        min-width: 0;
    }

    .client-filters__select--pageSize {
        flex: 0 0 120px;
    }

    .client-filters__actions {
        margin-left: 0;
        width: 100%;
    }
}