/* ============================================
   APP GLOBAL STYLES
   Syncfusion component overrides and form validation
   
   Purpose: Custom styles for Syncfusion components and form validation
            that cannot be achieved with Tailwind CSS utilities alone.
   
   Organization:
   1. Form Validation States (lines 10-70)
   2. Syncfusion Component Overrides (lines 72-183)
   3. Syncfusion Popup Positioning (lines 184-221)
   4. Syncfusion Dark Mode Overrides (lines 222-349)
   5. Syncfusion Component-Specific Styles (lines 350+)
   
   Note: See css/README.md for complete CSS architecture documentation
   ============================================ */

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

/* Valid State */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #2E4E3F;
}

/* Invalid State */
.invalid {
    outline: 1px solid #dc3545;
}

[data-theme="dark"] .invalid {
    outline: 1px solid #f87171;
}

/* Validation Message */
.validation-message {
    color: #dc3545;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-top: 0.25rem;
    font-weight: 500;
}

[data-theme="dark"] .validation-message {
    color: #f87171;
}

/* Floating Label Placeholders */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Focus states for standard HTML inputs and selects */
input[type="datetime-local"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
select:focus {
    outline: 2px solid transparent;
    border-color: #4A6F5C;
    box-shadow: 0 0 0 3px rgba(74, 111, 92, 0.2);
}

[data-theme="dark"] input[type="datetime-local"]:focus,
[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="number"]:focus,
[data-theme="dark"] input[type="url"]:focus,
[data-theme="dark"] select:focus {
    border-color: #4A6F5C;
    box-shadow: 0 0 0 3px rgba(74, 111, 92, 0.3);
}

/* ============================================
   SYNCFUSION COMPONENT OVERRIDES
   Base styling for Syncfusion components
   
   Note: !important is used sparingly to override Syncfusion's
         inline styles. This is necessary for proper theming.
   ============================================ */

/* RichTextEditor Image Size Constraints */
.e-richtexteditor .e-rte-content img {
    max-width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
}

/* Syncfusion Input Controls - Alignment Fixes */
.e-input-group input,
.e-input-group textarea,
.e-input-group.e-control-wrapper input,
.e-float-input input,
.e-float-input textarea {
    padding-left: 12px !important;
    padding-right: 12px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.01em;
    font-size: 1rem;
}

.e-input-group,
.e-input-group.e-control-wrapper,
.e-float-input {
    padding: 0 !important;
}

.e-input-group.e-control-wrapper.e-input-focus input,
.e-input-group.e-input-focus input {
    padding-left: 12px !important;
}

/* Focus states for all Syncfusion inputs */
.e-input-group.e-input-focus,
.e-input-group.e-control-wrapper.e-input-focus,
.e-float-input.e-input-focus {
    border-color: #4A6F5C !important;
    box-shadow: 0 0 0 0.2rem rgba(74, 111, 92, 0.25);
}

[data-theme="dark"] .e-input-group.e-input-focus,
[data-theme="dark"] .e-input-group.e-control-wrapper.e-input-focus,
[data-theme="dark"] .e-float-input.e-input-focus {
    border-color: #4A6F5C !important;
    box-shadow: 0 0 0 0.2rem rgba(74, 111, 92, 0.4);
}

.e-datepicker.e-input-group input,
.e-ddl.e-input-group input,
.e-numerictextbox.e-input-group input {
    padding-left: 12px !important;
    padding-right: 32px !important;
}

.e-multiselect.e-input-group .e-multi-select-wrapper,
.e-combobox.e-input-group input {
    padding-left: 12px !important;
    line-height: 1.6 !important;
    font-size: 1rem;
    letter-spacing: 0.01em;
}

/* Hide magnifying glass icon in Syncfusion grid search boxes */
.e-grid .e-toolbar .e-search-wrapper .e-input-group-icon.e-search-icon {
    display: none !important;
}

/* Fix grid line alignment issues */
.e-grid .e-gridheader,
.e-grid .e-gridcontent {
    border-color: #dee2e6;
}

.e-grid .e-headercell,
.e-grid .e-rowcell {
    border-color: #dee2e6;
    border-width: 1px;
    padding: 0.75rem;
    line-height: 1.5;
    font-size: 0.9375rem;
}

.e-grid .e-headercell {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.e-grid .e-row {
    border-color: #dee2e6;
}

/* Syncfusion Popup Positioning and Z-Index Fixes */
.e-popup-wrapper,
.e-datetime-wrapper {
    position: relative;
}

.e-calendar.e-popup .e-content,
.e-datepicker.e-popup .e-calendar .e-content {
    max-height: 350px;
    overflow-y: auto;
}

.e-timepicker.e-popup .e-list-parent {
    max-height: 300px;
    overflow-y: auto;
}

/* ============================================
   SYNCFUSION POPUP POSITIONING - PURE CSS
   Fixed positioning with proper stacking and styling
   ============================================ */

/* Date/Time Pickers - position managed by syncfusion-popup-scroll-fix.js */
.e-datepicker.e-popup,
.e-timepicker.e-popup,
.e-datetimepicker.e-popup,
.e-calendar.e-popup {
    z-index: var(--z-popup) !important;
    position: fixed !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    transform: none !important; /* Reset transforms for JS positioning */
}

/* Dropdown Lists, ComboBoxes, AutoComplete, MultiSelect - position managed by syncfusion-popup-scroll-fix.js */
.e-dropdownlist.e-popup,
.e-ddl.e-popup,
.e-autocomplete.e-popup,
.e-multiselect.e-popup,
.e-combobox.e-popup {
    z-index: var(--z-popup) !important;
    position: fixed !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    transform: none !important; /* Reset transforms for JS positioning */
    max-height: 300px !important; /* Prevent popups from being too tall */
    overflow-y: auto !important;
}

/* Generic dropdown popup - catch-all for any popup
   Note: Position is managed by syncfusion-popup-scroll-fix.js for scroll alignment */
.e-dropdown-popup,
.e-popup {
    z-index: var(--z-popup) !important;
    position: fixed !important;
    min-width: 220px;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    /* margin-top removed - positioning handled by JavaScript for scroll alignment */
    transform: none !important; /* Reset transforms for JS positioning */
}

/* Ensure popups stay within viewport */
.e-popup,
.e-ddl.e-popup,
.e-dropdownlist.e-popup,
.e-autocomplete.e-popup,
.e-multiselect.e-popup,
.e-combobox.e-popup,
.e-datepicker.e-popup,
.e-timepicker.e-popup,
.e-datetimepicker.e-popup {
    max-width: calc(100vw - 32px) !important; /* Leave 16px margin on each side */
}

/* Dark mode popup styling */
[data-theme="dark"] .e-dropdown-popup,
[data-theme="dark"] .e-popup {
    background-color: #343a40;
    border-color: #495057;
}

[data-theme="dark"] .e-dropdownlist.e-popup,
[data-theme="dark"] .e-ddl.e-popup,
[data-theme="dark"] .e-autocomplete.e-popup,
[data-theme="dark"] .e-multiselect.e-popup,
[data-theme="dark"] .e-combobox.e-popup {
    background-color: #343a40;
    border-color: #495057;
}

/* ============================================
   SYNCFUSION DARK MODE OVERRIDES
   ============================================ */

[data-theme="dark"] .e-grid {
    background-color: #343a40;
    color: #f8f9fa;
}

[data-theme="dark"] .e-grid .e-gridheader {
    background-color: #495057;
    color: #f8f9fa;
    border-color: #6c757d;
}

[data-theme="dark"] .e-grid .e-headercell {
    background-color: #495057;
    border-color: #6c757d;
    color: #f8f9fa;
}

[data-theme="dark"] .e-grid .e-gridcontent {
    background-color: #343a40;
    border-color: #6c757d;
}

[data-theme="dark"] .e-grid .e-row {
    background-color: #343a40;
    color: #f8f9fa;
    border-color: #6c757d;
}

[data-theme="dark"] .e-grid .e-rowcell {
    border-color: #6c757d;
}

[data-theme="dark"] .e-grid .e-altrow {
    background-color: #3d444a;
}

[data-theme="dark"] .e-grid .e-row:hover {
    background-color: #495057;
}

[data-theme="dark"] .e-pager {
    background-color: #495057;
    border-color: #6c757d;
}

[data-theme="dark"] .e-pager .e-numericitem,
[data-theme="dark"] .e-pager .e-currentitem,
[data-theme="dark"] .e-pager .e-pagercontainer {
    color: #f8f9fa;
}

[data-theme="dark"] .e-btn {
    background-color: #495057;
    border-color: #6c757d;
    color: #f8f9fa;
}

[data-theme="dark"] .e-btn:hover {
    background-color: #8C7C6B;
    color: #ffffff;
}

[data-theme="dark"] .e-input-group,
[data-theme="dark"] .e-input-group.e-control-wrapper {
    background-color: #495057;
}

[data-theme="dark"] .e-input-group input,
[data-theme="dark"] .e-input-group textarea {
    background-color: #495057;
    border-color: #6c757d;
    color: #f8f9fa;
}

.e-btn:hover {
    background-color: #8C7C6B;
    color: #ffffff;
}

.e-btn.e-primary {
    background-color: #2E4E3F;
    border-color: #2E4E3F;
    color: #ffffff;
}

.e-btn.e-primary:hover {
    background-color: #8C7C6B;
    border-color: #8C7C6B;
    color: #ffffff;
}

.e-btn.e-primary:focus,
.e-btn.e-primary:active {
    background-color: #1f3529;
    border-color: #1f3529;
    box-shadow: 0 0 0 0.2rem rgba(46, 78, 63, 0.5);
}

.e-btn:focus {
    outline: 2px solid #4A6F5C;
    outline-offset: 2px;
}

[data-theme="dark"] .e-btn.e-primary {
    background-color: #4A6F5C;
    border-color: #4A6F5C;
}

[data-theme="dark"] .e-btn.e-primary:hover {
    background-color: #8C7C6B;
    border-color: #8C7C6B;
}

[data-theme="dark"] .e-btn.e-primary:focus,
[data-theme="dark"] .e-btn.e-primary:active {
    background-color: #3a5a4a;
    border-color: #3a5a4a;
    box-shadow: 0 0 0 0.2rem rgba(74, 111, 92, 0.5);
}

[data-theme="dark"] .e-btn:focus {
    outline-color: #4A6F5C;
}

/* ============================================
   SYNCFUSION TOAST NOTIFICATIONS
   ============================================ */

.e-toast-container .e-toast .e-toast-message {
    text-align: center;
    line-height: 1.5;
}

.e-toast-container .e-toast .e-toast-message .e-toast-title {
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.01em;
    margin-bottom: 0.25rem;
}

.e-toast-container .e-toast .e-toast-message .e-toast-content {
    text-align: center;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.e-toast-container .e-toast .e-toast-close-icon {
    font-size: 1.125rem;
    font-weight: 600;
    opacity: 1;
}

[data-theme="dark"] .e-toast-container .e-toast {
    background-color: #343a40;
    border-color: #495057;
}

[data-theme="dark"] .e-toast-container .e-toast .e-toast-message .e-toast-title {
    color: #f8f9fa;
}

[data-theme="dark"] .e-toast-container .e-toast .e-toast-message .e-toast-content {
    color: #dee2e6;
}

[data-theme="dark"] .e-toast-container .e-toast .e-toast-close-icon {
    color: #f8f9fa;
}

/* ============================================
   SYNCFUSION DIALOG
   ============================================ */

/* Dialog overlay - ensure it covers the entire page and prevents interaction with background */
.e-dlg-overlay {
    z-index: var(--z-modal) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Dialog container - ensure it appears above the overlay and is centered */
.e-dialog {
    z-index: calc(var(--z-modal) + 1) !important;
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

/* Fix close icon alignment - move X icon up and left to center it in the circle 
   The 2px offset corrects a misalignment issue where the X icon appears slightly
   off-center (too far bottom-right) within its circular background */
.e-dlg-closeicon-btn {
    position: relative;
}

.e-dlg-closeicon-btn .e-icon-dlg-close {
    position: relative;
    left: -2px;
    top: -2px;
}

/* Ensure popups inside dialogs appear above the dialog */
.e-dialog ~ .e-popup,
.e-dialog ~ .e-datepicker.e-popup,
.e-dialog ~ .e-dropdownlist.e-popup,
.e-dialog ~ .e-ddl.e-popup,
.e-dialog ~ .e-autocomplete.e-popup,
.e-dialog ~ .e-multiselect.e-popup,
.e-dialog ~ .e-combobox.e-popup,
.e-dialog ~ .e-calendar.e-popup {
    z-index: calc(var(--z-modal) + 10) !important;
}

/* Additional specificity for dialog popup state */
.e-dialog.e-popup,
.e-dialog.e-popup-open,
.e-dialog.e-lib.e-popup {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

/* Ensure dialog content can be interacted with */
.e-dialog .e-dlg-header-content,
.e-dialog .e-dlg-content,
.e-dialog .e-footer-content {
    position: relative;
    z-index: 1;
}

[data-theme="dark"] .e-dialog {
    background-color: #343a40;
    border-color: #495057;
    color: #f8f9fa;
}

[data-theme="dark"] .e-dialog .e-dlg-header-content {
    background-color: #343a40;
    border-color: #495057;
    color: #f8f9fa;
}

[data-theme="dark"] .e-dialog .e-dlg-content {
    background-color: #343a40;
    color: #f8f9fa;
}

[data-theme="dark"] .e-dialog .e-footer-content {
    background-color: #343a40;
    border-color: #495057;
}

[data-theme="dark"] .e-dialog .text-slate-700 {
    color: #dee2e6 !important;
}

[data-theme="dark"] .e-dialog .text-slate-500 {
    color: #adb5bd !important;
}

[data-theme="dark"] .e-dialog .bg-slate-200 {
    background-color: #495057 !important;
}

[data-theme="dark"] .e-dialog .hover\:bg-slate-300:hover {
    background-color: #5a6268 !important;
}

[data-theme="dark"] .e-dialog button.text-slate-700 {
    color: #f8f9fa !important;
}

/* ============================================
   SYNCFUSION SCHEDULE/CALENDAR
   ============================================ */

.e-schedule,
.e-calendar {
    background-color: #fff;
    color: #212529;
}

.e-schedule .e-schedule-toolbar,
.e-calendar .e-header {
    background-color: #E9E4D4;
    color: #212529;
}

.e-schedule .e-appointment,
.e-calendar .e-selected {
    background-color: #2E4E3F;
    color: #ffffff;
}

/* Discipline-colored appointments */
.e-schedule .e-appointment.discipline-showjumping { background-color: #2E4E3F !important; }
.e-schedule .e-appointment.discipline-dressage { background-color: #8C7C6B !important; }
.e-schedule .e-appointment.discipline-eventing { background-color: #DC3545 !important; }
.e-schedule .e-appointment.discipline-enduranceriding { background-color: #0DCAF0 !important; color: #212529 !important; }
.e-schedule .e-appointment.discipline-western { background-color: #FFC107 !important; color: #212529 !important; }
.e-schedule .e-appointment.discipline-showing { background-color: #6F42C1 !important; }
.e-schedule .e-appointment.discipline-vaulting { background-color: #FD7E14 !important; }
.e-schedule .e-appointment.discipline-reining { background-color: #20C997 !important; color: #212529 !important; }
.e-schedule .e-appointment.discipline-drivingtrials { background-color: #E83E8C !important; }
.e-schedule .e-appointment.discipline-poloandpolocrosse { background-color: #6610F2 !important; }
.e-schedule .e-appointment.discipline-drafthorse { background-color: #795548 !important; }
.e-schedule .e-appointment.discipline-other { background-color: #6C757D !important; }

/* Discipline-colored badges */
.badge-discipline-showjumping { background-color: rgba(46, 78, 63, 0.1); color: #2E4E3F; border: 1px solid rgba(46, 78, 63, 0.2); }
.badge-discipline-dressage { background-color: rgba(140, 124, 107, 0.1); color: #8C7C6B; border: 1px solid rgba(140, 124, 107, 0.2); }
.badge-discipline-eventing { background-color: rgba(220, 53, 69, 0.1); color: #DC3545; border: 1px solid rgba(220, 53, 69, 0.2); }
.badge-discipline-endurance { background-color: rgba(13, 202, 240, 0.1); color: #0A8DA8; border: 1px solid rgba(13, 202, 240, 0.2); }
.badge-discipline-enduranceriding { background-color: rgba(13, 202, 240, 0.1); color: #0A8DA8; border: 1px solid rgba(13, 202, 240, 0.2); }
.badge-discipline-western { background-color: rgba(255, 193, 7, 0.1); color: #B8860B; border: 1px solid rgba(255, 193, 7, 0.2); }
.badge-discipline-showing { background-color: rgba(111, 66, 193, 0.1); color: #6F42C1; border: 1px solid rgba(111, 66, 193, 0.2); }
.badge-discipline-showhorse { background-color: rgba(111, 66, 193, 0.1); color: #6F42C1; border: 1px solid rgba(111, 66, 193, 0.2); }
.badge-discipline-campdraft { background-color: rgba(253, 126, 20, 0.1); color: #C96814; border: 1px solid rgba(253, 126, 20, 0.2); }
.badge-discipline-polocrosse { background-color: rgba(102, 16, 242, 0.1); color: #6610F2; border: 1px solid rgba(102, 16, 242, 0.2); }
.badge-discipline-rodeo { background-color: rgba(232, 62, 140, 0.1); color: #C7357D; border: 1px solid rgba(232, 62, 140, 0.2); }
.badge-discipline-ponyclub { background-color: rgba(32, 201, 151, 0.1); color: #1A9974; border: 1px solid rgba(32, 201, 151, 0.2); }
.badge-discipline-driving { background-color: rgba(121, 85, 72, 0.1); color: #795548; border: 1px solid rgba(121, 85, 72, 0.2); }
.badge-discipline-cutting { background-color: rgba(255, 193, 7, 0.1); color: #B8860B; border: 1px solid rgba(255, 193, 7, 0.2); }
.badge-discipline-reining { background-color: rgba(32, 201, 151, 0.1); color: #1A9974; border: 1px solid rgba(32, 201, 151, 0.2); }
.badge-discipline-vaulting { background-color: rgba(253, 126, 20, 0.1); color: #C96814; border: 1px solid rgba(253, 126, 20, 0.2); }
.badge-discipline-barrelracing { background-color: rgba(255, 193, 7, 0.1); color: #B8860B; border: 1px solid rgba(255, 193, 7, 0.2); }
.badge-discipline-polo { background-color: rgba(102, 16, 242, 0.1); color: #6610F2; border: 1px solid rgba(102, 16, 242, 0.2); }
.badge-discipline-hunter { background-color: rgba(46, 78, 63, 0.1); color: #2E4E3F; border: 1px solid rgba(46, 78, 63, 0.2); }
.badge-discipline-mountedgames { background-color: rgba(232, 62, 140, 0.1); color: #C7357D; border: 1px solid rgba(232, 62, 140, 0.2); }
.badge-discipline-tetrathlon { background-color: rgba(13, 202, 240, 0.1); color: #0A8DA8; border: 1px solid rgba(13, 202, 240, 0.2); }
.badge-discipline-workingequitation { background-color: rgba(253, 126, 20, 0.1); color: #C96814; border: 1px solid rgba(253, 126, 20, 0.2); }
.badge-discipline-paradressage { background-color: rgba(140, 124, 107, 0.1); color: #8C7C6B; border: 1px solid rgba(140, 124, 107, 0.2); }
.badge-discipline-stockhorse { background-color: rgba(121, 85, 72, 0.1); color: #795548; border: 1px solid rgba(121, 85, 72, 0.2); }
.badge-discipline-trail { background-color: rgba(32, 201, 151, 0.1); color: #1A9974; border: 1px solid rgba(32, 201, 151, 0.2); }
.badge-discipline-ropingevents { background-color: rgba(255, 193, 7, 0.1); color: #B8860B; border: 1px solid rgba(255, 193, 7, 0.2); }
.badge-discipline-agshows { background-color: rgba(121, 85, 72, 0.1); color: #795548; border: 1px solid rgba(121, 85, 72, 0.2); }
.badge-discipline-breedshows { background-color: rgba(111, 66, 193, 0.1); color: #6F42C1; border: 1px solid rgba(111, 66, 193, 0.2); }
.badge-discipline-showmanship { background-color: rgba(232, 62, 140, 0.1); color: #C7357D; border: 1px solid rgba(232, 62, 140, 0.2); }
.badge-discipline-hacking { background-color: rgba(156, 39, 176, 0.1); color: #7B1FA2; border: 1px solid rgba(156, 39, 176, 0.2); }
.badge-discipline-leadrein { background-color: rgba(76, 175, 80, 0.1); color: #388E3C; border: 1px solid rgba(76, 175, 80, 0.2); }
.badge-discipline-pleasure { background-color: rgba(255, 179, 0, 0.1); color: #F57C00; border: 1px solid rgba(255, 179, 0, 0.2); }
.badge-discipline-versatility { background-color: rgba(0, 172, 193, 0.1); color: #00838F; border: 1px solid rgba(0, 172, 193, 0.2); }
.badge-discipline-harnessracing { background-color: rgba(25, 118, 210, 0.1); color: #1565C0; border: 1px solid rgba(25, 118, 210, 0.2); }
.badge-discipline-thoroughbredracing { background-color: rgba(211, 47, 47, 0.1); color: #C62828; border: 1px solid rgba(211, 47, 47, 0.2); }
.badge-discipline-drivingtrials { background-color: rgba(232, 62, 140, 0.1); color: #C7357D; border: 1px solid rgba(232, 62, 140, 0.2); }
.badge-discipline-poloandpolocrosse { background-color: rgba(102, 16, 242, 0.1); color: #6610F2; border: 1px solid rgba(102, 16, 242, 0.2); }
.badge-discipline-drafthorse { background-color: rgba(121, 85, 72, 0.1); color: #795548; border: 1px solid rgba(121, 85, 72, 0.2); }
.badge-discipline-other { background-color: rgba(108, 117, 125, 0.1); color: #6C757D; border: 1px solid rgba(108, 117, 125, 0.2); }

[data-theme="dark"] .e-schedule,
[data-theme="dark"] .e-calendar {
    background-color: #343a40;
    color: #f8f9fa;
}

[data-theme="dark"] .e-schedule .e-schedule-toolbar,
[data-theme="dark"] .e-calendar .e-header {
    background-color: #495057;
    color: #f8f9fa;
}

[data-theme="dark"] .e-schedule .e-time-cells-wrap,
[data-theme="dark"] .e-schedule .e-work-cells,
[data-theme="dark"] .e-calendar .e-content {
    background-color: #343a40;
    border-color: #495057;
}

[data-theme="dark"] .e-schedule .e-header-cells,
[data-theme="dark"] .e-calendar .e-header .e-title {
    background-color: #495057;
    border-color: #6c757d;
    color: #f8f9fa;
}

/* Dark mode discipline colors */
[data-theme="dark"] .e-schedule .e-appointment.discipline-showjumping { background-color: #4A6F5C !important; }
[data-theme="dark"] .e-schedule .e-appointment.discipline-dressage { background-color: #A89C8A !important; }
[data-theme="dark"] .e-schedule .e-appointment.discipline-eventing { background-color: #E85563 !important; }
[data-theme="dark"] .e-schedule .e-appointment.discipline-enduranceriding { background-color: #33D4F5 !important; }
[data-theme="dark"] .e-schedule .e-appointment.discipline-western { background-color: #FFCA28 !important; }
[data-theme="dark"] .e-schedule .e-appointment.discipline-showing { background-color: #8A5DD1 !important; }
[data-theme="dark"] .e-schedule .e-appointment.discipline-vaulting { background-color: #FF9438 !important; }
[data-theme="dark"] .e-schedule .e-appointment.discipline-reining { background-color: #40D9A9 !important; }
[data-theme="dark"] .e-schedule .e-appointment.discipline-drivingtrials { background-color: #F05BA0 !important; }
[data-theme="dark"] .e-schedule .e-appointment.discipline-poloandpolocrosse { background-color: #7E3BFF !important; }
[data-theme="dark"] .e-schedule .e-appointment.discipline-drafthorse { background-color: #8D6E63 !important; }
[data-theme="dark"] .e-schedule .e-appointment.discipline-other { background-color: #868E96 !important; }

/* Dark mode discipline badges */
[data-theme="dark"] .badge-discipline-showjumping { background-color: rgba(74, 111, 92, 0.2); color: #6FBB93; border-color: rgba(74, 111, 92, 0.3); }
[data-theme="dark"] .badge-discipline-dressage { background-color: rgba(168, 156, 138, 0.2); color: #C8B8A8; border-color: rgba(168, 156, 138, 0.3); }
[data-theme="dark"] .badge-discipline-eventing { background-color: rgba(232, 85, 99, 0.2); color: #FF8E9F; border-color: rgba(232, 85, 99, 0.3); }
[data-theme="dark"] .badge-discipline-endurance { background-color: rgba(51, 212, 245, 0.2); color: #6FE5FF; border-color: rgba(51, 212, 245, 0.3); }
[data-theme="dark"] .badge-discipline-enduranceriding { background-color: rgba(51, 212, 245, 0.2); color: #6FE5FF; border-color: rgba(51, 212, 245, 0.3); }
[data-theme="dark"] .badge-discipline-western { background-color: rgba(255, 202, 40, 0.2); color: #FFD666; border-color: rgba(255, 202, 40, 0.3); }
[data-theme="dark"] .badge-discipline-showing { background-color: rgba(138, 93, 209, 0.2); color: #B88FE7; border-color: rgba(138, 93, 209, 0.3); }
[data-theme="dark"] .badge-discipline-showhorse { background-color: rgba(138, 93, 209, 0.2); color: #B88FE7; border-color: rgba(138, 93, 209, 0.3); }
[data-theme="dark"] .badge-discipline-campdraft { background-color: rgba(255, 148, 56, 0.2); color: #FFB078; border-color: rgba(255, 148, 56, 0.3); }
[data-theme="dark"] .badge-discipline-polocrosse { background-color: rgba(126, 59, 255, 0.2); color: #A78BFF; border-color: rgba(126, 59, 255, 0.3); }
[data-theme="dark"] .badge-discipline-rodeo { background-color: rgba(240, 91, 160, 0.2); color: #FF9BC8; border-color: rgba(240, 91, 160, 0.3); }
[data-theme="dark"] .badge-discipline-ponyclub { background-color: rgba(64, 217, 169, 0.2); color: #7FECCA; border-color: rgba(64, 217, 169, 0.3); }
[data-theme="dark"] .badge-discipline-driving { background-color: rgba(141, 110, 99, 0.2); color: #B09080; border-color: rgba(141, 110, 99, 0.3); }
[data-theme="dark"] .badge-discipline-cutting { background-color: rgba(255, 202, 40, 0.2); color: #FFD666; border-color: rgba(255, 202, 40, 0.3); }
[data-theme="dark"] .badge-discipline-reining { background-color: rgba(64, 217, 169, 0.2); color: #7FECCA; border-color: rgba(64, 217, 169, 0.3); }
[data-theme="dark"] .badge-discipline-vaulting { background-color: rgba(255, 148, 56, 0.2); color: #FFB078; border-color: rgba(255, 148, 56, 0.3); }
[data-theme="dark"] .badge-discipline-barrelracing { background-color: rgba(255, 202, 40, 0.2); color: #FFD666; border-color: rgba(255, 202, 40, 0.3); }
[data-theme="dark"] .badge-discipline-polo { background-color: rgba(126, 59, 255, 0.2); color: #A78BFF; border-color: rgba(126, 59, 255, 0.3); }
[data-theme="dark"] .badge-discipline-hunter { background-color: rgba(74, 111, 92, 0.2); color: #6FBB93; border-color: rgba(74, 111, 92, 0.3); }
[data-theme="dark"] .badge-discipline-mountedgames { background-color: rgba(240, 91, 160, 0.2); color: #FF9BC8; border-color: rgba(240, 91, 160, 0.3); }
[data-theme="dark"] .badge-discipline-tetrathlon { background-color: rgba(51, 212, 245, 0.2); color: #6FE5FF; border-color: rgba(51, 212, 245, 0.3); }
[data-theme="dark"] .badge-discipline-workingequitation { background-color: rgba(255, 148, 56, 0.2); color: #FFB078; border-color: rgba(255, 148, 56, 0.3); }
[data-theme="dark"] .badge-discipline-paradressage { background-color: rgba(168, 156, 138, 0.2); color: #C8B8A8; border-color: rgba(168, 156, 138, 0.3); }
[data-theme="dark"] .badge-discipline-stockhorse { background-color: rgba(141, 110, 99, 0.2); color: #B09080; border-color: rgba(141, 110, 99, 0.3); }
[data-theme="dark"] .badge-discipline-trail { background-color: rgba(64, 217, 169, 0.2); color: #7FECCA; border-color: rgba(64, 217, 169, 0.3); }
[data-theme="dark"] .badge-discipline-ropingevents { background-color: rgba(255, 202, 40, 0.2); color: #FFD666; border-color: rgba(255, 202, 40, 0.3); }
[data-theme="dark"] .badge-discipline-agshows { background-color: rgba(141, 110, 99, 0.2); color: #B09080; border-color: rgba(141, 110, 99, 0.3); }
[data-theme="dark"] .badge-discipline-breedshows { background-color: rgba(138, 93, 209, 0.2); color: #B88FE7; border-color: rgba(138, 93, 209, 0.3); }
[data-theme="dark"] .badge-discipline-showmanship { background-color: rgba(240, 91, 160, 0.2); color: #FF9BC8; border-color: rgba(240, 91, 160, 0.3); }
[data-theme="dark"] .badge-discipline-hacking { background-color: rgba(186, 104, 200, 0.2); color: #CE93D8; border-color: rgba(186, 104, 200, 0.3); }
[data-theme="dark"] .badge-discipline-leadrein { background-color: rgba(129, 199, 132, 0.2); color: #A5D6A7; border-color: rgba(129, 199, 132, 0.3); }
[data-theme="dark"] .badge-discipline-pleasure { background-color: rgba(255, 204, 128, 0.2); color: #FFE082; border-color: rgba(255, 204, 128, 0.3); }
[data-theme="dark"] .badge-discipline-versatility { background-color: rgba(77, 208, 225, 0.2); color: #80DEEA; border-color: rgba(77, 208, 225, 0.3); }
[data-theme="dark"] .badge-discipline-harnessracing { background-color: rgba(66, 165, 245, 0.2); color: #90CAF9; border-color: rgba(66, 165, 245, 0.3); }
[data-theme="dark"] .badge-discipline-thoroughbredracing { background-color: rgba(239, 83, 80, 0.2); color: #EF9A9A; border-color: rgba(239, 83, 80, 0.3); }
[data-theme="dark"] .badge-discipline-drivingtrials { background-color: rgba(240, 91, 160, 0.2); color: #FF9BC8; border-color: rgba(240, 91, 160, 0.3); }
[data-theme="dark"] .badge-discipline-poloandpolocrosse { background-color: rgba(126, 59, 255, 0.2); color: #A78BFF; border-color: rgba(126, 59, 255, 0.3); }
[data-theme="dark"] .badge-discipline-drafthorse { background-color: rgba(141, 110, 99, 0.2); color: #B09080; border-color: rgba(141, 110, 99, 0.3); }
[data-theme="dark"] .badge-discipline-other { background-color: rgba(134, 142, 150, 0.2); color: #ADB5BD; border-color: rgba(134, 142, 150, 0.3); }

/* ============================================
   SYNCFUSION DROPDOWNS
   ============================================ */

.e-dropdownlist.e-popup,
.e-ddl.e-popup {
    background-color: #fff;
    border-color: #dee2e6;
}

[data-theme="dark"] .e-dropdownlist.e-popup,
[data-theme="dark"] .e-ddl.e-popup {
    background-color: #343a40;
    border-color: #495057;
    color: #f8f9fa;
}

[data-theme="dark"] .e-dropdownlist .e-list-item,
[data-theme="dark"] .e-ddl .e-list-item {
    color: #f8f9fa;
}

[data-theme="dark"] .e-dropdownlist .e-list-item:hover,
[data-theme="dark"] .e-ddl .e-list-item:hover {
    background-color: #8C7C6B;
    color: #ffffff;
}

[data-theme="dark"] .e-multiselect {
    background-color: #495057;
    border-color: #6c757d;
    color: #f8f9fa;
}

[data-theme="dark"] .e-multiselect .e-chips {
    background-color: #4A6F5C;
    color: #ffffff;
}

[data-theme="dark"] .e-autocomplete.e-popup {
    background-color: #343a40;
    border-color: #495057;
}

[data-theme="dark"] .e-autocomplete .e-list-item {
    color: #f8f9fa;
}

[data-theme="dark"] .e-autocomplete .e-list-item:hover {
    background-color: #8C7C6B;
    color: #ffffff;
}

/* Ensure autocomplete popup content container has proper dark theme */
[data-theme="dark"] .e-autocomplete.e-popup .e-content,
[data-theme="dark"] .e-autocomplete.e-popup .e-list-parent,
[data-theme="dark"] .e-autocomplete.e-popup .e-dropdownbase {
    background-color: #343a40;
    color: #f8f9fa;
}

/* Ensure custom template content in autocomplete gets proper dark theme colors */
[data-theme="dark"] .e-autocomplete.e-popup .e-list-item .text-gray-900 {
    color: #f8f9fa !important;
}

[data-theme="dark"] .e-autocomplete.e-popup .e-list-item .text-gray-500 {
    color: #adb5bd !important;
}

[data-theme="dark"] .e-autocomplete.e-popup .e-list-item .text-gray-400 {
    color: #ced4da !important;
}

/* No records template dark theme */
[data-theme="dark"] .e-autocomplete.e-popup .text-gray-500 {
    color: #adb5bd !important;
}

/* ComboBox specific styles */
.e-combobox.e-popup {
    background-color: #fff;
    border-color: #dee2e6;
}

[data-theme="dark"] .e-combobox.e-popup {
    background-color: #343a40;
    border-color: #495057;
    color: #f8f9fa;
}

[data-theme="dark"] .e-combobox .e-list-item {
    color: #f8f9fa;
}

[data-theme="dark"] .e-combobox .e-list-item:hover {
    background-color: #8C7C6B;
    color: #ffffff;
}

[data-theme="dark"] .e-combobox.e-input-group,
[data-theme="dark"] .e-combobox.e-control-wrapper {
    background-color: #495057;
    border-color: #6c757d;
}

[data-theme="dark"] .e-combobox input {
    background-color: #495057;
    border-color: #6c757d;
    color: #f8f9fa;
}

[data-theme="dark"] .e-datepicker.e-popup,
[data-theme="dark"] .e-calendar.e-popup {
    background-color: #343a40;
    border-color: #495057;
}

[data-theme="dark"] .e-datepicker .e-calendar .e-content td,
[data-theme="dark"] .e-calendar .e-content td {
    color: #f8f9fa;
}

[data-theme="dark"] .e-datepicker .e-calendar .e-content td:hover,
[data-theme="dark"] .e-calendar .e-content td:hover {
    background-color: #8C7C6B;
    color: #ffffff;
}

[data-theme="dark"] .e-datepicker .e-calendar .e-today,
[data-theme="dark"] .e-calendar .e-today {
    border-color: #4A6F5C;
}

/* TimePicker specific styles */
[data-theme="dark"] .e-timepicker.e-popup {
    background-color: #343a40;
    border-color: #495057;
}

[data-theme="dark"] .e-timepicker .e-list-parent,
[data-theme="dark"] .e-timepicker .e-list-item {
    background-color: #343a40;
    color: #f8f9fa;
}

[data-theme="dark"] .e-timepicker .e-list-item:hover {
    background-color: #8C7C6B;
    color: #ffffff;
}

[data-theme="dark"] .e-timepicker.e-input-group,
[data-theme="dark"] .e-timepicker.e-control-wrapper {
    background-color: #495057;
    border-color: #6c757d;
}

[data-theme="dark"] .e-timepicker input {
    background-color: #495057;
    border-color: #6c757d;
    color: #f8f9fa;
}

/* DateTimePicker specific styles */
[data-theme="dark"] .e-datetimepicker.e-popup {
    background-color: #343a40;
    border-color: #495057;
}

[data-theme="dark"] .e-datetimepicker.e-input-group,
[data-theme="dark"] .e-datetimepicker.e-control-wrapper {
    background-color: #495057;
    border-color: #6c757d;
}

[data-theme="dark"] .e-datetimepicker input {
    background-color: #495057;
    border-color: #6c757d;
    color: #f8f9fa;
}

/* NumericTextBox specific styles */
[data-theme="dark"] .e-numerictextbox.e-input-group,
[data-theme="dark"] .e-numerictextbox.e-control-wrapper {
    background-color: #495057;
    border-color: #6c757d;
}

[data-theme="dark"] .e-numerictextbox input {
    background-color: #495057;
    border-color: #6c757d;
    color: #f8f9fa;
}

[data-theme="dark"] .e-numerictextbox .e-input-group-icon {
    background-color: #495057;
    color: #f8f9fa;
}

/* TextBox specific styles */
.e-textbox.e-input-group,
.e-textbox.e-control-wrapper,
.e-float-input.e-input-group {
    background-color: transparent;
}

[data-theme="dark"] .e-textbox.e-input-group input,
[data-theme="dark"] .e-textbox.e-control-wrapper input,
[data-theme="dark"] .e-float-input input {
    background-color: #495057;
    border-color: #6c757d;
    color: #f8f9fa;
}

[data-theme="dark"] .e-textbox.e-input-group textarea,
[data-theme="dark"] .e-textbox.e-control-wrapper textarea,
[data-theme="dark"] .e-float-input textarea {
    background-color: #495057;
    border-color: #6c757d;
    color: #f8f9fa;
}

[data-theme="dark"] .e-float-input .e-float-line::before,
[data-theme="dark"] .e-float-input .e-float-line::after {
    background-color: #4A6F5C;
}

[data-theme="dark"] .e-float-input.e-input-focus .e-float-line::before,
[data-theme="dark"] .e-float-input.e-input-focus .e-float-line::after {
    background-color: #4A6F5C;
}

[data-theme="dark"] .e-float-input label.e-float-text {
    color: #adb5bd;
}

[data-theme="dark"] .e-float-input.e-input-focus label.e-float-text {
    color: #4A6F5C;
}

/* ============================================
   SYNCFUSION TAB & ACCORDION
   ============================================ */

[data-theme="dark"] .e-tab {
    background-color: #343a40;
    color: #f8f9fa;
}

[data-theme="dark"] .e-tab .e-tab-header {
    background-color: #495057;
    border-color: #6c757d;
}

[data-theme="dark"] .e-tab .e-tab-header .e-toolbar-item {
    color: #f8f9fa;
}

[data-theme="dark"] .e-tab .e-tab-header .e-toolbar-item:hover {
    background-color: #8C7C6B;
    color: #ffffff;
}

[data-theme="dark"] .e-tab .e-tab-header .e-toolbar-item.e-active {
    background-color: #4A6F5C;
    color: #ffffff;
}

[data-theme="dark"] .e-accordion .e-acrdn-item {
    background-color: #343a40;
    border-color: #495057;
}

.main-content .e-accordion .e-acrdn-item {
    background-color: #fff;
    border: 1px solid #dee2e6;
    margin-bottom: 0.5rem;
    border-radius: 8px;
}

.main-content .e-accordion .e-acrdn-header {
    background-color: #fff;
    color: #212529;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

.main-content .e-accordion .e-acrdn-header:hover {
    background-color: #f8f9fa;
}

.main-content .e-accordion .e-acrdn-header.e-selected {
    background-color: #f8f9fa;
}

.main-content .e-accordion .e-acrdn-panel {
    background-color: #fff;
}

.main-content .e-accordion .e-acrdn-panel.e-selected {
    background-color: #fff;
}

.main-content .e-accordion .e-acrdn-content {
    background-color: #fff;
    padding: 1rem;
    line-height: 1.6;
    font-size: 0.9375rem;
}

.main-content .e-accordion .e-acrdn-content .e-content {
    background-color: #fff;
}

[data-theme="dark"] .main-content .e-accordion .e-acrdn-header {
    background-color: #495057;
    color: #f8f9fa;
    border-bottom-color: #6c757d;
}

[data-theme="dark"] .main-content .e-accordion .e-acrdn-header:hover {
    background-color: #5a6268;
}

[data-theme="dark"] .main-content .e-accordion .e-acrdn-header.e-selected {
    background-color: #5a6268;
}

[data-theme="dark"] .main-content .e-accordion .e-acrdn-panel {
    background-color: #343a40;
}

[data-theme="dark"] .main-content .e-accordion .e-acrdn-panel.e-selected {
    background-color: #343a40;
}

[data-theme="dark"] .main-content .e-accordion .e-acrdn-content {
    background-color: #343a40;
    color: #f8f9fa;
}

[data-theme="dark"] .main-content .e-accordion .e-acrdn-content .e-content {
    background-color: #343a40;
    color: #f8f9fa;
}

/* ============================================
   SYNCFUSION RICH TEXT EDITOR
   ============================================ */

[data-theme="dark"] .e-richtexteditor {
    background-color: #343a40;
    border-color: #495057;
}

[data-theme="dark"] .e-richtexteditor .e-rte-toolbar {
    background-color: #495057;
    border-color: #6c757d;
}

[data-theme="dark"] .e-richtexteditor .e-rte-content {
    background-color: #343a40;
    color: #f8f9fa;
}

[data-theme="dark"] .e-richtexteditor .e-toolbar-item:hover {
    background-color: #8C7C6B;
}

/* ============================================
   SYNCFUSION IMAGE EDITOR
   ============================================ */

[data-theme="dark"] .e-image-editor {
    background-color: #343a40;
    border-color: #495057;
}

[data-theme="dark"] .e-image-editor .e-toolbar {
    background-color: #495057;
}

/* ============================================
   SYNCFUSION CHECKBOX & CARD
   ============================================ */

[data-theme="dark"] .e-checkbox-wrapper .e-frame {
    background-color: #495057;
    border-color: #6c757d;
}

[data-theme="dark"] .e-checkbox-wrapper .e-check {
    color: #4A6F5C;
}

[data-theme="dark"] .e-card {
    background-color: #343a40;
    border-color: #495057;
    color: #f8f9fa;
}

[data-theme="dark"] .e-card .e-card-header {
    background-color: #495057;
    border-color: #6c757d;
    color: #f8f9fa;
}

/* ============================================
   SYNCFUSION DATAFORM
   ============================================ */

[data-theme="dark"] .e-dataform {
    background-color: #343a40;
    color: #f8f9fa;
}

[data-theme="dark"] .e-dataform .e-field-label {
    color: #f8f9fa;
}

/* ============================================
   DROPDOWN PORTAL CONTAINER
   ============================================ */

.dropdown-portal-container {
    position: fixed;
    z-index: var(--z-dropdown);
    pointer-events: auto;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
}

.dropdown-portal-container * {
    pointer-events: auto;
}

/* ============================================
   ENHANCED SYNCFUSION COMPONENT STYLING
   Desktop and Mobile Comprehensive Support
   ============================================ */

/* ============================================
   CHECKBOX - ENHANCED
   ============================================ */

/* Light mode checkbox styling */
.e-checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.e-checkbox-wrapper .e-frame {
    border: 2px solid #dee2e6;
    background-color: #fff;
    border-radius: 4px;
    width: 20px;
    height: 20px;
    transition: all 0.2s ease-in-out;
}

.e-checkbox-wrapper:hover .e-frame {
    border-color: #4A6F5C;
    background-color: rgba(74, 111, 92, 0.05);
}

.e-checkbox-wrapper .e-check {
    color: #ffffff;
    font-size: 14px;
}

.e-checkbox-wrapper.e-checkbox-focus .e-frame {
    outline: 2px solid #4A6F5C;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(74, 111, 92, 0.2);
}

.e-checkbox-wrapper input:checked + .e-frame {
    background-color: #2E4E3F;
    border-color: #2E4E3F;
}

.e-checkbox-wrapper:hover input:checked + .e-frame {
    background-color: #4A6F5C;
    border-color: #4A6F5C;
}

.e-checkbox-wrapper .e-label {
    margin-left: 8px;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #212529;
    cursor: pointer;
}

/* Dark mode checkbox enhancements */
[data-theme="dark"] .e-checkbox-wrapper .e-frame {
    background-color: #495057;
    border-color: #6c757d;
}

[data-theme="dark"] .e-checkbox-wrapper:hover .e-frame {
    border-color: #4A6F5C;
    background-color: rgba(74, 111, 92, 0.1);
}

[data-theme="dark"] .e-checkbox-wrapper input:checked + .e-frame {
    background-color: #4A6F5C;
    border-color: #4A6F5C;
}

[data-theme="dark"] .e-checkbox-wrapper:hover input:checked + .e-frame {
    background-color: #6FBB93;
    border-color: #6FBB93;
}

[data-theme="dark"] .e-checkbox-wrapper .e-label {
    color: #f8f9fa;
}

[data-theme="dark"] .e-checkbox-wrapper.e-checkbox-focus .e-frame {
    outline-color: #4A6F5C;
    box-shadow: 0 0 0 3px rgba(74, 111, 92, 0.3);
}

/* Disabled state */
.e-checkbox-wrapper.e-checkbox-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.e-checkbox-wrapper.e-checkbox-disabled .e-frame,
.e-checkbox-wrapper.e-checkbox-disabled .e-label {
    cursor: not-allowed;
}

/* ============================================
   CARD - ENHANCED
   ============================================ */

/* Light mode card styling */
.e-card {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
    overflow: hidden;
}

.e-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.e-card .e-card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 1.25rem;
    font-weight: 600;
    font-size: 1.125rem;
    color: #212529;
}

.e-card .e-card-header-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5;
    color: #212529;
}

.e-card .e-card-content {
    padding: 12px 18px 12px 18px;
    line-height: 1.6;
    color: #212529;
}

.e-card .e-card-actions {
    padding: 1rem 1.25rem;
    border-top: 1px solid #dee2e6;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Dark mode card enhancements */
[data-theme="dark"] .e-card {
    background-color: #343a40;
    border-color: #495057;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .e-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .e-card .e-card-header {
    background-color: #495057;
    border-bottom-color: #6c757d;
    color: #f8f9fa;
}

[data-theme="dark"] .e-card .e-card-header-title {
    color: #f8f9fa;
}

[data-theme="dark"] .e-card .e-card-content {
    color: #f8f9fa;
}

[data-theme="dark"] .e-card .e-card-actions {
    border-top-color: #6c757d;
}

/* Card variants */
.e-card.e-card-outlined {
    box-shadow: none;
    border-width: 2px;
}

.e-card.e-card-elevated {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* ============================================
   TAB - ENHANCED
   ============================================ */

/* Light mode tab styling */
.e-tab .e-tab-header {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    padding: 0;
}

.e-tab .e-tab-header .e-toolbar-items {
    display: flex;
    gap: 0.25rem;
}

.e-tab .e-tab-header .e-toolbar-item {
    padding: 0.75rem 1.5rem;
    color: #6c757d;
    font-weight: 500;
    font-size: 0.9375rem;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    position: relative;
}

.e-tab .e-tab-header .e-toolbar-item:hover {
    color: #2E4E3F;
    background-color: rgba(46, 78, 63, 0.05);
}

.e-tab .e-tab-header .e-toolbar-item.e-active {
    color: #2E4E3F;
    border-bottom-color: #2E4E3F;
    background-color: #ffffff;
    font-weight: 600;
}

.e-tab .e-tab-header .e-toolbar-item:focus-visible {
    outline: 2px solid #4A6F5C;
    outline-offset: -2px;
    box-shadow: inset 0 0 0 2px rgba(74, 111, 92, 0.2);
}

.e-tab .e-content {
    padding: 1.5rem;
    background-color: #ffffff;
    min-height: 200px;
}

/* Dark mode tab enhancements */
[data-theme="dark"] .e-tab .e-tab-header {
    background-color: #495057;
    border-bottom-color: #6c757d;
}

[data-theme="dark"] .e-tab .e-tab-header .e-toolbar-item {
    color: #adb5bd;
}

[data-theme="dark"] .e-tab .e-tab-header .e-toolbar-item:hover {
    color: #f8f9fa;
    background-color: rgba(74, 111, 92, 0.1);
}

[data-theme="dark"] .e-tab .e-tab-header .e-toolbar-item.e-active {
    color: #f8f9fa;
    border-bottom-color: #4A6F5C;
    background-color: #343a40;
}

[data-theme="dark"] .e-tab .e-tab-header .e-toolbar-item:focus-visible {
    outline-color: #4A6F5C;
    box-shadow: inset 0 0 0 2px rgba(74, 111, 92, 0.3);
}

[data-theme="dark"] .e-tab .e-content {
    background-color: #343a40;
}

/* Tab icon support */
.e-tab .e-tab-header .e-toolbar-item .e-tab-icon {
    margin-right: 0.5rem;
    font-size: 1.125rem;
    vertical-align: middle;
}

/* ============================================
   MULTISELECT - ENHANCED CHIPS
   ============================================ */

/* Chip styling for MultiSelect */
.e-multiselect .e-chips {
    background-color: #2E4E3F;
    color: #ffffff;
    border: 1px solid #2E4E3F;
    border-radius: 1rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.125rem;
    transition: all 0.2s ease-in-out;
}

.e-multiselect .e-chips:hover {
    background-color: #4A6F5C;
    border-color: #4A6F5C;
}

.e-multiselect .e-chips .e-chips-close {
    color: #ffffff;
    opacity: 0.8;
    cursor: pointer;
    padding: 0.125rem;
    border-radius: 50%;
    transition: opacity 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
}

.e-multiselect .e-chips .e-chips-close:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.2);
}

/* Dark mode chip styling */
[data-theme="dark"] .e-multiselect .e-chips {
    background-color: #4A6F5C;
    border-color: #4A6F5C;
}

[data-theme="dark"] .e-multiselect .e-chips:hover {
    background-color: #6FBB93;
    border-color: #6FBB93;
}

/* MultiSelect wrapper focus */
.e-multiselect.e-input-focus .e-multi-select-wrapper {
    border-color: #4A6F5C !important;
    box-shadow: 0 0 0 0.2rem rgba(74, 111, 92, 0.25);
}

[data-theme="dark"] .e-multiselect.e-input-focus .e-multi-select-wrapper {
    box-shadow: 0 0 0 0.2rem rgba(74, 111, 92, 0.4);
}

/* Discipline-specific chip colors for MultiSelect */
.e-multiselect .e-chips[data-discipline="showjumping"] { background-color: #2E4E3F; border-color: #2E4E3F; }
.e-multiselect .e-chips[data-discipline="hunter"] { background-color: #2E4E3F; border-color: #2E4E3F; }
.e-multiselect .e-chips[data-discipline="dressage"] { background-color: #8C7C6B; border-color: #8C7C6B; }
.e-multiselect .e-chips[data-discipline="paradressage"] { background-color: #8C7C6B; border-color: #8C7C6B; }
.e-multiselect .e-chips[data-discipline="eventing"] { background-color: #DC3545; border-color: #DC3545; }
.e-multiselect .e-chips[data-discipline="endurance"] { background-color: #0A8DA8; border-color: #0A8DA8; }
.e-multiselect .e-chips[data-discipline="enduranceriding"] { background-color: #0A8DA8; border-color: #0A8DA8; }
.e-multiselect .e-chips[data-discipline="tetrathlon"] { background-color: #0A8DA8; border-color: #0A8DA8; }
.e-multiselect .e-chips[data-discipline="western"] { background-color: #B8860B; border-color: #B8860B; }
.e-multiselect .e-chips[data-discipline="cutting"] { background-color: #B8860B; border-color: #B8860B; }
.e-multiselect .e-chips[data-discipline="barrelracing"] { background-color: #B8860B; border-color: #B8860B; }
.e-multiselect .e-chips[data-discipline="ropingevents"] { background-color: #B8860B; border-color: #B8860B; }
.e-multiselect .e-chips[data-discipline="showing"] { background-color: #6F42C1; border-color: #6F42C1; }
.e-multiselect .e-chips[data-discipline="showhorse"] { background-color: #6F42C1; border-color: #6F42C1; }
.e-multiselect .e-chips[data-discipline="breedshows"] { background-color: #6F42C1; border-color: #6F42C1; }
.e-multiselect .e-chips[data-discipline="campdraft"] { background-color: #C96814; border-color: #C96814; }
.e-multiselect .e-chips[data-discipline="vaulting"] { background-color: #C96814; border-color: #C96814; }
.e-multiselect .e-chips[data-discipline="workingequitation"] { background-color: #C96814; border-color: #C96814; }
.e-multiselect .e-chips[data-discipline="polocrosse"] { background-color: #6610F2; border-color: #6610F2; }
.e-multiselect .e-chips[data-discipline="polo"] { background-color: #6610F2; border-color: #6610F2; }
.e-multiselect .e-chips[data-discipline="poloandpolocrosse"] { background-color: #6610F2; border-color: #6610F2; }
.e-multiselect .e-chips[data-discipline="rodeo"] { background-color: #C7357D; border-color: #C7357D; }
.e-multiselect .e-chips[data-discipline="mountedgames"] { background-color: #C7357D; border-color: #C7357D; }
.e-multiselect .e-chips[data-discipline="showmanship"] { background-color: #C7357D; border-color: #C7357D; }
.e-multiselect .e-chips[data-discipline="drivingtrials"] { background-color: #C7357D; border-color: #C7357D; }
.e-multiselect .e-chips[data-discipline="ponyclub"] { background-color: #1A9974; border-color: #1A9974; }
.e-multiselect .e-chips[data-discipline="reining"] { background-color: #1A9974; border-color: #1A9974; }
.e-multiselect .e-chips[data-discipline="trail"] { background-color: #1A9974; border-color: #1A9974; }
.e-multiselect .e-chips[data-discipline="driving"] { background-color: #795548; border-color: #795548; }
.e-multiselect .e-chips[data-discipline="stockhorse"] { background-color: #795548; border-color: #795548; }
.e-multiselect .e-chips[data-discipline="agshows"] { background-color: #795548; border-color: #795548; }
.e-multiselect .e-chips[data-discipline="drafthorse"] { background-color: #795548; border-color: #795548; }
.e-multiselect .e-chips[data-discipline="hacking"] { background-color: #7B1FA2; border-color: #7B1FA2; }
.e-multiselect .e-chips[data-discipline="leadrein"] { background-color: #388E3C; border-color: #388E3C; }
.e-multiselect .e-chips[data-discipline="pleasure"] { background-color: #F57C00; border-color: #F57C00; }
.e-multiselect .e-chips[data-discipline="versatility"] { background-color: #00838F; border-color: #00838F; }
.e-multiselect .e-chips[data-discipline="harnessracing"] { background-color: #1565C0; border-color: #1565C0; }
.e-multiselect .e-chips[data-discipline="thoroughbredracing"] { background-color: #C62828; border-color: #C62828; }
.e-multiselect .e-chips[data-discipline="other"] { background-color: #6C757D; border-color: #6C757D; }

/* Hover states for discipline chips */
.e-multiselect .e-chips[data-discipline="showjumping"]:hover,
.e-multiselect .e-chips[data-discipline="hunter"]:hover { background-color: #4A6F5C; border-color: #4A6F5C; }
.e-multiselect .e-chips[data-discipline="dressage"]:hover,
.e-multiselect .e-chips[data-discipline="paradressage"]:hover { background-color: #A89A8A; border-color: #A89A8A; }
.e-multiselect .e-chips[data-discipline="eventing"]:hover { background-color: #E95464; border-color: #E95464; }
.e-multiselect .e-chips[data-discipline="endurance"]:hover,
.e-multiselect .e-chips[data-discipline="enduranceriding"]:hover,
.e-multiselect .e-chips[data-discipline="tetrathlon"]:hover { background-color: #1BACC5; border-color: #1BACC5; }
.e-multiselect .e-chips[data-discipline="western"]:hover,
.e-multiselect .e-chips[data-discipline="cutting"]:hover,
.e-multiselect .e-chips[data-discipline="barrelracing"]:hover,
.e-multiselect .e-chips[data-discipline="ropingevents"]:hover { background-color: #D4A01C; border-color: #D4A01C; }
.e-multiselect .e-chips[data-discipline="showing"]:hover,
.e-multiselect .e-chips[data-discipline="showhorse"]:hover,
.e-multiselect .e-chips[data-discipline="breedshows"]:hover { background-color: #8A5DD8; border-color: #8A5DD8; }
.e-multiselect .e-chips[data-discipline="campdraft"]:hover,
.e-multiselect .e-chips[data-discipline="vaulting"]:hover,
.e-multiselect .e-chips[data-discipline="workingequitation"]:hover { background-color: #DB8329; border-color: #DB8329; }
.e-multiselect .e-chips[data-discipline="polocrosse"]:hover,
.e-multiselect .e-chips[data-discipline="polo"]:hover,
.e-multiselect .e-chips[data-discipline="poloandpolocrosse"]:hover { background-color: #8236FF; border-color: #8236FF; }
.e-multiselect .e-chips[data-discipline="rodeo"]:hover,
.e-multiselect .e-chips[data-discipline="mountedgames"]:hover,
.e-multiselect .e-chips[data-discipline="showmanship"]:hover,
.e-multiselect .e-chips[data-discipline="drivingtrials"]:hover { background-color: #D95098; border-color: #D95098; }
.e-multiselect .e-chips[data-discipline="ponyclub"]:hover,
.e-multiselect .e-chips[data-discipline="reining"]:hover,
.e-multiselect .e-chips[data-discipline="trail"]:hover { background-color: #2BB58D; border-color: #2BB58D; }
.e-multiselect .e-chips[data-discipline="driving"]:hover,
.e-multiselect .e-chips[data-discipline="stockhorse"]:hover,
.e-multiselect .e-chips[data-discipline="agshows"]:hover,
.e-multiselect .e-chips[data-discipline="drafthorse"]:hover { background-color: #956F60; border-color: #956F60; }
.e-multiselect .e-chips[data-discipline="hacking"]:hover { background-color: #9C44BA; border-color: #9C44BA; }
.e-multiselect .e-chips[data-discipline="leadrein"]:hover { background-color: #4CAF50; border-color: #4CAF50; }
.e-multiselect .e-chips[data-discipline="pleasure"]:hover { background-color: #FF9800; border-color: #FF9800; }
.e-multiselect .e-chips[data-discipline="versatility"]:hover { background-color: #00ACC1; border-color: #00ACC1; }
.e-multiselect .e-chips[data-discipline="harnessracing"]:hover { background-color: #1E88E5; border-color: #1E88E5; }
.e-multiselect .e-chips[data-discipline="thoroughbredracing"]:hover { background-color: #D32F2F; border-color: #D32F2F; }
.e-multiselect .e-chips[data-discipline="other"]:hover { background-color: #868E96; border-color: #868E96; }

/* Dark mode discipline chip colors */
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="showjumping"],
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="hunter"] { background-color: #4A6F5C; border-color: #4A6F5C; }
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="dressage"],
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="paradressage"] { background-color: #A89A8A; border-color: #A89A8A; }
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="eventing"] { background-color: #E95464; border-color: #E95464; }
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="endurance"],
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="enduranceriding"],
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="tetrathlon"] { background-color: #1BACC5; border-color: #1BACC5; }
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="western"],
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="cutting"],
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="barrelracing"],
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="ropingevents"] { background-color: #D4A01C; border-color: #D4A01C; }
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="showing"],
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="showhorse"],
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="breedshows"] { background-color: #8A5DD8; border-color: #8A5DD8; }
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="campdraft"],
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="vaulting"],
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="workingequitation"] { background-color: #DB8329; border-color: #DB8329; }
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="polocrosse"],
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="polo"],
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="poloandpolocrosse"] { background-color: #8236FF; border-color: #8236FF; }
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="rodeo"],
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="mountedgames"],
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="showmanship"],
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="drivingtrials"] { background-color: #D95098; border-color: #D95098; }
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="ponyclub"],
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="reining"],
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="trail"] { background-color: #2BB58D; border-color: #2BB58D; }
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="driving"],
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="stockhorse"],
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="agshows"],
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="drafthorse"] { background-color: #956F60; border-color: #956F60; }
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="hacking"] { background-color: #9C44BA; border-color: #9C44BA; }
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="leadrein"] { background-color: #4CAF50; border-color: #4CAF50; }
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="pleasure"] { background-color: #FF9800; border-color: #FF9800; }
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="versatility"] { background-color: #00ACC1; border-color: #00ACC1; }
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="harnessracing"] { background-color: #1E88E5; border-color: #1E88E5; }
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="thoroughbredracing"] { background-color: #D32F2F; border-color: #D32F2F; }
[data-theme="dark"] .e-multiselect .e-chips[data-discipline="other"] { background-color: #868E96; border-color: #868E96; }

/* ============================================
   HOVER STATE IMPROVEMENTS
   Desktop interaction enhancements
   ============================================ */

/* Input hover states */
.e-input-group:hover:not(.e-input-focus):not(.e-disabled) {
    border-color: #4A6F5C;
    background-color: rgba(74, 111, 92, 0.02);
}

[data-theme="dark"] .e-input-group:hover:not(.e-input-focus):not(.e-disabled) {
    border-color: #4A6F5C;
    background-color: rgba(74, 111, 92, 0.05);
}

/* Button hover improvements */
.e-btn:not(.e-primary):not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.e-btn.e-primary:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(46, 78, 63, 0.2);
}

/* Grid row hover improvement */
.e-grid .e-row:hover {
    transform: translateX(2px);
    transition: transform 0.2s ease-in-out;
}

/* List item hover improvements */
.e-list-item:hover {
    transform: translateX(2px);
    transition: all 0.2s ease-in-out;
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ARIA and keyboard navigation improvements
   ============================================ */

/* Focus visible improvements for better keyboard navigation */
.e-btn:focus-visible,
.e-input-group:focus-within,
.e-checkbox-wrapper:focus-within,
.e-radio-wrapper:focus-within {
    outline: 2px solid #4A6F5C;
    outline-offset: 2px;
}

[data-theme="dark"] .e-btn:focus-visible,
[data-theme="dark"] .e-input-group:focus-within,
[data-theme="dark"] .e-checkbox-wrapper:focus-within,
[data-theme="dark"] .e-radio-wrapper:focus-within {
    outline-color: #4A6F5C;
}

/* Skip to main content link - accessibility */
.skip-to-content {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-to-content:focus {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    overflow: visible;
    z-index: 10000;
    padding: 1rem;
    background-color: #2E4E3F;
    color: #ffffff;
    text-decoration: none;
    border-radius: 0 0 0.5rem 0;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .e-input-group.e-input-focus,
    .e-btn:focus-visible {
        outline-width: 3px;
        outline-offset: 3px;
    }
}

/* ============================================
   BOOTSTRAP-COMPATIBLE UTILITY CLASSES
   Minimal Bootstrap-like classes for components still using them
   ============================================ */

/* Alert styles */
.alert {
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

[data-theme="dark"] .alert-danger {
    color: #f87171;
    background-color: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.3);
}

/* Card styles */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
}

[data-theme="dark"] .card {
    background-color: #343a40;
    border-color: #495057;
}

.card-body {
    flex: 1 1 auto;
    padding: 1.25rem;
}

.card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

[data-theme="dark"] .card-header {
    background-color: #495057;
    border-bottom-color: #6c757d;
    color: #f8f9fa;
}

.card-footer {
    padding: 0.75rem 1.25rem;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

[data-theme="dark"] .card-footer {
    background-color: #495057;
    border-top-color: #6c757d;
}

/* Modal styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-modal);
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal.show {
    display: block;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 0.5rem;
    pointer-events: none;
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
    }
    
    .modal-dialog.modal-lg {
        max-width: 800px;
    }
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    outline: 0;
}

[data-theme="dark"] .modal-content {
    background-color: #343a40;
    border-color: #495057;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
}

[data-theme="dark"] .modal-header {
    border-bottom-color: #495057;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem;
    border-top: 1px solid #dee2e6;
}

[data-theme="dark"] .modal-footer {
    border-top-color: #495057;
}

/* Form control styles */
.form-control,
.form-select {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    color: #f8f9fa;
    background-color: #495057;
    border-color: #6c757d;
}

.form-control:focus,
.form-select:focus {
    color: #212529;
    background-color: #fff;
    border-color: #4A6F5C;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(74, 111, 92, 0.25);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    color: #f8f9fa;
    background-color: #495057;
    border-color: #4A6F5C;
}

.form-label {
    margin-bottom: 0.5rem;
    font-weight: 500;
}

[data-theme="dark"] .form-label {
    color: #f8f9fa;
}

/* Utility classes */
.d-flex {
    display: flex !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-center {
    justify-content: center !important;
}

.align-items-center {
    align-items: center !important;
}

.text-center {
    text-align: center !important;
}

.text-end {
    text-align: end !important;
}

.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.text-muted {
    color: #6c757d !important;
}

[data-theme="dark"] .text-muted {
    color: #9ca3af !important;
}

/* Button styles */
.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.375rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.btn-primary {
    color: #fff;
    background-color: #2E4E3F;
    border-color: #2E4E3F;
}

.btn-primary:hover {
    color: #fff;
    background-color: #8C7C6B;
    border-color: #8C7C6B;
}

.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
}

.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-danger:hover {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130;
}

[data-theme="dark"] .btn-primary {
    background-color: #4A6F5C;
    border-color: #4A6F5C;
}

[data-theme="dark"] .btn-primary:hover {
    background-color: #8C7C6B;
    border-color: #8C7C6B;
}