/*!
 * CHRONOS UI Overrides & Theme Support CSS
 * Comprehensive styling for CHRONOS application including:
 * - Bootstrap form enhancements and customizations
 * - Dark/Light mode theme support (Bootstrap 5.3+ compatible)
 * - Custom component styling and overrides
 * - jQuery UI autocomplete theming
 * - Responsive design improvements
 */

/* ===================================================================
   SECTION 1: BOOTSTRAP FORM ENHANCEMENTS & CUSTOMIZATIONS
   ================================================================ */

/* ===================================================================
   GLOBAL STYLES & CSS VARIABLES
   ================================================================= */

/* CHRONOS Glassmorphism Design System Variables */
:root {
    /* Light Mode Glassmorphism */
    --chronos-glass-bg: rgba(255, 255, 255, 0.75);
    --chronos-glass-bg-rgb: 255, 255, 255;
    --chronos-glass-opacity: 0.75;
    --chronos-glass-blur: 20px;
    --chronos-glass-saturate: 180%;
    --chronos-glass-border: rgba(0, 0, 0, 0.1);
    --chronos-glass-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    --chronos-glass-inset-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;

    /* Ensure pure white background - not off-white */
    --bs-body-bg: #ffffff;
    --bs-body-bg-rgb: 255, 255, 255;
    --chronos-navbar-bg: var(--chronos-glass-bg);
    --chronos-sidebar-bg: var(--chronos-glass-bg);
}

/* Dark Mode Glassmorphism Variables */
[data-bs-theme="dark"] {
    --chronos-glass-bg: rgba(33, 37, 41, 0.85);
    --chronos-glass-bg-rgb: 33, 37, 41;
    --chronos-glass-opacity: 0.85;
    --chronos-glass-blur: 20px;
    --chronos-glass-saturate: 180%;
    --chronos-glass-border: rgba(255, 255, 255, 0.15);
    --chronos-glass-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --chronos-glass-inset-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;

    --chronos-navbar-bg: var(--chronos-glass-bg);
    --chronos-sidebar-bg: var(--chronos-glass-bg);
}

/* Universal Glassmorphism Class - Apply to any element */
.chronos-glassmorphism,
.glass-effect {
    background: var(--chronos-glass-bg) !important;
    backdrop-filter: blur(var(--chronos-glass-blur)) saturate(var(--chronos-glass-saturate)) !important;
    -webkit-backdrop-filter: blur(var(--chronos-glass-blur)) saturate(var(--chronos-glass-saturate)) !important;
    border: 1px solid var(--chronos-glass-border) !important;
    box-shadow: var(--chronos-glass-shadow), var(--chronos-glass-inset-shadow) !important;
}

/* Force pure white background on main content area */
body {
    background-color: #ffffff !important;
}

[data-bs-theme="light"] body,
[data-bs-theme="light"] .main-content,
[data-bs-theme="light"] .container-fluid,
[data-bs-theme="light"] #block {
    background-color: #ffffff !important;
}

/* Fix scroll issue caused by body padding + min-vh-100 on layout container */
/* Body has padding-top: 60px from modern-sidebar.css for fixed navbar */
/* Layout container uses min-vh-100 which creates overflow when combined with body padding */
/* Solution: Make the flex container account for body padding */
.d-flex.min-vh-100 {
    min-height: calc(100vh - 60px) !important; /* Subtract body padding from viewport height */
}

/* On mobile, body padding is 70px */
@media (max-width: 768px) {
    .d-flex.min-vh-100 {
        min-height: calc(100vh - 70px) !important;
    }
}

/* ===================================================================
   NAVBAR GLASSMORPHISM
   ================================================================= */

/* Apply glassmorphism to navbar - override inline styles */
#main-navbar,
.navbar#main-navbar,
nav#main-navbar.navbar {
    background: var(--chronos-glass-bg) !important;
    background-color: var(--chronos-glass-bg) !important;
    backdrop-filter: blur(var(--chronos-glass-blur)) saturate(var(--chronos-glass-saturate)) !important;
    -webkit-backdrop-filter: blur(var(--chronos-glass-blur)) saturate(var(--chronos-glass-saturate)) !important;
    border-bottom: 1px solid var(--chronos-glass-border) !important;
    box-shadow: var(--chronos-glass-shadow) !important;
}

/* Ensure navbar container is transparent to show glassmorphism */
#main-navbar .container-fluid,
#main-navbar > .container-fluid {
    background: transparent !important;
    background-color: transparent !important;
}

/* ===================================================================
   NAVBAR ACTION BUTTONS — MOBILE COLLAPSE
   On screens <= 768px the four action buttons (theme, language, admin,
   help) collapse into a single #navbar-more kebab dropdown. The
   Bootstrap d-none / d-md-* utilities on the markup do the work; the
   rules below are a safety belt against other !important rules.
   Breakpoint mirrors modern-sidebar.css.
   ================================================================= */
@media (max-width: 768px) {
    #main-navbar .navbar-action-desktop {
        display: none !important;
    }
}
@media (min-width: 769px) {
    #main-navbar .navbar-action-mobile {
        display: none !important;
    }
}

/* ===================================================================
   SIDEBAR GLASSMORPHISM
   ================================================================= */

/* Apply glassmorphism to sidebar */
.sidebar,
.main-sidebar .sidebar {
    background: var(--chronos-glass-bg) !important;
    backdrop-filter: blur(var(--chronos-glass-blur)) saturate(var(--chronos-glass-saturate)) !important;
    -webkit-backdrop-filter: blur(var(--chronos-glass-blur)) saturate(var(--chronos-glass-saturate)) !important;
    border-right: 1px solid var(--chronos-glass-border) !important;
    box-shadow: 2px 0 32px rgba(var(--chronos-glass-bg-rgb), 0.12), 1px 0 0 var(--chronos-glass-border) inset !important;
}

/* Submenu glassmorphism */
.submenu-offcanvas,
.nested-submenu {
    background: var(--chronos-glass-bg) !important;
    backdrop-filter: blur(var(--chronos-glass-blur)) saturate(var(--chronos-glass-saturate)) !important;
    -webkit-backdrop-filter: blur(var(--chronos-glass-blur)) saturate(var(--chronos-glass-saturate)) !important;
    border: 1px solid var(--chronos-glass-border) !important;
    box-shadow: var(--chronos-glass-shadow) !important;
}

/* Remove legacy form styles that conflict with Bootstrap */
.form-group {
    margin-bottom: 0;
}

/* Improve form label styling */
.form-label.required::after,
.form-check-label.required::after {
    content: " *";
    color: var(--bs-danger);
    font-weight: bold;
}

/* ===================================================================
   GLOBAL CARD GLASSMORPHISM STYLING
   Prevents Bootstrap defaults from overriding on AJAX tab loads
   =================================================================== */
.card {
    /* Override Bootstrap's default card background with glassmorphism */
    --bs-card-bg: var(--chronos-glass-bg) !important;
    --bs-card-border-color: var(--chronos-glass-border) !important;
    --bs-card-border-width: 1px !important;
    --bs-card-border-radius: 0.5rem !important;

    /* Apply glassmorphism effect */
    background: var(--chronos-glass-bg) !important;
    /* backdrop-filter: blur(var(--chronos-glass-blur)) saturate(var(--chronos-glass-saturate)) !important; */
    /* -webkit-backdrop-filter: blur(var(--chronos-glass-blur)) saturate(var(--chronos-glass-saturate)) !important; */

    /* Border and shadow */
    border: 1px solid var(--chronos-glass-border) !important;
    box-shadow: var(--chronos-glass-shadow), var(--chronos-glass-inset-shadow) !important;
    border-radius: 0.5rem !important;

    /* Smooth transitions */
    transition: all 0.2s ease-in-out !important;
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), var(--chronos-glass-inset-shadow) !important;
}

/* Ensure card headers and footers also maintain glassmorphism */
.card-header,
.card-footer {
    background: rgba(var(--bs-body-color-rgb, 0, 0, 0), 0.03) !important;
    border-color: var(--chronos-glass-border) !important;
    backdrop-filter: inherit !important;
    -webkit-backdrop-filter: inherit !important;
}

/* Card body inherits parent transparency */
.card-body {
    background: transparent !important;
}

/* Dark mode card adjustments */
[data-bs-theme="dark"] .card {
    --bs-card-bg: var(--chronos-glass-bg) !important;
    --bs-card-border-color: var(--chronos-glass-border) !important;
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
    background: rgba(var(--bs-light-rgb, 255, 255, 255), 0.05) !important;
}

/* Sticky form actions */
.device-form-actions {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Date input group styling */
.date-input-group .btn {
    min-width: 2.5rem;
}

/* Conditional field animations */
.conditional-field {
    transition: all 0.3s ease;
}

.conditional-field.d-none {
    opacity: 0;
    transform: translateY(-10px);
}

/* Select styling improvements */
.form-select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Button enhancements */
.btn-group .btn {
    position: relative;
    z-index: 1;
}

.btn-group .btn:focus {
    z-index: 2;
}

/* Icon alignment in buttons */
.btn i {
    vertical-align: middle;
}

/* Alert improvements */
.alert {
    border: none;
    border-radius: 0.5rem;
}

.alert-danger {
    background-color: #f8d7da;
    border: 1px solid #dc3545;
    color: #721c24;
}

.alert-success {
    background-color: #d1edff;
    border: 1px solid #0dcaf0;
    color: #055160;
}

/* Input group improvements */
.input-group .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

/* Loading states */
.form-control.loading {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23666' d='M10 3.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM10 2a8 8 0 110 16 8 8 0 010-16z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ===================================================================
   SECTION 2: DARK/LIGHT MODE THEME SUPPORT (Bootstrap 5.3+)
   ================================================================ */

/* Pin native UI (scrollbars, form controls) to the Chronos theme rather than
   the OS preference. Without this, an operator on the light theme whose OS is
   in dark mode gets dark native scrollbars inside dialogs. */
[data-bs-theme="light"] {
    color-scheme: light;
}

/* Root variables for dark mode - Bootstrap 5.3+ standard approach */
[data-bs-theme="dark"] {
    color-scheme: dark;

    /* Bootstrap 5.3+ dark mode CSS variables - Updated for latest version */
    --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222, 226, 230;
    --bs-body-bg: #212529;
    --bs-body-bg-rgb: 33, 37, 41;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(222, 226, 230, .75);
    --bs-secondary-color-rgb: 222, 226, 230;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52, 58, 64;
    --bs-tertiary-color: rgba(222, 226, 230, .5);
    --bs-tertiary-color-rgb: 222, 226, 230;
    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43, 48, 53;
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, .15);
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color-rgb: 139, 185, 254;
    --bs-code-color: #e685b5;
    --bs-highlight-bg: #664d03;

    /* Custom CHRONOS dark mode variables */
    --chronos-sidebar-bg: #343a40;
    --chronos-sidebar-border: #495057;
    --chronos-sidebar-hover: #495057;
    --chronos-navbar-bg: #343a40;
    --chronos-card-bg: #2b3035; /* Darker base card color */
    --chronos-card-light-bg: #343a40; /* Medium card color for bg-light */
    --chronos-card-white-bg: #495057; /* Lightest card color for bg-white */
    --chronos-table-bg: #343a40;
    --chronos-table-striped-bg: #2c3035;
    --chronos-input-bg: #495057;
    --chronos-dropdown-bg: #343a40;
    --chronos-modal-bg: #343a40;
    --chronos-shadow: rgba(0, 0, 0, 0.5);
}

/* Global dark mode application */
html[data-bs-theme="dark"],
[data-bs-theme="dark"] body {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

/* Main content containers */
[data-bs-theme="dark"] .main-content,
[data-bs-theme="dark"] .container,
[data-bs-theme="dark"] .container-fluid,
[data-bs-theme="dark"] #block {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

/* ===== NAVBAR STYLES ===== */
[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] .navbar-expand-lg,
[data-bs-theme="dark"] .navbar-light {
    background-color: var(--chronos-navbar-bg) !important;
    border-color: var(--bs-border-color) !important;
    --bs-navbar-color: rgba(255, 255, 255, 0.75);
    --bs-navbar-hover-color: #fff;
    --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .navbar .nav-link,
[data-bs-theme="dark"] .navbar .navbar-brand,
[data-bs-theme="dark"] .navbar .navbar-text {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .navbar .nav-link:hover,
[data-bs-theme="dark"] .navbar .nav-link:focus {
    color: var(--bs-emphasis-color) !important;
}

/* Navbar brand color for both themes */
[data-bs-theme="light"] .navbar-brand,
[data-bs-theme="dark"] .navbar-brand {
    color: var(--chronos-glass-blur) !important;
}

/* ===== SIDEBAR STYLES ===== */
[data-bs-theme="dark"] .sidebar,
[data-bs-theme="dark"] aside,
[data-bs-theme="dark"] .sidebar-wrapper {
    border-color: var(--chronos-sidebar-border) !important;
}

[data-bs-theme="dark"] .sidebar-link,
[data-bs-theme="dark"] .submenu-link,
[data-bs-theme="dark"] .sidebar .nav-link,
[data-bs-theme="dark"] .sidebar .nav-item a {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .sidebar-link:hover,
[data-bs-theme="dark"] .submenu-link:hover,
[data-bs-theme="dark"] .sidebar .nav-link:hover,
[data-bs-theme="dark"] .sidebar .nav-link.active {
    background-color: var(--chronos-sidebar-hover) !important;
    color: var(--bs-emphasis-color) !important;
}

/* Submenu dropdown containers - ensure proper dark mode styling */
[data-bs-theme="dark"] .collapse.submenu-offcanvas {
    background-color: var(--chronos-dropdown-bg) !important;
    border: 1px solid var(--bs-border-color) !important;
    box-shadow: 0 0.5rem 1rem var(--chronos-shadow) !important;
}

[data-bs-theme="dark"] .nested-submenu {
    background-color: var(--chronos-sidebar-hover) !important;
    border: 1px solid var(--bs-border-color) !important;
    font-size: 0.85em !important;
}

/* Light mode submenu styling - use pure white instead of off-white */
[data-bs-theme="light"] .collapse.submenu-offcanvas {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

[data-bs-theme="light"] .nested-submenu {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    font-size: 0.85em !important;
}

/* Ensure submenu items inherit proper colors */
[data-bs-theme="dark"] .submenu-offcanvas .submenu-link,
[data-bs-theme="dark"] .nested-submenu .submenu-link {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .submenu-offcanvas .submenu-link:hover,
[data-bs-theme="dark"] .nested-submenu .submenu-link:hover {
    background-color: var(--chronos-sidebar-hover) !important;
    color: var(--bs-emphasis-color) !important;
}

/* Sidebar button hover effects for dark mode */
[data-bs-theme="dark"] .sidebar-link:hover,
[data-bs-theme="dark"] .sidebar-link:focus {
    background-color: var(--chronos-sidebar-hover) !important;
    color: var(--bs-emphasis-color) !important;
}

[data-bs-theme="dark"] .submenu-link:hover,
[data-bs-theme="dark"] .submenu-link:focus {
    background-color: var(--chronos-sidebar-hover) !important;
    color: var(--bs-emphasis-color) !important;
}

/* FontAwesome icons in sidebar - ensure proper visibility */
[data-bs-theme="dark"] .sidebar .fas,
[data-bs-theme="dark"] .sidebar .far,
[data-bs-theme="dark"] .sidebar .fab,
[data-bs-theme="dark"] .sidebar .fal,
[data-bs-theme="dark"] .sidebar .fa {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .sidebar-link .fas,
[data-bs-theme="dark"] .sidebar-link .far,
[data-bs-theme="dark"] .sidebar-link .fab,
[data-bs-theme="dark"] .sidebar-link .fal,
[data-bs-theme="dark"] .sidebar-link .fa,
[data-bs-theme="dark"] .submenu-link .fas,
[data-bs-theme="dark"] .submenu-link .far,
[data-bs-theme="dark"] .submenu-link .fab,
[data-bs-theme="dark"] .submenu-link .fal,
[data-bs-theme="dark"] .submenu-link .fa {
    color: inherit !important;
}

/* Icon color on hover */
[data-bs-theme="dark"] .sidebar-link:hover .fas,
[data-bs-theme="dark"] .sidebar-link:hover .far,
[data-bs-theme="dark"] .sidebar-link:hover .fab,
[data-bs-theme="dark"] .sidebar-link:hover .fal,
[data-bs-theme="dark"] .sidebar-link:hover .fa,
[data-bs-theme="dark"] .submenu-link:hover .fas,
[data-bs-theme="dark"] .submenu-link:hover .far,
[data-bs-theme="dark"] .submenu-link:hover .fab,
[data-bs-theme="dark"] .submenu-link:hover .fal,
[data-bs-theme="dark"] .submenu-link:hover .fa {
    color: var(--bs-emphasis-color) !important;
}

/* ===== CARD COMPONENTS ===== */
/* Default card styling for dark mode */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-body,
[data-bs-theme="dark"] .card-footer {
    background-color: var(--chronos-card-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

/* Light cards should be slightly lighter in dark mode */
[data-bs-theme="dark"] .card.bg-light,
[data-bs-theme="dark"] .card.bg-light .card-header,
[data-bs-theme="dark"] .card.bg-light .card-body,
[data-bs-theme="dark"] .card.bg-light .card-footer {
    background-color: var(--chronos-card-light-bg) !important; /* Lighter than default card */
}

/* White cards should be the lightest in dark mode */
[data-bs-theme="dark"] .card.bg-white,
[data-bs-theme="dark"] .card.bg-white .card-header,
[data-bs-theme="dark"] .card.bg-white .card-body,
[data-bs-theme="dark"] .card.bg-white .card-footer {
    background-color: var(--chronos-card-white-bg) !important; /* Even lighter for better contrast */
}

[data-bs-theme="dark"] .card-title,
[data-bs-theme="dark"] .card-text {
    color: var(--bs-body-color) !important;
}

/* ===== TABLE STYLES ===== */
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] .table th,
[data-bs-theme="dark"] .table td {
    background-color: var(--chronos-table-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--chronos-table-striped-bg) !important;
}

[data-bs-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--chronos-sidebar-hover) !important;
}

/* Grid/DataTable specific styles */
[data-bs-theme="dark"] .grid-view table,
[data-bs-theme="dark"] .grid-view th,
[data-bs-theme="dark"] .grid-view td {
    background-color: var(--chronos-table-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .grid-view .summary,
[data-bs-theme="dark"] .grid-view .pager {
    color: var(--bs-body-color) !important;
}

/* ===== FORM CONTROLS ===== */
/* Note: .form-check-input is intentionally excluded from this broad rule —
   the `!important` flat-gray background was clobbering Bootstrap's
   :checked state, making form-switches indistinguishable on/off in dark
   mode. Bootstrap 5.3's native dark-theme handling is sufficient for
   checkboxes/radios/switches. */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] input[type="text"],
[data-bs-theme="dark"] input[type="email"],
[data-bs-theme="dark"] input[type="password"],
[data-bs-theme="dark"] input[type="number"],
[data-bs-theme="dark"] input[type="date"],
[data-bs-theme="dark"] input[type="datetime-local"],
[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] select {
    background-color: var(--chronos-input-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] input:focus,
[data-bs-theme="dark"] textarea:focus,
[data-bs-theme="dark"] select:focus {
    background-color: var(--chronos-input-bg) !important;
    border-color: #86b7fe !important;
    color: var(--bs-body-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--bs-secondary-color) !important;
    opacity: 1;
}

[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] label {
    color: var(--bs-body-color) !important;
}

/* ===== FORM VALIDATION STATES ===== */

/* Critical: Force invalid styling to override valid styling regardless of theme */
/* These rules have higher specificity to override Bootstrap's was-validated rules */
.form-control.is-invalid,
.was-validated .form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-select.is-invalid,
input.is-invalid,
.was-validated input.is-invalid,
textarea.is-invalid,
.was-validated textarea.is-invalid {
    border-color: var(--bs-form-invalid-border-color) !important;
    padding-right: calc(1.5em + .75rem) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(.375em + .1875rem) center !important;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem) !important;
}

.form-control.is-invalid:focus,
.was-validated .form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.was-validated .form-select.is-invalid:focus,
input.is-invalid:focus,
.was-validated input.is-invalid:focus,
textarea.is-invalid:focus,
.was-validated textarea.is-invalid:focus {
    border-color: var(--bs-form-invalid-border-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

/* RTL invalid state: move icon to left and reserve left space */
:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) .form-control.is-invalid,
:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) .was-validated .form-control.is-invalid,
:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) .form-select.is-invalid,
:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) .was-validated .form-select.is-invalid,
:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) input.is-invalid,
:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) .was-validated input.is-invalid {
    background-position: left calc(.375em + .1875rem) center !important;
    padding-left: calc(1.5em + .75rem) !important;
    padding-right: .75rem !important;
}

/* Root-cause fix: disable global positive/valid visuals from Bootstrap's :valid rules.
   This prevents optional empty fields from showing green checkmarks once .was-validated is set. */
.form-control.is-valid,
.was-validated .form-control:valid,
.form-select.is-valid,
.was-validated .form-select:valid,
input.is-valid,
.was-validated input:valid,
textarea.is-valid,
.was-validated textarea:valid {
    border-color: var(--bs-border-color) !important;
    background-image: none !important;
    background-position: initial !important;
    background-size: initial !important;
    padding-right: .75rem !important;
    box-shadow: none !important;
}

:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) .form-control.is-valid,
:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) .was-validated .form-control:valid,
:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) .form-select.is-valid,
:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) .was-validated .form-select:valid,
:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) input.is-valid,
:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) .was-validated input:valid,
:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) textarea.is-valid,
:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) .was-validated textarea:valid {
    padding-inline-start: .75rem !important;
    padding-inline-end: .75rem !important;
}

/* Keep native select chevron spacing correct in RTL after validation neutralization */
:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) .form-select.is-valid,
:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) .was-validated .form-select:valid {
    padding-inline-start: .75rem !important;
    padding-inline-end: 2.25rem !important;
}

/* Specifically override the valid state when invalid class is present */
.was-validated .form-control.is-invalid:valid,
.was-validated .form-select.is-invalid:valid,
.was-validated input.is-invalid:valid,
.was-validated textarea.is-invalid:valid {
    border-color: var(--bs-form-invalid-border-color) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(.375em + .1875rem) center !important;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem) !important;
    padding-right: calc(1.5em + .75rem) !important;
}

:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) .was-validated .form-control.is-invalid:valid,
:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) .was-validated .form-select.is-invalid:valid,
:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) .was-validated input.is-invalid:valid {
    background-position: left calc(.375em + .1875rem) center !important;
    padding-left: calc(1.5em + .75rem) !important;
    padding-right: .75rem !important;
}

/* Autocomplete exception: keep widget-managed spacing and avoid Bootstrap icon overlap */
.chronos-autocomplete-container .chronos-autocomplete-input.is-invalid,
.chronos-autocomplete-container .chronos-autocomplete-input.is-valid,
.was-validated .chronos-autocomplete-container .chronos-autocomplete-input.is-invalid,
.was-validated .chronos-autocomplete-container .chronos-autocomplete-input.is-valid,
.input-group .chronos-autocomplete-input.is-invalid,
.input-group .chronos-autocomplete-input.is-valid,
.was-validated .input-group .chronos-autocomplete-input.is-invalid,
.was-validated .input-group .chronos-autocomplete-input.is-valid {
    background-image: none !important;
    background-position: initial !important;
    background-size: initial !important;
    padding-right: 0.75rem !important;
    padding-left: 0.75rem !important;
}

/* Keep placeholder rendering stable inside autocomplete input-group */
.input-group .chronos-autocomplete-input::placeholder {
    opacity: 1;
}

/* Legacy Yii success class can still be present on autocomplete fields; keep it neutral */
.chronos-autocomplete-container .chronos-autocomplete-input.success,
.chronos-autocomplete-container .chronos-autocomplete-hidden.success,
.was-validated .chronos-autocomplete-container .chronos-autocomplete-input.success,
.was-validated .chronos-autocomplete-container .chronos-autocomplete-hidden.success {
    background-image: none !important;
    padding-inline-start: 0.75rem !important;
    padding-inline-end: 0.75rem !important;
}

:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) .chronos-autocomplete-container .chronos-autocomplete-input.is-invalid,
:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) .chronos-autocomplete-container .chronos-autocomplete-input.is-valid,
:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) .input-group .chronos-autocomplete-input.is-invalid,
:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) .input-group .chronos-autocomplete-input.is-valid {
    padding-inline-start: 0.75rem !important;
    padding-inline-end: 0.75rem !important;
}

/* TomSelect shell should never render native form valid/invalid icons */
.ts-wrapper.form-select.is-valid,
.ts-wrapper.form-select.is-invalid,
.was-validated .ts-wrapper.form-select.is-valid,
.was-validated .ts-wrapper.form-select.is-invalid,
.ts-wrapper .ts-control.is-valid,
.ts-wrapper .ts-control.is-invalid,
.ts-wrapper .ts-control > input.is-valid,
.ts-wrapper .ts-control > input.is-invalid {
    background-image: none !important;
    background-position: initial !important;
    background-size: initial !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* TomSelect chevron placement: wrapper carries .form-select, so force side by direction */
:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) .ts-wrapper.form-select.single,
:where(html[dir='rtl'], body[dir='rtl'], .rtl-context) .ts-wrapper.form-select.single.rtl {
    background-position: left 0.75rem center !important;
    padding-left: 2.25rem !important;
    padding-right: 0.75rem !important;
}

:where(html:not([dir='rtl']), body:not([dir='rtl'])) .ts-wrapper.form-select.single,
:where(html:not([dir='rtl']), body:not([dir='rtl'])) .ts-wrapper.form-select.single:not(.rtl) {
    background-position: right 0.75rem center !important;
    padding-right: 2.25rem !important;
    padding-left: 0.75rem !important;
}

/* Neutralize TomSelect "valid" styling from bootstrap skin pseudo selectors */
.was-validated :valid + .ts-wrapper,
.was-validated .valid + .ts-wrapper,
.ts-wrapper.is-valid,
.ts-wrapper.valid {
    border-color: var(--bs-border-color) !important;
    background-image: none !important;
    background-position: initial !important;
    background-size: initial !important;
    box-shadow: none !important;
}

.was-validated :valid + .ts-wrapper .ts-control,
.was-validated .valid + .ts-wrapper .ts-control,
.ts-wrapper.is-valid .ts-control,
.ts-wrapper.valid .ts-control {
    border-color: var(--bs-border-color) !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Keep invalid state explicit on TomSelect, but without icon overlays.
 *
 * `.ts-wrapper.invalid` is TomSelect's OWN class: it toggles it on any
 * required select with no selection, INCLUDING at construction, before the
 * operator has touched anything. Ungated, that painted every required
 * multi-select red on first paint — measured on the person page's Actions
 * tab, 2026-09-12 — which is the opposite of Bootstrap's convention, where
 * red means "you tried and this is wrong". So that class is honoured only
 * under .was-validated, like the native :invalid beside it; .is-invalid,
 * which only the application sets, stays unconditional. */
.was-validated :invalid + .ts-wrapper,
.was-validated .invalid + .ts-wrapper,
.was-validated .ts-wrapper.invalid,
.is-invalid + .ts-wrapper,
.ts-wrapper.is-invalid {
    border-color: var(--bs-form-invalid-border-color) !important;
    background-image: none !important;
    background-position: initial !important;
    background-size: initial !important;
}

.was-validated :invalid + .ts-wrapper .ts-control,
.was-validated .invalid + .ts-wrapper .ts-control,
.was-validated .ts-wrapper.invalid .ts-control,
.is-invalid + .ts-wrapper .ts-control,
.ts-wrapper.is-invalid .ts-control {
    border-color: var(--bs-form-invalid-border-color) !important;
    box-shadow: none !important;
}

/* Error-message wins: wrapper with feedback text forces invalid visuals */
.mb-3.has-feedback-error .form-control,
.mb-3.has-feedback-error .form-select,
.mb-3.has-feedback-error .flatpickr-widget-input,
.form-group.has-feedback-error .form-control,
.form-group.has-feedback-error .form-select,
.form-group.has-feedback-error .flatpickr-widget-input {
    border-color: var(--bs-form-invalid-border-color) !important;
    background-image: none !important;
}

/* Flatpickr bridge: hidden invalid source input should style the visible text input */
.flatpickr-widget-input.flatpickr-input.is-invalid + .flatpickr-widget-input,
.was-validated .flatpickr-widget-input.flatpickr-input.is-invalid + .flatpickr-widget-input,
.flatpickr-widget-input.flatpickr-input.is-invalid + input.form-control,
.was-validated .flatpickr-widget-input.flatpickr-input.is-invalid + input.form-control {
    border-color: var(--bs-form-invalid-border-color) !important;
    background-image: none !important;
}

.flatpickr-widget-input.flatpickr-input.is-invalid + .flatpickr-widget-input:focus,
.was-validated .flatpickr-widget-input.flatpickr-input.is-invalid + .flatpickr-widget-input:focus,
.flatpickr-widget-input.flatpickr-input.is-invalid + input.form-control:focus,
.was-validated .flatpickr-widget-input.flatpickr-input.is-invalid + input.form-control:focus {
    border-color: var(--bs-form-invalid-border-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
    background-image: none !important;
}

.mb-3.has-feedback-error .ts-wrapper,
.mb-3.has-feedback-error .ts-control,
.mb-3.has-feedback-error .tomselect-wrapper,
.mb-3.has-feedback-error .tomselect-control,
.form-group.has-feedback-error .ts-wrapper,
.form-group.has-feedback-error .ts-control,
.form-group.has-feedback-error .tomselect-wrapper,
.form-group.has-feedback-error .tomselect-control {
    border-color: var(--bs-form-invalid-border-color) !important;
    background-image: none !important;
}

.mb-3.has-feedback-error .ts-control > input,
.form-group.has-feedback-error .ts-control > input {
    background-image: none !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Dark mode specific validation overrides */
[data-bs-theme="dark"] .form-control.is-invalid,
[data-bs-theme="dark"] .was-validated .form-control.is-invalid,
[data-bs-theme="dark"] .form-select.is-invalid,
[data-bs-theme="dark"] .was-validated .form-select.is-invalid,
[data-bs-theme="dark"] input.is-invalid,
[data-bs-theme="dark"] .was-validated input.is-invalid,
[data-bs-theme="dark"] textarea.is-invalid,
[data-bs-theme="dark"] .was-validated textarea.is-invalid {
    border-color: #dc3545 !important;
    background-color: var(--chronos-input-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .form-control.is-invalid:focus,
[data-bs-theme="dark"] .was-validated .form-control.is-invalid:focus,
[data-bs-theme="dark"] .form-select.is-invalid:focus,
[data-bs-theme="dark"] .was-validated .form-select.is-invalid:focus,
[data-bs-theme="dark"] input.is-invalid:focus,
[data-bs-theme="dark"] .was-validated input.is-invalid:focus,
[data-bs-theme="dark"] textarea.is-invalid:focus,
[data-bs-theme="dark"] .was-validated textarea.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
    background-color: var(--chronos-input-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .form-control.is-valid,
[data-bs-theme="dark"] .form-select.is-valid,
[data-bs-theme="dark"] input.is-valid,
[data-bs-theme="dark"] textarea.is-valid {
    border-color: var(--bs-border-color) !important;
    background-color: var(--chronos-input-bg) !important;
    background-image: none !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .form-control.is-valid:focus,
[data-bs-theme="dark"] .form-select.is-valid:focus,
[data-bs-theme="dark"] input.is-valid:focus,
[data-bs-theme="dark"] textarea.is-valid:focus {
    border-color: var(--bs-border-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15) !important;
    background-color: var(--chronos-input-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .invalid-feedback {
    color: #ea868f !important;
}

[data-bs-theme="dark"] .valid-feedback {
    color: #75b798 !important;
}

/* IntlPhoneInput dark mode validation */
[data-bs-theme="dark"] .iti.is-invalid {
    border-color: #dc3545 !important;
}

[data-bs-theme="dark"] .iti.is-valid {
    border-color: #198754 !important;
}

/* ===== MODAL STYLES ===== */
/* Ensure modals appear above fixed navbar (z-index: 1030) and sidebar (z-index: 1000) */
.modal {
    z-index: 1060 !important;
}

.modal-backdrop {
    z-index: 1055 !important;
}

/* Bootstrap Dialog specific overrides */
.bootstrap-dialog {
    z-index: 1060 !important;
}

.bootstrap-dialog .modal-dialog {
    z-index: 1061 !important;
}

[data-bs-theme="dark"] .modal-content {
    background-color: var(--chronos-modal-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .modal-title {
    color: var(--bs-body-color) !important;
}

/* ===== DROPDOWN STYLES ===== */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--chronos-dropdown-bg) !important;
    border-color: var(--bs-border-color) !important;
    box-shadow: 0 0.5rem 1rem var(--chronos-shadow) !important;
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus,
[data-bs-theme="dark"] .dropdown-item.active {
    background-color: var(--chronos-sidebar-hover) !important;
    color: var(--bs-emphasis-color) !important;
}

[data-bs-theme="dark"] .dropdown-divider {
    border-color: var(--bs-border-color) !important;
}

/* Theme toggle dropdown specific styles */
.theme-toggle-dropdown {
    min-width: 8rem;
}

.theme-toggle-dropdown .dropdown-item {
    padding: 0.375rem 0.75rem;
}

/* Navbar admin cog — polished popover with icon ▸ label ▸ shortcut chip.
   Class lives on the <ul.dropdown-menu> emitted by Navbar.php. */
.admin-cog-dropdown {
    min-width: 280px;
    padding: 0.5rem;
    border-radius: 1rem;
    border: 1px solid var(--bs-border-color-translucent);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.admin-cog-dropdown .dropdown-item {
    border-radius: 0.625rem;
    padding: 0.6rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.admin-cog-dropdown .dropdown-item > i:first-child {
    width: 1.25rem;
    text-align: center;
    font-size: 1rem;
    opacity: 0.8;
}

.admin-cog-dropdown .dropdown-divider {
    margin: 0.25rem 0.25rem;
}

.shortcut-kbd {
    display: inline-flex;
    gap: 0.125rem;
    margin-left: auto;
}

.shortcut-kbd kbd {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    font-family: var(--bs-font-sans-serif);
    box-shadow: none;
    font-weight: 500;
}

[data-bs-theme="dark"] .admin-cog-dropdown {
    background-color: var(--chronos-dropdown-bg) !important;
    border-color: var(--bs-border-color) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* The global `[data-bs-theme="dark"] a:not(.btn)` rule (~line 1384)
   forces every <a> to --bs-link-color (blue), which beats the
   .dropdown-item colour rule because :not(.btn) adds class
   specificity. Pin the cog dropdown items back to the body colour
   with a higher-specificity rule. */
[data-bs-theme="dark"] .admin-cog-dropdown a.dropdown-item,
[data-bs-theme="dark"] .admin-cog-dropdown a.dropdown-item:hover,
[data-bs-theme="dark"] .admin-cog-dropdown a.dropdown-item:focus {
    color: var(--bs-body-color) !important;
}

/* The lead glyph in each cog dropdown item — bump to full opacity in
   dark mode so it reads cleanly against the dark dropdown bg. */
[data-bs-theme="dark"] .admin-cog-dropdown .dropdown-item > i:first-child {
    opacity: 1;
    color: var(--bs-body-color) !important;
}

/* Dark mode flips Bootstrap tooltip colours (light body, dark text), so
   the chip flips with it: dark text on translucent-dark bg gives high
   contrast against the now-light tooltip background. */
[data-bs-theme="dark"] .shortcut-kbd kbd {
    background: rgba(0, 0, 0, 0.18);
    color: #1a1a1a;
    border-color: rgba(0, 0, 0, 0.3);
}

/* Inside the admin cog dropdown the popover stays dark in dark mode
   (unlike tooltips which flip light), so the chip flips the other way:
   light text on a darker translucent bg gives the contrast back. */
[data-bs-theme="dark"] .admin-cog-dropdown .shortcut-kbd kbd {
    background: rgba(255, 255, 255, 0.08);
    color: var(--bs-body-color);
    border-color: rgba(255, 255, 255, 0.18);
}

/* ===== BUTTON STYLES ===== */
[data-bs-theme="dark"] .btn-light {
    background-color: var(--chronos-card-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .btn-outline-light {
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

/* A chip painted bg-{x}-subtle with text-{x} is the pairing Bootstrap's docs
   warn against: the full-strength hue on its own tint is 3.4–3.5:1 for
   success/primary and 1.5:1 for warning, in EITHER theme. The documented pair
   is text-{x}-emphasis, which is what these resolve to — one rule per hue
   rather than a sweep of the fifty-odd sites in templates and Go that build
   the class string. Light and dark both, because the emphasis tokens follow
   the theme. */
.bg-success-subtle.text-success { color: var(--bs-success-text-emphasis) !important; }
.bg-danger-subtle.text-danger { color: var(--bs-danger-text-emphasis) !important; }
.bg-warning-subtle.text-warning { color: var(--bs-warning-text-emphasis) !important; }
.bg-info-subtle.text-info { color: var(--bs-info-text-emphasis) !important; }
.bg-primary-subtle.text-primary { color: var(--bs-primary-text-emphasis) !important; }
.bg-secondary-subtle.text-secondary,
.badge.bg-light.text-secondary { color: var(--bs-secondary-text-emphasis) !important; }

/* --bs-danger on a striped row (#fafafa) is 4.3:1; the 600 shade of the same
   red keeps the alarm reading and clears it. Before the dark block, so the
   dark shade still wins there. */
.table .text-danger { color: #b02a37 !important; }
/* A link in a striped row: --bs-link-color on #fafafa is 4.3:1. Blue-600, as
   the person tabs and outline buttons already use; the dark theme's own
   anchor colour still wins there. */
.table a:not(.btn):not(.badge):not(.dropdown-item) { color: #0a58ca; }
/* --bs-success on an input-group addon (#f8f9fa) is 4.3:1. */
.input-group-text.text-success { color: var(--bs-success-text-emphasis) !important; }

/* Outline buttons on a card header (#f8f9fa) miss 4.5:1 by a hair — #6c757d
   reads 4.4:1 there, #0d6efd 4.2:1. One step darker on each keeps the hue. */
.btn-outline-secondary { --bs-btn-color: #5c636a; }
.btn-outline-primary { --bs-btn-color: #0a58ca; --bs-btn-border-color: #0a58ca; }

/* Bootstrap's dark theme re-colours the body, links and the -subtle/-emphasis
   tokens, but NOT the .text-{success,danger,secondary} utilities nor the
   .btn-outline-{primary,danger,success} variants: those keep the light-theme
   hue, which on a dark card is 2.7–3.0:1 (Lighthouse color-contrast on every
   dark page of the 2026-09-17 sweep — 47 .text-danger cells on /people
   alone). The -text-emphasis tokens are the same hues at the readable dark
   tint (#75b798, #ea868f, #a7acb1, #6ea8fe). Icons that carry their own
   dark override (monitoring-board.css) are more specific and keep theirs. */
[data-bs-theme="dark"] .text-success { color: var(--bs-success-text-emphasis) !important; }
[data-bs-theme="dark"] .text-danger { color: var(--bs-danger-text-emphasis) !important; }
[data-bs-theme="dark"] .text-secondary { color: var(--bs-secondary-text-emphasis) !important; }

[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--bs-primary-text-emphasis);
    --bs-btn-border-color: var(--bs-primary-text-emphasis);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0a58ca;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a58ca;
}

[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-color: var(--bs-danger-text-emphasis);
    --bs-btn-border-color: var(--bs-danger-text-emphasis);
}

[data-bs-theme="dark"] .btn-outline-success {
    --bs-btn-color: var(--bs-success-text-emphasis);
    --bs-btn-border-color: var(--bs-success-text-emphasis);
}

/* A checked outline-primary label and an active pill carry white on the
   darker blue, like the person tabs — #fff on #0d6efd is 3.7:1. */
[data-bs-theme="dark"] .btn-check:checked + .btn-outline-primary,
[data-bs-theme="dark"] .btn-check:active + .btn-outline-primary {
    color: #fff !important;
    background-color: #0a58ca !important;
    border-color: #0a58ca !important;
}

[data-bs-theme="dark"] .nav-pills .nav-link.active {
    color: #fff !important;
    background-color: #0a58ca !important;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-color: var(--bs-emphasis-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--bs-border-color);
}

/* CHRON-3042: a.btn-primary text was being hijacked by the generic
   `[data-bs-theme="dark"] a { color: ... !important; }` rule below,
   making the label render as link-blue/grey instead of white. */
[data-bs-theme="dark"] a.btn-primary,
[data-bs-theme="dark"] a.btn-primary:hover,
[data-bs-theme="dark"] a.btn-primary:focus,
[data-bs-theme="dark"] a.btn-primary:active {
    color: #fff !important;
}

/* CHRON-3043: keep `text-dark` legible on solid `bg-warning` (yellow) badges
   in dark mode. Bootstrap 5.3 swaps `.text-dark` to a light colour under
   [data-bs-theme="dark"], which destroys contrast on a bright yellow bg. */
[data-bs-theme="dark"] .bg-warning.text-dark {
    color: #212529 !important;
}

/* Same defect as CHRON-3043, applied to `bg-info` badges (Order Type on the
   dashboard, Protected Person badge). `.text-dark` flips to a light colour
   under [data-bs-theme="dark"], destroying contrast on the bright cyan bg. */
[data-bs-theme="dark"] .bg-info.text-dark {
    color: #212529 !important;
}

/* ===== ALERT STYLES ===== */
[data-bs-theme="dark"] .alert {
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .alert-light {
    background-color: var(--chronos-card-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

/* The .alert-success and .alert-danger overrides above hard-code light-mode
   hex values, so they stay pale-blue / pale-pink in dark mode and any FA icons
   inside them become invisible. Pair them with dark-mode equivalents that keep
   a full 1px semantic border as the visual anchor — matching the light-mode
   full-border treatment (no colored border-left stripe; see DESIGN.md §6). */
[data-bs-theme="dark"] .alert-success {
    background-color: rgba(13, 202, 240, 0.15) !important;
    border: 1px solid rgba(13, 202, 240, 0.5) !important;
    color: #9eeaf9 !important;
}

[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.15) !important;
    border: 1px solid rgba(220, 53, 69, 0.5) !important;
    color: #ea868f !important;
}

/* ===== BREADCRUMB STYLES ===== */
[data-bs-theme="dark"] .breadcrumb-item,
[data-bs-theme="dark"] .breadcrumb-item a {
    color: var(--bs-body-color) !important;
}

/* ===== Modern breadcrumb (ModernHeaderWidget) ===== */
/* Scoped to the .modern-breadcrumb class (added to any <nav> that opts
   in) so this can't leak into legacy breadcrumb usage. Both the
   modernHeader and hubHeader partials add the class to their <nav>. */
/* Chevron uses FontAwesome 7 Pro (loaded globally) at fa-light weight
   for a refined modern look. U+203A '›' kept as the breadcrumb-divider
   variable so any non-modern breadcrumb still sees a sensible fallback. */
.modern-breadcrumb .breadcrumb {
    --bs-breadcrumb-divider: '\203A';
    background: transparent;
    padding: 0;
    margin-bottom: .25rem;
    /* font-size: .9375rem; ~15px — matches the button/row rhythm */
    align-items: center;
}
.modern-breadcrumb .breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
}
.modern-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro";
    font-weight: 300; /* fa-light */
    content: "\f054"; /* chevron-right */
    color: var(--bs-secondary-color, #6c757d);
    padding: 0 .55rem;
    /* font-size: .8rem; scales with the larger crumb text */
    line-height: 1;
    align-self: center;
    float: none;
    -webkit-font-smoothing: antialiased;
}
.modern-breadcrumb .breadcrumb-item a {
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: none;
    transition: color .15s ease-in-out;
}
.modern-breadcrumb .breadcrumb-item a:hover,
.modern-breadcrumb .breadcrumb-item a:focus-visible {
    color: var(--bs-primary, #0d6efd);
    text-decoration: underline;
}
.modern-breadcrumb .breadcrumb-item.active {
    color: var(--bs-body-color);
    font-weight: 500;
}
/* Dark mode polish — override the legacy global rules above for the modern surface. */
[data-bs-theme="dark"] .modern-breadcrumb .breadcrumb {
    background-color: transparent !important;
}
[data-bs-theme="dark"] .modern-breadcrumb .breadcrumb-item a {
    color: var(--bs-secondary-color, #adb5bd) !important;
}
[data-bs-theme="dark"] .modern-breadcrumb .breadcrumb-item a:hover,
[data-bs-theme="dark"] .modern-breadcrumb .breadcrumb-item a:focus-visible {
    color: var(--bs-info, #6ea8fe) !important;
}
[data-bs-theme="dark"] .modern-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-secondary-color, #adb5bd);
}
/* RTL: flip the chevron. */
[dir="rtl"] .modern-breadcrumb .breadcrumb {
    --bs-breadcrumb-divider: '\2039'; /* ‹ U+2039 (fallback) */
}
[dir="rtl"] .modern-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "\f053"; /* fa-chevron-left */
}

/* Hub-driven landing pages (admin/index, operations/index,
   cliente/configurationPanel, admin/systemConfig) wrap their
   breadcrumb + header strip in a .modern-card-header so they render
   with the same visual frame as ModernHeader(record). */
.modern-card-header {
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, 0.85);
    padding: 0.75rem 1rem;
}
[data-bs-theme="dark"] .modern-card-header {
    background: var(--bs-body-bg);
    border-color: rgba(255, 255, 255, .08);
}

/* Record-mode header: standalone card (no filter widget below). Closes
   the bottom-open frame the default grid mode uses and adds breathing
   room before the content. The class is added by ModernHeaderWidget
   when constructed with `'mode' => 'record'`. */
.modern-header.modern-header-record {
    border-radius: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    margin-bottom: 1rem;
}
[data-bs-theme="dark"] .modern-header.modern-header-record {
    border-bottom-color: rgba(255, 255, 255, .08);
}

/* Sticky-aware scroll padding so anchor links / scrollIntoView / focus()
   land below the global fixed navbar + the sticky .modern-header (+ the
   sticky .modern-filter-widget if present) instead of being covered by
   them. CSS variables are set dynamically by the small script in
   modernHeader.php; the static fallbacks cover the common case. */
:root {
    --modern-header-sticky-top: 57px;   /* navbar height */
    --modern-filter-sticky-top: 134px;  /* navbar + header */
    --modern-sticky-offset: 200px;      /* navbar + header + filter + breather */
}
html {
    scroll-padding-top: var(--modern-sticky-offset);
}

/* Combined sticky shelf: the filter joins .modern-header so both stay
   pinned together while the grid scrolls. Pins at navbar + header
   bottom (the JS keeps --modern-filter-sticky-top accurate even when
   header height changes — e.g. mobile button wrap, breadcrumb toggle).
   `!important` is needed because modern-filter.css declares
   `.modern-filter-widget { position: relative }` later in the cascade. */
.modern-filter-widget {
    position: sticky !important;
    top: var(--modern-filter-sticky-top, 134px) !important;
    z-index: 1019; /* below header (1020) and navbar (1030), above grid */
    background-color: var(--bs-body-bg, #fff);
    /* Match the glass shelf the header uses for visual continuity. */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    /* Pull up so it sits flush under the header — removes the 22px gap
       the filter widget's own top margin creates. */
    margin-top: 0 !important;
}
[data-bs-theme="dark"] .modern-filter-widget {
    background-color: var(--bs-body-bg) !important;
}

/* Dialog context: the main-layout sticky offset (navbar +
   .modern-header) is meaningless inside an EBootstrapDialog modal —
   there is no fixed chrome above the modal body. Without this
   override the filter bar sticks 134px down from the modal viewport
   top, landing on top of the grid rows. Restore relative flow inside
   modals so the filter bar renders normally above the grid. */
.modal .modern-filter-widget {
    position: relative !important;
    top: auto !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: transparent;
}
[data-bs-theme="dark"] .modal .modern-filter-widget {
    background-color: transparent !important;
}

/* ===== LIST GROUP STYLES ===== */
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--chronos-card-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

/* ===== PAGINATION STYLES ===== */
[data-bs-theme="dark"] .page-link {
    background-color: var(--chronos-card-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .page-item.active .page-link {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* ===== PROGRESS BAR STYLES ===== */
[data-bs-theme="dark"] .progress {
    background-color: var(--bs-border-color) !important;
}

/* ===== TABS NAVIGATION ===== */
[data-bs-theme="dark"] .nav-tabs .nav-link,
[data-bs-theme="dark"] .nav-pills .nav-link {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--chronos-card-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

/* ===== TEXT AND HEADING STYLES ===== */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .h1,
[data-bs-theme="dark"] .h2,
[data-bs-theme="dark"] .h3,
[data-bs-theme="dark"] .h4,
[data-bs-theme="dark"] .h5,
[data-bs-theme="dark"] .h6 {
    color: var(--bs-body-color) !important;
}

/* Generic dark-mode anchor colour — excludes .btn so anchor-buttons
   (<a class="btn …">) keep their Bootstrap --bs-btn-color (light grey
   for outline-secondary, white for filled variants). Without this
   exclusion the !important here wins the cascade against
   .btn-outline-secondary's colour rule above. */
[data-bs-theme="dark"] a:not(.btn) {
    color: var(--bs-link-color) !important;
}

[data-bs-theme="dark"] a:not(.btn):hover {
    color: var(--bs-link-hover-color) !important;
}

/* ===== ADMIN LTE SPECIFIC OVERRIDES ===== */
[data-bs-theme="dark"] .content-wrapper,
[data-bs-theme="dark"] .box,
[data-bs-theme="dark"] .info-box,
[data-bs-theme="dark"] .small-box {
    background-color: var(--chronos-card-bg) !important;
    color: var(--bs-body-color) !important;
}

/* ===== LEGACY WIDGET OVERRIDES ===== */
[data-bs-theme="dark"] .widget,
[data-bs-theme="dark"] .widget-header,
[data-bs-theme="dark"] .widget-content {
    background-color: var(--chronos-card-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

/* ===== DHTMLX COMPONENTS OVERRIDE ===== */
[data-bs-theme="dark"] .dhtmlxgrid_material,
[data-bs-theme="dark"] .dhtmlxcalendar_material {
    background-color: var(--chronos-card-bg) !important;
    color: var(--bs-body-color) !important;
}

/* ===== NOTIFICATION STYLES ===== */
[data-bs-theme="dark"] .noty_theme__relax.noty_type__alert,
[data-bs-theme="dark"] .noty_theme__relax.noty_type__error,
[data-bs-theme="dark"] .noty_theme__relax.noty_type__warning,
[data-bs-theme="dark"] .noty_theme__relax.noty_type__information,
[data-bs-theme="dark"] .noty_theme__relax.noty_type__success {
    color: var(--bs-body-color) !important;
}

/* ===== SEARCH AND FILTER COMPONENTS ===== */
[data-bs-theme="dark"] .search-form,
[data-bs-theme="dark"] .filter-form {
    background-color: var(--chronos-card-bg) !important;
    border-color: var(--bs-border-color) !important;
}

/* ===================================================================
   SECTION 3: JQUERY UI AUTOCOMPLETE THEME SUPPORT
   ================================================================ */

/* Light mode autocomplete styling */
[data-bs-theme="light"] .ui-autocomplete {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    color: #212529 !important;
    max-height: 600px;
    overflow-y: auto;
    z-index: 9999;
}

[data-bs-theme="light"] .ui-autocomplete .ui-menu-item {
    background-color: transparent !important;
    border: none !important;
    color: #212529 !important;
    padding: 0;
}

[data-bs-theme="light"] .ui-autocomplete .ui-menu-item div {
    padding: 0.25rem 0.75rem !important;
    color: #212529 !important;
    border-radius: 0.25rem;
    margin: 0.03125rem;
    min-height: 1.5rem;
    display: flex;
    align-items: center;
}

[data-bs-theme="light"] .ui-autocomplete .ui-menu-item:hover div,
[data-bs-theme="light"] .ui-autocomplete .ui-state-focus,
[data-bs-theme="light"] .ui-autocomplete .ui-state-active {
    background-color: #e9ecef !important;
    color: #212529 !important;
    border: none !important;
}

[data-bs-theme="light"] .ui-autocomplete-category {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    border-bottom: 1px solid #dee2e6 !important;
    font-weight: 600 !important;
    padding: 0.1875rem 0.75rem !important;
    margin: 0 !important;
}

/* Badge styling in autocomplete - light mode */
[data-bs-theme="light"] .ui-autocomplete .badge {
    color: white !important;
}

[data-bs-theme="light"] .ui-autocomplete .badge.bg-warning {
    color: black !important;
}

/* Highlighted text in search results - light mode */
[data-bs-theme="light"] .ui-autocomplete strong {
    color: #212529 !important;
    background-color: rgba(13, 110, 253, 0.1) !important;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
}

/* No results message styling - light mode */
[data-bs-theme="light"] .ui-autocomplete .text-muted {
    color: #6c757d !important;
    font-style: italic;
}

/* Dark mode autocomplete styling */
[data-bs-theme="dark"] .ui-autocomplete {
    background-color: var(--chronos-dropdown-bg) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem var(--chronos-shadow) !important;
    color: var(--bs-body-color) !important;
    max-height: 600px;
    overflow-y: auto;
    z-index: 9999;
}

[data-bs-theme="dark"] .ui-autocomplete .ui-menu-item {
    background-color: transparent !important;
    border: none !important;
    color: var(--bs-body-color) !important;
    padding: 0;
}

[data-bs-theme="dark"] .ui-autocomplete .ui-menu-item div {
    padding: 0.25rem 0.75rem !important;
    color: var(--bs-body-color) !important;
    border-radius: 0.25rem;
    margin: 0.03125rem;
    min-height: 1.5rem;
    display: flex;
    align-items: center;
}

[data-bs-theme="dark"] .ui-autocomplete .ui-menu-item:hover div,
[data-bs-theme="dark"] .ui-autocomplete .ui-state-focus,
[data-bs-theme="dark"] .ui-autocomplete .ui-state-active {
    background-color: var(--chronos-sidebar-hover) !important;
    color: var(--bs-emphasis-color) !important;
    border: none !important;
}

[data-bs-theme="dark"] .ui-autocomplete-category {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-secondary-color) !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
    font-weight: 600 !important;
    padding: 0.1875rem 0.75rem !important;
    margin: 0 !important;
}

/* Badge styling in autocomplete - dark mode */
[data-bs-theme="dark"] .ui-autocomplete .badge {
    color: white !important;
}

[data-bs-theme="dark"] .ui-autocomplete .badge.bg-warning {
    color: black !important;
}

/* Highlighted text in search results - dark mode */
[data-bs-theme="dark"] .ui-autocomplete strong {
    color: var(--bs-emphasis-color) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
}

/* No results message styling - dark mode */
[data-bs-theme="dark"] .ui-autocomplete .text-muted {
    color: var(--bs-secondary-color) !important;
    font-style: italic;
}

/* Dashboard location badge icons - dark mode */
[data-bs-theme="dark"] .dashboard-location-badges .badge i {
    color: inherit !important;
}

[data-bs-theme="dark"] .dashboard-location-badges .badge .text-primary {
    color: var(--bs-link-color) !important;
}

[data-bs-theme="dark"] .dashboard-location-badges .badge .text-danger {
    color: var(--bs-danger) !important;
}

/* ModernTableWidget / EnhancedEntityManagerWidget card-header icon:
   .text-primary is hardcoded in PHP and stays at the saturated brand blue
   (#0d6efd) in dark mode because Bootstrap 5.3 doesn't re-theme --bs-primary.
   Inherit the card-title text color (var(--bs-body-color) in dark mode,
   from the .card-title override above) so the icon matches the title. */
[data-bs-theme="dark"] .modern-table-widget .card-header .card-title i.text-primary {
    color: inherit !important;
}

/* ===================================================================
   SECTION 4: ADDITIONAL THEME SUPPORT STYLES
   ================================================================ */

/* ===== LOADING AND OVERLAY COMPONENTS ===== */
[data-bs-theme="dark"] .loading-overlay {
    background-color: rgba(33, 37, 41, 0.85) !important;
}

[data-bs-theme="dark"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* ===== ICON COLORS ===== */
[data-bs-theme="dark"] .fas,
[data-bs-theme="dark"] .far,
[data-bs-theme="dark"] .fab,
[data-bs-theme="dark"] .fal,
[data-bs-theme="dark"] .fa {
    color: var(--bs-body-color) !important;
}

/* Icons inside buttons, links, and badges should inherit color so
   utilities like .text-dark on .bg-warning keep icon and text in sync. */
[data-bs-theme="dark"] button .fas,
[data-bs-theme="dark"] button .far,
[data-bs-theme="dark"] button .fab,
[data-bs-theme="dark"] button .fal,
[data-bs-theme="dark"] button .fa,
[data-bs-theme="dark"] a .fas,
[data-bs-theme="dark"] a .far,
[data-bs-theme="dark"] a .fab,
[data-bs-theme="dark"] a .fal,
[data-bs-theme="dark"] a .fa,
[data-bs-theme="dark"] .badge .fas,
[data-bs-theme="dark"] .badge .far,
[data-bs-theme="dark"] .badge .fab,
[data-bs-theme="dark"] .badge .fal,
[data-bs-theme="dark"] .badge .fa {
    color: inherit !important;
}

/* ===== UTILITY CLASS OVERRIDES ===== */
[data-bs-theme="dark"] .text-dark {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .border-end {
    border-color: var(--chronos-sidebar-border) !important;
}

/* ===== SCROLLBAR STYLING ===== */
[data-bs-theme="dark"] {
    scrollbar-color: var(--bs-border-color);
}

[data-bs-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: var(--bs-border-color);
    border-radius: 4px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: var(--bs-secondary-color);
}

/* ===== TEXT SELECTION ===== */
[data-bs-theme="dark"] ::selection {
    background-color: var(--bs-primary);
    color: white;
}

/* ===== ACCESSIBILITY ===== */
[data-bs-theme="dark"] *:focus-visible {
    outline: 2px solid #6ea8fe;
    outline-offset: 2px;
}

/* ===================================================================
   SECTION 5: RESPONSIVE DESIGN & RTL SUPPORT
   ================================================================ */

/* RTL support */
[dir="rtl"] .form-label.required::after,
[dir="rtl"] .form-check-label.required::after {
    content: "* ";
}

[dir="rtl"] .btn i {
    margin-right: 0;
}

[dir="ltr"] .btn i {
    margin-left: 0;
}

/* Modern header RTL/LTR alignment fixes */

/* OAuth buttons alignment fix - remove unwanted padding */
.auth-services {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.auth-services li {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.auth-services .auth-link {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Fix for RTL mode OAuth buttons */
[dir="rtl"] .auth-services .me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .device-form-actions {
        position: static;
        box-shadow: none;
        backdrop-filter: none;
        background: transparent;
    }

    .device-form-actions .d-flex {
        flex-direction: column;
        gap: 1rem;
    }

    .device-form-actions .btn-group {
        justify-content: center;
    }

    .card .card-body {
        padding: 1rem;
    }
}

/* ===================================================================
   SECTION 6: SMOOTH TRANSITIONS & ANIMATIONS
   ================================================================ */

/* Global color scheme and transitions */
html {
    transition: color-scheme 0.2s ease-in-out;
}

html *,
[data-bs-theme="dark"] * {
    transition: background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out,
    color 0.2s ease-in-out;
}

/* Override transition for specific elements that shouldn't animate */
.fade,
.collapse,
.modal,
.dropdown-toggle,
[data-bs-toggle],
input:focus,
textarea:focus,
select:focus,
.btn:active,
.btn.active {
    transition: none !important;
}

/* ===================================================================
   SECTION 7: LEGACY COMPATIBILITY & CLEANUP
   ================================================================ */

/* Override any conflicting styles from existing dark-mode classes */
[data-bs-theme="dark"] .legacy-dark-mode-override {
    /* Let Bootstrap 5.3+ handle dark mode natively with minimal custom overrides */
    color: inherit;
    background-color: inherit;
}

/* Remove legacy dark mode classes that might conflict */
[data-bs-theme="dark"] .dark-mode,
[data-bs-theme="dark"] .dark-theme {
    all: unset;
}

/* Bootstrap 5.3+ handles most dark mode automatically, only specific CHRONOS overrides needed */
[data-bs-theme="dark"] .chronos-specific-override {
    /* Custom CHRONOS styling that Bootstrap doesn't cover */
    background-color: var(--chronos-card-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* ===================================================================
   MODERN HEADER WIDGET BUTTONS - FORCE CONSISTENT STYLING
   ================================================================ */

/* Override any conflicting button styles - very specific selectors */
.modern-header .btn-group .btn,
.modern-header .btn-group a.btn,
.modern-header .btn-group button.btn,
.modern-header a.btn-outline-secondary,
.modern-header button.btn-outline-secondary {
    background-color: transparent !important;
    border-color: #6c757d !important;
    color: #6c757d !important;
    text-decoration: none !important;
    border-radius: 0.375rem !important;
    font-weight: 500 !important;
    padding: 0.5rem 1rem !important;
    margin-right: 0.25rem !important;
    border: 1px solid #6c757d !important;
    transition: all 0.15s ease-in-out !important;
}

.modern-header .btn-group .btn:hover,
.modern-header .btn-group a.btn:hover,
.modern-header .btn-group button.btn:hover,
.modern-header a.btn-outline-secondary:hover,
.modern-header button.btn-outline-secondary:hover {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2) !important;
}

/* Force icon colors */
.modern-header .btn i,
.modern-header .btn-group .btn i,
.modern-header a.btn i,
.modern-header button.btn i {
    color: inherit !important;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .modern-header .btn-group .btn,
[data-bs-theme="dark"] .modern-header .btn-group a.btn,
[data-bs-theme="dark"] .modern-header .btn-group button.btn,
[data-bs-theme="dark"] .modern-header a.btn-outline-secondary,
[data-bs-theme="dark"] .modern-header button.btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--bs-body-color) !important;
    background-color: transparent !important;
}

[data-bs-theme="dark"] .modern-header .btn-group .btn:hover,
[data-bs-theme="dark"] .modern-header .btn-group a.btn:hover,
[data-bs-theme="dark"] .modern-header .btn-group button.btn:hover,
[data-bs-theme="dark"] .modern-header a.btn-outline-secondary:hover,
[data-bs-theme="dark"] .modern-header button.btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
}

/* ===================================================================
   SECTION 8: PRINT STYLES
   ================================================================ */

/* Print styles */
@media print {
    .device-form-actions {
        display: none;
    }

    .card {
        box-shadow: none;
        border: 1px solid #dee2e6;
    }

    .btn {
        display: none;
    }

    /* Ensure good contrast for printing */
    [data-bs-theme="dark"] * {
        background-color: white !important;
        color: black !important;
    }
}

/* ===================================================================
   SIMPLE TOGGLE SWITCH (Replaces tzCheckbox)
   ================================================================ */

/* Form check container improvements */
.form-check {
    padding-left: 0 !important;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-direction: row;
}

/* Toggle switch positioning and alignment */
.form-check .form-check-input {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    position: relative;
    flex-shrink: 0;
    order: 1;
}

/* Form check label positioning */
.form-check .form-check-label {
    display: inline-block;
    padding-left: 0 !important;
    margin-bottom: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    cursor: pointer;
    flex: 1;
    order: 2;
}

/* Toggle switch styling */
.form-check-input.toggle-switch {
    width: 3rem;
    height: 1.5rem;
    border-radius: 1.5rem;
    background-image: none;
    background-color: var(--bs-secondary-bg);
    border: 2px solid var(--bs-border-color);
    position: relative;
    appearance: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-check-input.toggle-switch:checked {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

.form-check-input.toggle-switch::before {
    content: '';
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1rem;
    height: 1rem;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.form-check-input.toggle-switch:checked::before {
    transform: translateX(1.5rem);
}

.form-check-input.toggle-switch:focus {
    box-shadow: 0 0 0 0.125rem rgba(var(--bs-success-rgb), 0.25);
}

/* Dark mode support */
[data-bs-theme="dark"] .form-check-input.toggle-switch {
    background-color: var(--bs-gray-700) !important;
    border-color: var(--bs-gray-600) !important;
}

[data-bs-theme="dark"] .form-check-input.toggle-switch:checked {
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
}

[data-bs-theme="dark"] .form-check-input.toggle-switch::before {
    background: var(--bs-gray-100);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .form-check-input.toggle-switch {
        width: 2.5rem;
        height: 1.25rem;
    }

    .form-check-input.toggle-switch::before {
        width: 0.875rem;
        height: 0.875rem;
    }

    .form-check-input.toggle-switch:checked::before {
        transform: translateX(1.25rem);
    }

    [dir="rtl"] .form-check-input.toggle-switch:checked::before {
        transform: translateX(-1.25rem);
    }
}

/* ===================================================================
   MODERNHEADER WIDGET SPECIFIC OVERRIDES
   ================================================================== */

/* Force consistent button sizing in split button groups */
.modern-header .btn-group .btn,
.modern-header .btn-group .dropdown-toggle-split {
    /* Override any external CSS that might affect button width */
    width: auto !important;
    min-width: 44px !important;
    padding: 0.375rem 0.75rem !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    font-size: 1rem !important;
}

/* Specific Bootstrap dropdown-toggle-split override */
.modern-header .btn-group .dropdown-toggle-split {
    /* Force Bootstrap's default split button padding to match regular buttons */
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Override Bootstrap's responsive button sizing that might interfere */
@media (max-width: 576px) {
    .modern-header .btn-group .btn,
    .modern-header .btn-group .dropdown-toggle-split {
        padding: 0.375rem 0.75rem !important;
        font-size: 1rem !important;
        min-width: 44px !important;
    }
}

/* Ensure both buttons have identical content width calculation */
.modern-header .btn-group .btn {
    /* Force consistent text and icon spacing */
    white-space: nowrap !important;
}

.modern-header .btn-group .dropdown-toggle-split {
    /* Ensure dropdown toggle has same content area as main button */
    min-width: 44px !important;
}

/* This is the corrected version now in the main file */
.modern-header .btn-group button.btn {
    margin-inline-end: 0.25rem !important;
}

/* TomSelect text — Bootstrap-native body colour, mode-aware via tokens */
.ts-control,
.ts-control input,
.ts-dropdown {
    color: var(--bs-body-color) !important;
}

/* TomSelect placeholder — Bootstrap-native secondary colour, mode-aware.
   Without this rule the input would fall back to the browser default
   (~50 % opacity of the inherited text colour), which fails WCAG AA in
   dark mode. */
.ts-control input::placeholder {
    color: var(--bs-secondary-color) !important;
    opacity: 1 !important;
}

[data-bs-theme="dark"] .ts-wrapper.multi .ts-control > div {
    background: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .ts-wrapper.multi .ts-control > div.active {
    background: var(--bs-primary) !important;
    color: #fff !important;
}

#GrupoUsuario_menus-ts-control::placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}

.tom-select-wrapper .is-valid {
    background-size: 1.1rem !important;
}

.tom-select-wrapper .is-valid .item {
    margin-bottom: 0.5rem !important;
}

input:disabled {
    opacity: 0.65 !important;
}

.table-responsive-wrapper .responsive-table-controls .dropdown-menu.dropdown-menu-end {
    margin-left: 0 !important;
    margin-right: 0 !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    top: 100% !important;
}

html[dir="rtl"] .table-responsive-wrapper .responsive-table-controls {
    flex-direction: row !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

html[dir="rtl"] .table-responsive-wrapper .responsive-table-controls .dropdown-menu.dropdown-menu-end {
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}

/* ─────────────────────────────────────────────────────────────────────
   Header-toolbar dropdowns (Show/Hide Columns, Saved Views, Page Limit)
   render INSIDE .modern-header, which carries `backdrop-filter: blur()`.
   Per spec, a non-`none` backdrop-filter makes the element a containing
   block for `position: fixed` descendants — exactly like `transform`.
   Bootstrap/Popper opens these menus with its `fixed` strategy and
   computes the offset against the VIEWPORT, but the browser then renders
   that offset relative to .modern-header's top instead, dropping the menu
   down by the header's distance from the viewport top (~64px) — the
   visible gap. The older `.responsive-table-controls` rule above no
   longer matches because the controls now live in the header toolbar,
   not inside `.table-responsive-wrapper`.

   Fix: neutralise Popper's inline `position: fixed` + transform so the
   menu falls back to normal absolute positioning relative to its
   `.dropdown` (position: relative) parent — immune to the containing-block
   shift regardless of backdrop-filter. .modern-header has no overflow
   clipping, so the menu is free to extend past it. ──────────────────── */
.modern-header .dropdown-menu.show {
    position: absolute !important;
    inset: auto !important;
    top: 100% !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 0.25rem !important;
}

.modern-header .dropdown-menu.dropdown-menu-end.show {
    right: 0 !important;
    left: auto !important;
}

html[dir="rtl"] .modern-header .dropdown-menu.dropdown-menu-end.show {
    left: 0 !important;
    right: auto !important;
}

/* ─────────────────────────────────────────────────────────────────────
   JToggleColumn — boolean toggles rendered in grid cells (e.g. the
   "Required Field" column on RemarkField grids). The widget inlines
   a green colour for the *checked* state but never sets one for the
   *unchecked* state, leaving the filled grey disk barely readable in
   dark mode and semantically muddy in light mode. Swap the off-state
   disk to a hollow ring (FA Pro renders fa-circle as a ring at weight
   400 and a disk at weight 900 — same codepoint) so off/on reads like
   an empty-checkbox / checked-checkbox pair instead of two coloured
   blobs. Lift the off-state colour to body-text so the ring is clearly
   visible against any surface.
   ──────────────────────────────────────────────────────────────────── */
.btn[data-toggle-state="unchecked"] .toggle-icon.fa-circle {
    font-weight: 400;
}

.toggle-icon {
    color: var(--bs-body-color);
}

.toggle-icon-checked {
    color: var(--bs-success) !important;
}

/* ===================================================================
   APEXCHARTS GLOBAL OVERRIDES
   - Card-header layering: keep Series / Filter / mode toggles
     above the ApexCharts toolbar (z-index: 11) and any internal
     chart elements. Without this, the Bootstrap dropdown that holds
     the Series checkboxes can render behind the chart when the
     widget is loaded via AJAX (e.g. person/dashboard -> Devices tab).
   - Dark mode: the bundled apexcharts.min.css only switches colours
     when the chart itself uses theme="dark". Chronos charts run with
     theme="light" so toolbar icons render at #6e8192 and the
     hamburger menu (Download SVG / PNG / CSV) renders on white with
     the dark-mode body text colour -> illegible. These rules bridge
     [data-bs-theme="dark"] to apex internals.
   ================================================================ */

.card:has(.apex-chart-wrapper) > .card-header,
.metric-card > .card-header {
    position: relative;
    z-index: 20;
}

.card:has(.apex-chart-wrapper) > .card-header .dropdown-menu,
.metric-card > .card-header .dropdown-menu {
    z-index: 1080;
}

/* Toolbar icon colours in dark mode.
   Apex injects dynamic, class-heavy rules at runtime
   (e.g. .apexcharts-theme-light .apexcharts-zoomin-icon:hover svg) that
   beat any single-class override on specificity. Because the chart's
   own theme stays "light" while Bootstrap is in dark mode, we have to
   force the fill/stroke with !important to survive both the resting
   state and the hover/selected overrides. */
[data-bs-theme="dark"] .apexcharts-toolbar svg {
    fill: var(--bs-body-color) !important;
}

/* The pan icon is outline-only and uses `stroke`, not `fill`. */
[data-bs-theme="dark"] .apexcharts-pan-icon svg {
    stroke: var(--bs-body-color) !important;
    fill: none !important;
}

/* Keep the selected tool's accent visible against the dark backdrop. */
[data-bs-theme="dark"] .apexcharts-zoom-icon.apexcharts-selected svg,
[data-bs-theme="dark"] .apexcharts-selection-icon.apexcharts-selected svg,
[data-bs-theme="dark"] .apexcharts-reset-zoom-icon.apexcharts-selected svg {
    fill: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .apexcharts-pan-icon.apexcharts-selected svg {
    stroke: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .apexcharts-menu {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .apexcharts-menu-item {
    color: var(--bs-body-color);
}

/* Beats apex's runtime ".apexcharts-theme-light .apexcharts-menu-item:hover"
   which has specificity (0,2,0) - matching with (0,2,0) here would tie and
   lose to source order, so we !important. */
[data-bs-theme="dark"] .apexcharts-menu-item:hover {
    background: var(--bs-secondary-bg) !important;
}

/* ── Report dialogs (Participation + Event) — TinyMCE containment ───
   The editor lives inside a scrollable Bootstrap dialog. Keep its
   toolbars within the modal width (wrap instead of overflowing) and
   make the menu/format dropdowns sit above the modal backdrop. The
   toolbar is non-sticky (set in the editor init) so it can't detach
   and break out on scroll. These rules live in the global sheet rather
   than the AJAX-loaded dialog partial, because a <style> block inside
   that partial breaks jQuery's script extraction when EBootstrapDialog
   injects it via .html(). */
.participation-report-prepare .tox-tinymce,
.event-report-prepare .tox-tinymce { max-width: 100%; }
.participation-report-prepare .tox .tox-toolbar__primary,
.participation-report-prepare .tox .tox-toolbar--scrolling,
.event-report-prepare .tox .tox-toolbar__primary,
.event-report-prepare .tox .tox-toolbar--scrolling { flex-wrap: wrap; }
.tox-tinymce-aux,
.tox.tox-tinymce-inline { z-index: 1060 !important; }

/* ===================================================================
   RECORD PAGER — prev/next record navigation on person/view
   A detached, viewport-fixed floating control docked bottom-centre at every
   screen size: a compact horizontal glass pill (‹ current / total ›). This
   placement keeps the record position visible at a glance while staying clear
   of the right-edge content cards (which run to the viewport edge at most
   widths) and the bottom-right chat FAB. It used to be an inline pill in the
   card header row, which competed for header width with the identity block and
   the section tabs. It lives outside the glass header — see the "relocate to
   <body>" note in views/person/view.php, needed because .person-control-center
   is a backdrop-filter + sticky containing block that would trap a
   position:fixed child. Prev = left, next = right (flipped under RTL); the
   Alt+Up / Alt+Down keyboard shortcuts still drive it (see the tooltips).
   See views/person/view.php and js/keyboard-shortcuts.js.
=================================================================== */
.record-pager-float {
    position: fixed;
    left: 50%;
    bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 1030; /* over content + sticky header (1020); under modals (1050+) */
    display: flex;
    pointer-events: none; /* wrapper is click-through; the pill re-enables below */
}

.record-pager {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: .15rem;
    padding: .25rem .4rem;
    border-radius: 999px;
    background: var(--chronos-glass-bg, rgba(255, 255, 255, 0.75));
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid var(--chronos-glass-border, rgba(0, 0, 0, 0.1));
    box-shadow: none;
    line-height: 1;
    pointer-events: auto;
    /* Recede at rest — it's a handy shortcut, not a headline control — and wake
       to full presence on hover or keyboard focus. :focus-within lights it up
       when a user tabs onto the prev/next links. */
    opacity: .4;
    transition: opacity .18s ease, box-shadow .18s ease;
}
.record-pager:hover,
.record-pager:focus-within {
    opacity: 1;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.record-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    color: var(--bs-body-color, #212529);
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
.record-pager-btn:hover,
.record-pager-btn:focus-visible {
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    outline: none;
}
.record-pager-btn.disabled {
    color: var(--bs-secondary-color, #6c757d);
    opacity: .4;
    pointer-events: none;
    cursor: default;
}

.record-pager-count {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
    padding: 0 .3rem;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color, #6c757d);
    user-select: none;
}
.record-pager-current {
    font-weight: 700;
    color: var(--bs-body-color, #212529);
}
.record-pager-total::before {
    content: "/";
    margin-inline-end: .25rem;
    opacity: .55;
}

/* Dark mode — lift the glass pill against the darker surface. */
[data-bs-theme="dark"] .record-pager {
    background: var(--chronos-glass-bg, rgba(33, 37, 41, 0.85));
    border-color: var(--chronos-glass-border, rgba(255, 255, 255, 0.15));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
[data-bs-theme="dark"] .record-pager-btn {
    color: var(--bs-body-color, #e9ecef);
}
[data-bs-theme="dark"] .record-pager-current {
    color: var(--bs-gray-100, #f8f9fa);
}

/* RTL — flip the chevrons so "previous" still points to the reading start. */
[dir="rtl"] .record-pager-btn > .fa-chevron-left,
[dir="rtl"] .record-pager-btn > .fa-chevron-right {
    transform: scaleX(-1);
}

/* Reduced motion — keep hover feedback instant. */
@media (prefers-reduced-motion: reduce) {
    .record-pager,
    .record-pager-btn {
        transition: none;
    }
}