/* KendoUI Theme Palette Mapping */
:root {
    /* Base palette mapping */
    --kendo-color-surface-alt: #141e26 !important;
    --header-primary: var(--primary) !important; /* Use primary in light mode */
    --kendo-color-primary: var(--primary) !important;
    --kendo-color-primary-hover: var(--primary-hover) !important;
    --kendo-color-primary-focus: var(--primary-focus) !important;
    --kendo-color-primary-inverse: var(--primary-inverse) !important;
    
    --kendo-color-background: var(--form-element-background-color) !important;
    --kendo-color-foreground: var(--form-element-color) !important;
    --kendo-color-border: var(--form-element-border-color) !important;
    
    --kendo-color-info: var(--info) !important;
    --kendo-color-info-hover: var(--info-hover) !important;
    --kendo-color-info-inverse: var(--info-inverse) !important;
    
    --kendo-color-success: var(--success) !important;
    --kendo-color-success-hover: var(--success-hover) !important;
    --kendo-color-success-inverse: var(--success-inverse) !important;
    
    --kendo-color-danger: var(--danger) !important;
    --kendo-color-danger-hover: var(--danger-hover) !important;
    --kendo-color-danger-inverse: var(--danger-inverse) !important;
    
    --kendo-color-card: var(--card-background-color) !important;
    --kendo-color-card-border: var(--card-border-color) !important;
    --kendo-color-section: var(--card-sectionning-background-color) !important;
    
    /* Grid specific colors */
    --grid-header-background-color: var(--card-background-color) !important;
    --grid-header-text-color: var(--h3-color, var(--color)) !important;
    --grid-cell-background-color: var(--card-background-color) !important;
    --grid-alternate-cell-background-color: rgba(0, 0, 0, 0.03) !important;
    --grid-border-color: var(--muted-border-color) !important;
    --grid-hover-background-color: var(--card-sectionning-background-color) !important;
    --grid-selected-background-color: var(--primary-focus) !important;
    --grid-selected-text-color: var(--primary-inverse) !important;
    
    --kendo-border-radius: var(--border-radius) !important;
    --kendo-transition: var(--transition) !important;
    --kendo-font-weight: var(--font-weight) !important;
    --kendo-font-family: inherit !important;
    --kendo-line-height: var(--line-height) !important;
}

/* Dropdown styling */
.k-picker.k-dropdownlist.k-picker-solid.k-picker-md.k-rounded-md {
    padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
    /*padding-left: var(--form-element-spacing-horizontal) !important;*/
    -webkit-padding-start: var(--form-element-spacing-horizontal) !important;
    /* padding-inline-start: var(--form-element-spacing-horizontal) !important;*/
    -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
    padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
    background-image: var(--icon-chevron) !important;
    background-position: center right .75rem !important;
    background-size: 1rem auto !important;
    background-repeat: no-repeat !important;
    /*margin-bottom: var(--spacing) !important;*/
    --background-color: var(--form-element-background-color) !important;
    --border-color: var(--form-element-border-color) !important;
    --color: var(--form-element-color) !important;
    --box-shadow: none !important;
    border: var(--border-width) solid var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    outline: 0 !important;
    background-color: var(--background-color) !important;
    box-shadow: var(--box-shadow) !important;
    color: var(--color) !important;
    font-weight: var(--font-weight) !important;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition) !important;
    appearance: none !important;
    /*padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal) !important;
    width: 100% !important;*/
    text-transform: none !important;
    font-size: 1rem !important;
    line-height: var(--line-height) !important;
    font-family: inherit !important;
    letter-spacing: inherit !important;
    box-sizing: border-box !important;
    --block-spacing-vertical: calc(var(--spacing) * 3) !important;
    visibility: visible !important;
}
  
.k-dropdownlist .k-input-inner {
    width: 100% !important;
    height: 100% !important;
    margin: unset !important;
}
  
.k-dropdownlist .k-input-value-text {
    margin-bottom: unset !important;
    background-color: unset !important;
    border: unset !important;
}
  
.k-dropdownlist .k-input-button {
    display: none !important;
}

/* Grid styling overrides */
.k-grid {
    background-color: var(--card-background-color) !important;
    color: var(--form-element-color) !important;
    border: var(--border-width) solid var(--grid-border-color) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--card-box-shadow) !important;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition) !important;
}

/* Grid header styling */
.k-grid-header {
    background-color: var(--grid-header-background-color) !important;
    color: var(--grid-header-text-color) !important;
    border-color: var(--grid-border-color) !important;
}

.k-grid-header .k-header {
    font-weight: var(--font-weight) !important;
    border-color: var(--grid-border-color) !important;
}

.k-grid-header .k-header .k-link {
    color: var(--grid-header-text-color) !important;
}

/* Grid content/rows styling */
.k-grid-content {
    background-color: var(--grid-cell-background-color) !important;
    color: var(--color) !important;
}

.k-grid tr {
    transition: background-color 0.2s ease !important;
    background-color: var(--grid-cell-background-color) !important;
    color: var(--color) !important;
}

.k-grid tr:hover {
    background-color: var(--grid-hover-background-color) !important;
}

.k-grid td {
    border-color: var(--grid-border-color) !important;
    padding: 0.5rem 0.75rem !important;
    background-color: inherit !important;
    color: inherit !important;
}

/* Selected row styling */
.k-grid tr.k-state-selected {
    background-color: var(--grid-selected-background-color) !important;
    color: var(--grid-selected-text-color) !important;
}

/* Alternating row colors */
.k-grid tbody tr:nth-child(even) {
    background-color: var(--grid-alternate-cell-background-color) !important;
}

/* Pagination styling */
.k-pager-wrap {
    background-color: var(--grid-header-background-color) !important;
    color: var(--grid-header-text-color) !important;
    border-color: var(--grid-border-color) !important;
    border-top-width: 1px !important;
}

/* Remove padding from pager */
.k-pager-md, .k-pager-sm, .k-pager-lg {
    padding-inline: 0 !important;
}

/* Pagination dropdown styling */
.k-pager-wrap .k-picker.k-dropdownlist.k-picker-solid.k-picker-md.k-rounded-md {
    margin-bottom: unset !important;
    padding: unset !important;
    line-height: unset !important;
}

/* Pagination button styling to match Pico CSS */
.k-pager-wrap .k-button {
    display: inline-block !important;
    width: auto !important;
    margin-bottom: 0 !important;
    background-color: var(--secondary) !important;
    color: var(--secondary-inverse) !important;
    border: var(--border-width) solid var(--secondary) !important;
    border-radius: var(--border-radius) !important;
    outline: 0 !important;
    font-weight: var(--font-weight) !important;
    text-align: center !important;
    text-decoration: none !important;
    font-size: 1rem !important;
    padding: 0.5rem 0.75rem !important;
    cursor: pointer !important;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition) !important;
}

.k-pager-wrap .k-button:hover {
    background-color: var(--secondary-hover) !important;
    border-color: var(--secondary-hover) !important;
    color: var(--secondary-inverse) !important;
}

.k-pager-wrap .k-button:focus {
    background-color: var(--secondary-focus) !important;
    border-color: var(--secondary-hover) !important;
    color: var(--secondary-inverse) !important;
    box-shadow: var(--button-box-shadow) !important;
}

.k-pager-wrap .k-state-selected,
.k-pager-wrap .k-state-selected:hover {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-inverse) !important;
}

/* No records message styling */
.k-grid-norecords {
    color: var(--muted-color) !important;
    background-color: var(--form-element-background-color) !important;
    padding: 1rem !important;
    text-align: center !important;
}

/* Command button styling (Edit/Delete buttons) */
.k-grid .k-button {
    border-radius: var(--border-radius) !important;
    padding: 0.375rem 0.75rem !important;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition) !important;
}

.k-grid .k-grid-edit {
    background-color: var(--info) !important;
    color: var(--info-inverse) !important;
    border-color: var(--info) !important;
}

.k-grid .k-grid-edit:hover {
    background-color: var(--info-hover) !important;
    border-color: var(--info-hover) !important;
}

.k-grid .k-grid-delete, 
.k-grid .k-grid-destroy {
    background-color: var(--danger) !important;
    color: var(--danger-inverse) !important;
    border-color: var(--danger) !important;
}

.k-grid .k-grid-delete:hover,
.k-grid .k-grid-destroy:hover {
    background-color: var(--danger-hover) !important;
    border-color: var(--danger-hover) !important;
}

/* Grid icons styling */
.k-grid .k-icon {
    color: inherit !important;
}

/* Radio button styling */
.k-radio-label::before {
    background-color: var(--form-element-background-color) !important;
    border-color: var(--form-element-border-color) !important;
    border-radius: 50% !important;
    transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition) !important;
}

.k-radio:checked + .k-radio-label::after {
    background-color: var(--primary) !important;
    border-radius: 50% !important;
}

.k-radio:focus + .k-radio-label::before {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.2rem var(--primary-focus) !important;
}

/* Checkboxes styling */
.k-checkbox-label::before {
    background-color: var(--form-element-background-color) !important;
    border-color: var(--form-element-border-color) !important;
    border-radius: var(--border-radius) !important;
    transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition) !important;
}

.k-checkbox:checked + .k-checkbox-label::before {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.k-checkbox:focus + .k-checkbox-label::before {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.2rem var(--primary-focus) !important;
}

.k-checkbox:checked + .k-checkbox-label::after {
    color: var(--primary-inverse) !important;
}

/* Dark theme specific adjustments */
[data-theme="dark"] {
    --header-primary: #141e26 !important;
    --grid-header-background-color: var(--card-background-color) !important;
    --grid-cell-background-color: var(--card-background-color) !important;
    --grid-border-color: rgba(255, 255, 255, 0.2) !important;
    --grid-alternate-cell-background-color: rgba(255, 255, 255, 0.05) !important;
    --grid-hover-background-color: rgba(255, 255, 255, 0.1) !important;
}

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

[data-theme="dark"] .k-grid-header {
    background-color: var(--grid-header-background-color) !important;
}

[data-theme="dark"] .k-grid-header .k-header .k-link {
    color: var(--grid-header-text-color) !important;
}

[data-theme="dark"] .k-pager-wrap {
    background-color: var(--grid-header-background-color) !important;
    border-color: var(--grid-border-color) !important;
}

[data-theme="dark"] .k-grid tbody tr:nth-child(even) {
    background-color: var(--grid-alternate-cell-background-color) !important;
}

[data-theme="dark"] .k-grid-content {
    background-color: var(--card-background-color) !important;
    color: var(--color) !important;
}

[data-theme="dark"] .k-grid tr {
    background-color: var(--card-background-color) !important;
    color: var(--color) !important;
}

[data-theme="dark"] .k-grid td {
    background-color: inherit !important;
    color: inherit !important;
}

[data-theme="dark"] .k-grid tr:hover {
    background-color: var(--grid-hover-background-color) !important;
}

[data-theme="dark"] .k-grid tr.k-state-selected {
    background-color: var(--primary) !important;
    color: var(--primary-inverse) !important;
}

/* Media query for automatic dark mode detection */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --grid-header-background-color: var(--card-background-color) !important;
        --grid-border-color: rgba(255, 255, 255, 0.2) !important;
        --grid-alternate-cell-background-color: rgba(255, 255, 255, 0.05) !important;
        --grid-hover-background-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    :root:not([data-theme="light"]) .k-grid-header {
        background-color: var(--grid-header-background-color) !important;
    }
    
    :root:not([data-theme="light"]) .k-grid-header .k-header .k-link {
        color: var(--grid-header-text-color) !important;
    }
    
    :root:not([data-theme="light"]) .k-pager-wrap {
        background-color: var(--grid-header-background-color) !important;
    }
    
    :root:not([data-theme="light"]) .k-grid tr:hover {
        background-color: var(--grid-hover-background-color) !important;
    }
}

/* Popup styling for dropdowns within grid */
.k-animation-container .k-list-container {
    background-color: var(--form-element-background-color) !important;
    color: var(--form-element-color) !important;
    border-color: var(--form-element-border-color) !important;
    border-radius: var(--border-radius) !important;
}

.k-animation-container .k-list-item.k-selected {
    background-color: var(--primary) !important;
    color: var(--primary-inverse) !important;
}

.k-animation-container .k-list-item:hover {
    background-color: var(--primary-hover) !important;
    color: var(--primary-inverse) !important;
}

.k-grid .k-pager{
    background-color: unset;
}

.k-animation-container .k-child-animation-container .k-list-container.k-popup.k-dropdownlist-popup .k-list{
    border-color: var(--border-color);
    color: var(--form-element-color);
    background-color: var(--card-background-color);
}

/* Editor styling */
.k-editor {
    background-color: var(--card-background-color) !important;
    color: var(--color) !important;
    border-color: var(--form-element-border-color) !important;
}

.k-editor-toolbar {
    background-color: var(--card-sectionning-background-color) !important;
    border-color: var(--form-element-border-color) !important;
}

.k-editor-dialog, 
.k-editor-dialog .k-window-content {
    background-color: var(--card-background-color) !important;
    color: var(--color) !important;
}

.k-editor-inline.k-active {
    background-color: var(--card-background-color) !important;
    color: var(--color) !important;
}

/* Kendo UI Editor iframe content area */
.k-content.k-iframe {
    background-color: var(--card-background-color) !important;
    color: var(--color) !important;
    border-color: var(--form-element-border-color) !important;
}

/* General k-content override for consistency */
.k-content {
    background-color: var(--card-background-color) !important;
    color: var(--color) !important;
    border-color: var(--form-element-border-color) !important;
}

/* Dropdowns within editors and toolbars */
.k-toolbar .k-dropdown,
.k-editor .k-dropdown {
    background-color: var(--form-element-background-color) !important;
    color: var(--form-element-color) !important;
    border-color: var(--form-element-border-color) !important;
}

.k-toolbar .k-dropdown .k-dropdown-wrap,
.k-editor .k-dropdown .k-dropdown-wrap {
    background-color: var(--form-element-background-color) !important;
    color: var(--form-element-color) !important;
}

/* Select dropdowns in any context */
.k-dropdown .k-dropdown-wrap {
    background-color: var(--form-element-background-color) !important;
    color: var(--form-element-color) !important;
}

/* Modal dialog styling */
.k-dialog {
    background-color: var(--card-background-color) !important;
    color: var(--color) !important;
    border-color: var(--card-border-color) !important;
}

.k-dialog .k-dialog-titlebar {
    background-color: var(--grid-header-background-color) !important;
    color: var(--grid-header-text-color) !important;
}

.k-toolbar-solid{
    background-color: var(--card-background-color) !important;
    color: var(--color) !important;
}

/* Text inputs in kendo context */
.k-input, 
.k-textbox,
.k-textarea {
    background-color: var(--form-element-background-color) !important;
    color: var(--form-element-color) !important;
    border-color: var(--form-element-border-color) !important;
}

/* Numeric and date inputs */
.k-numerictextbox, 
.k-datepicker,
.k-datetimepicker,
.k-timepicker {
    background-color: var(--form-element-background-color) !important;
    color: var(--form-element-color) !important;
    border-color: var(--form-element-border-color) !important;
}

/* Window styling */
.k-window {
    background-color: var(--card-background-color) !important;
    color: var(--color) !important;
    border-color: var(--card-border-color) !important;
}

.k-window-titlebar {
    background-color: var(--grid-header-background-color) !important;
    color: var(--grid-header-text-color) !important;
}

/* Dark theme specific for form elements */
[data-theme="dark"] .k-dropdown .k-dropdown-wrap {
    background-color: var(--form-element-background-color) !important;
    color: var(--color) !important;
}

[data-theme="dark"] .k-textbox,
[data-theme="dark"] .k-textarea {
    background-color: var(--form-element-background-color) !important;
    color: var(--color) !important;
}

[data-theme="dark"] .k-dialog-titlebar,
[data-theme="dark"] .k-window-titlebar {
    background-color: var(--grid-header-background-color) !important;
}

/* Focus state for all form elements */
.k-input:focus,
.k-textbox:focus,
.k-textarea:focus,
.k-dropdown:focus,
.k-datepicker:focus,
.k-timepicker:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.2rem var(--primary-focus) !important;
}

/* Grid styling */
.k-table-thead {
    background: var(--card-background-color) !important;
    color: var(--color) !important;
}

/* Comprehensive dark theme Kendo UI overrides */
[data-theme="dark"] {
    /* Define dark theme CSS variables for Kendo components */
    --kendo-color-surface: #1e1e1e !important;
    --kendo-color-on-surface: #ffffff !important;
    --kendo-color-surface-alt: #2d2d2d !important;
    --kendo-color-border-dark: #3c3c3c !important;
}

/* All Kendo UI components dark theme */
[data-theme="dark"] .k-widget,
[data-theme="dark"] .k-button,
[data-theme="dark"] .k-input,
[data-theme="dark"] .k-textbox,
[data-theme="dark"] .k-textarea,
[data-theme="dark"] .k-dropdown,
[data-theme="dark"] .k-combobox,
[data-theme="dark"] .k-datepicker,
[data-theme="dark"] .k-timepicker,
[data-theme="dark"] .k-numerictextbox,
[data-theme="dark"] .k-slider,
[data-theme="dark"] .k-switch,
[data-theme="dark"] .k-colorpicker {
    background-color: var(--form-element-background-color) !important;
    color: var(--form-element-color) !important;
    border-color: var(--form-element-border-color) !important;
}

/* Dark theme buttons */
[data-theme="dark"] .k-button {
    background-color: var(--secondary) !important;
    color: var(--secondary-inverse) !important;
    border-color: var(--secondary) !important;
}

[data-theme="dark"] .k-button:hover {
    background-color: var(--secondary-hover) !important;
    border-color: var(--secondary-hover) !important;
}

[data-theme="dark"] .k-button-primary {
    background-color: var(--primary) !important;
    color: var(--primary-inverse) !important;
    border-color: var(--primary) !important;
}

[data-theme="dark"] .k-button-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* Dark theme dropdowns and popups */
[data-theme="dark"] .k-popup,
[data-theme="dark"] .k-list-container,
[data-theme="dark"] .k-animation-container,
[data-theme="dark"] .k-dropdown-popup {
    background-color: var(--card-background-color) !important;
    border-color: var(--card-border-color) !important;
    color: var(--color) !important;
}

[data-theme="dark"] .k-list-item {
    color: var(--color) !important;
    background-color: transparent !important;
}

[data-theme="dark"] .k-list-item:hover {
    background-color: var(--primary-hover) !important;
    color: var(--primary-inverse) !important;
}

[data-theme="dark"] .k-list-item.k-selected {
    background-color: var(--primary) !important;
    color: var(--primary-inverse) !important;
}

/* Dark theme form inputs */
[data-theme="dark"] .k-input-inner,
[data-theme="dark"] .k-input-value-text {
    background-color: transparent !important;
    color: var(--form-element-color) !important;
}

/* Dark theme picker components */
[data-theme="dark"] .k-picker,
[data-theme="dark"] .k-picker-solid {
    background-color: var(--form-element-background-color) !important;
    color: var(--form-element-color) !important;
    border-color: var(--form-element-border-color) !important;
}

/* Dark theme switch component */
[data-theme="dark"] .k-switch {
    background-color: var(--form-element-border-color) !important;
}

[data-theme="dark"] .k-switch-on {
    background-color: var(--primary) !important;
}

[data-theme="dark"] .k-switch-handle {
    background-color: var(--form-element-background-color) !important;
}

/* Light theme switch component */
[data-theme="light"] .k-switch-off .k-switch-track {
    background-color: var(--form-element-background-color) !important;
}

/* Dark theme radio buttons and checkboxes */
[data-theme="dark"] .k-radio-label::before,
[data-theme="dark"] .k-checkbox-label::before {
    background-color: var(--form-element-background-color) !important;
    border-color: var(--form-element-border-color) !important;
}

[data-theme="dark"] .k-radio:checked + .k-radio-label::after {
    background-color: var(--primary) !important;
}

[data-theme="dark"] .k-checkbox:checked + .k-checkbox-label::before {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

[data-theme="dark"] .k-checkbox:checked + .k-checkbox-label::after {
    color: var(--primary-inverse) !important;
}

/* Dark theme sliders */
[data-theme="dark"] .k-slider-track {
    background-color: var(--form-element-border-color) !important;
}

[data-theme="dark"] .k-slider-selection {
    background-color: var(--primary) !important;
}

[data-theme="dark"] .k-draghandle {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* Dark theme windows and dialogs */
[data-theme="dark"] .k-window,
[data-theme="dark"] .k-dialog {
    background-color: var(--card-background-color) !important;
    color: var(--color) !important;
    border-color: var(--card-border-color) !important;
}

[data-theme="dark"] .k-window-titlebar,
[data-theme="dark"] .k-dialog-titlebar {
    background-color: var(--grid-header-background-color) !important;
    color: var(--grid-header-text-color) !important;
}

/* Dark theme colorpicker */
[data-theme="dark"] .k-colorpicker-popup {
    background-color: var(--card-background-color) !important;
    border-color: var(--card-border-color) !important;
}

[data-theme="dark"] .k-hsv-rectangle,
[data-theme="dark"] .k-hue-slider {
    border-color: var(--form-element-border-color) !important;
}

/* Dark theme focus states */
[data-theme="dark"] .k-input:focus,
[data-theme="dark"] .k-textbox:focus,
[data-theme="dark"] .k-textarea:focus,
[data-theme="dark"] .k-dropdown:focus,
[data-theme="dark"] .k-picker:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.2rem var(--primary-focus) !important;
}

/* Dark theme disabled states */
[data-theme="dark"] .k-state-disabled,
[data-theme="dark"] .k-state-disabled .k-input,
[data-theme="dark"] .k-state-disabled .k-input-inner {
    background-color: var(--form-element-disabled-background-color, rgba(255, 255, 255, 0.05)) !important;
    color: var(--muted-color) !important;
    opacity: 0.6 !important;
}

/* Dark theme editor iframe content */
[data-theme="dark"] .k-content.k-iframe,
[data-theme="dark"] .k-content {
    background-color: var(--card-background-color) !important;
    color: var(--color) !important;
    border-color: var(--form-element-border-color) !important;
}

/* Fix Kendo UI radio buttons - override global theme CSS */
.k-radio {
    background-color: transparent !important;
}

/* Radio button checked state with white circle - applies regardless of focus state */
.k-radio:checked, 
.k-radio.k-checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='var%28--kendo-color-on-primary, %23ffffff%29'/%3e%3c/svg%3e") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

/* Kendo Editor Context Menu Theme Overrides */
.k-animation-container .k-popup.k-popup,
.k-animation-container .k-context-menu,
.k-animation-container .k-menu {
    background-color: var(--card-background-color) !important;
    color: var(--color) !important;
    border-color: var(--card-border-color) !important;
    box-shadow: var(--card-box-shadow) !important;
}

.k-context-menu .k-menu-item,
.k-menu .k-menu-item {
    background-color: transparent !important;
    color: var(--color) !important;
}

.k-context-menu .k-menu-item:hover,
.k-menu .k-menu-item:hover {
    background-color: var(--primary-hover) !important;
    color: var(--color) !important;
}

.k-context-menu .k-menu-item.k-state-focused,
.k-menu .k-menu-item.k-state-focused {
    background-color: var(--primary) !important;
    color: var(--primary-inverse) !important;
}

.k-context-menu .k-menu-link,
.k-menu .k-menu-link {
    color: inherit !important;
}

.k-context-menu .k-menu-link-text,
.k-menu .k-menu-link-text {
    color: inherit !important;
}

.k-context-menu .k-icon,
.k-menu .k-icon {
    color: inherit !important;
}

/* Dark theme specific overrides for editor context menu */
[data-theme="dark"] .k-animation-container .k-popup,
[data-theme="dark"] .k-animation-container .k-context-menu,
[data-theme="dark"] .k-animation-container .k-menu {
    background-color: var(--card-background-color) !important;
    color: var(--color) !important;
    border-color: var(--form-element-border-color) !important;
}

[data-theme="dark"] .k-context-menu .k-menu-item,
[data-theme="dark"] .k-menu .k-menu-item {
    background-color: transparent !important;
    color: var(--color) !important;
}

[data-theme="dark"] .k-context-menu .k-menu-item:hover,
[data-theme="dark"] .k-menu .k-menu-item:hover {
    background-color: var(--primary-hover) !important;
    color: var(--color) !important;
}

[data-theme="dark"] .k-context-menu .k-menu-item.k-disabled,
[data-theme="dark"] .k-menu .k-menu-item.k-disabled {
    color: var(--muted-color) !important;
    opacity: 0.6 !important;
}

/* Media query for automatic dark mode detection */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .k-animation-container .k-popup,
    :root:not([data-theme="light"]) .k-animation-container .k-context-menu,
    :root:not([data-theme="light"]) .k-animation-container .k-menu {
        background-color: var(--card-background-color) !important;
        color: var(--color) !important;
        border-color: var(--form-element-border-color) !important;
    }
    
    :root:not([data-theme="light"]) .k-context-menu .k-menu-item,
    :root:not([data-theme="light"]) .k-menu .k-menu-item {
        background-color: transparent !important;
        color: var(--color) !important;
    }
    
    :root:not([data-theme="light"]) .k-context-menu .k-menu-item:hover,
    :root:not([data-theme="light"]) .k-menu .k-menu-item:hover {
        background-color: var(--primary-hover) !important;
        color: var(--color) !important;
    }
}

/* Kendo Editor Toolbar Button Dark Theme Fixes */
[data-theme="dark"] .k-editor-toolbar .k-button,
[data-theme="dark"] .k-toolbar .k-button {
    background-color: #2a2a2a !important;
    color: var(--color) !important;
    border-color: #404040 !important;
}

[data-theme="dark"] .k-editor-toolbar .k-button:hover,
[data-theme="dark"] .k-toolbar .k-button:hover {
    background-color: #404040 !important;
    border-color: #555555 !important;
}

[data-theme="dark"] .k-editor-toolbar .k-button.k-state-active,
[data-theme="dark"] .k-toolbar .k-button.k-state-active {
    background-color: var(--primary) !important;
    color: var(--primary-inverse) !important;
    border-color: var(--primary) !important;
}

/* Media query for automatic dark mode detection */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .k-editor-toolbar .k-button,
    :root:not([data-theme="light"]) .k-toolbar .k-button {
        background-color: #2a2a2a !important;
        color: var(--color) !important;
        border-color: #404040 !important;
    }
    
    :root:not([data-theme="light"]) .k-editor-toolbar .k-button:hover,
    :root:not([data-theme="light"]) .k-toolbar .k-button:hover {
        background-color: #404040 !important;
        border-color: #555555 !important;
    }
    
    :root:not([data-theme="light"]) .k-editor-toolbar .k-button.k-state-active,
    :root:not([data-theme="light"]) .k-toolbar .k-button.k-state-active {
        background-color: var(--primary) !important;
        color: var(--primary-inverse) !important;
        border-color: var(--primary) !important;
    }
}

/* Kendo UI DropDownList Theme Overrides */
.k-picker.k-dropdownlist {
    background-color: var(--form-element-background-color) !important;
    color: var(--form-element-color) !important;
    border-color: var(--form-element-border-color) !important;
}

.k-picker.k-dropdownlist:hover {
    border-color: var(--primary-hover) !important;
}

.k-picker.k-dropdownlist.k-focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.2rem var(--primary-focus) !important;
}

.k-picker .k-input-inner {
    background-color: transparent !important;
    color: var(--form-element-color) !important;
}

.k-picker .k-input-value-text {
    color: var(--form-element-color) !important;
}

.k-picker .k-input-button {
    background-color: transparent !important;
    color: var(--form-element-color) !important;
    border-color: transparent !important;
}

.k-picker .k-input-button:hover {
    background-color: var(--muted-border-color) !important;
    color: var(--form-element-color) !important;
}

.k-picker .k-button-icon {
    color: inherit !important;
}

/* Dark theme specific overrides for dropdownlist */
[data-theme="dark"] .k-picker.k-dropdownlist {
    background-color: var(--form-element-background-color) !important;
    color: var(--color) !important;
    border-color: var(--form-element-border-color) !important;
}

[data-theme="dark"] .k-picker .k-input-inner,
[data-theme="dark"] .k-picker .k-input-value-text {
    background-color: transparent !important;
    color: var(--color) !important;
}

[data-theme="dark"] .k-picker .k-input-button {
    background-color: transparent !important;
    color: var(--color) !important;
}

[data-theme="dark"] .k-picker .k-input-button:hover {
    background-color: var(--muted-border-color) !important;
}

/* Media query for automatic dark mode detection */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .k-picker.k-dropdownlist {
        background-color: var(--form-element-background-color) !important;
        color: var(--color) !important;
        border-color: var(--form-element-border-color) !important;
    }
    
    :root:not([data-theme="light"]) .k-picker .k-input-inner,
    :root:not([data-theme="light"]) .k-picker .k-input-value-text {
        background-color: transparent !important;
        color: var(--color) !important;
    }
    
    :root:not([data-theme="light"]) .k-picker .k-input-button {
        background-color: transparent !important;
        color: var(--color) !important;
    }
}

/* Kendo Editor Font/Size Dropdown and ComboBox Theme Overrides */
.k-animation-container .k-list-container.k-popup.k-combobox-popup,
.k-animation-container .k-list-container.k-popup.k-dropdownlist-popup {
    background-color: var(--card-background-color) !important;
    color: var(--color) !important;
    border-color: var(--card-border-color) !important;
    box-shadow: var(--card-box-shadow) !important;
}

.k-list-container .k-list,
.k-list-container .k-list-content,
.k-list-container .k-list-scroller {
    background-color: transparent !important;
    color: inherit !important;
}

.k-list-container .k-list-item {
    background-color: transparent !important;
    color: var(--color) !important;
}

.k-list-container .k-list-item:hover {
    background-color: var(--primary-hover) !important;
    color: var(--primary-inverse) !important;
}

.k-list-container .k-list-item.k-selected,
.k-list-container .k-list-item.k-focus {
    background-color: var(--primary) !important;
    color: var(--primary-inverse) !important;
}

.k-list-container .k-list-item-text {
    color: inherit !important;
}

.k-list-container .k-no-data {
    background-color: transparent !important;
    color: var(--muted-color) !important;
}

/* Kendo Editor ColorPicker Theme Overrides */
.k-animation-container .k-colorpicker-popup {
    background-color: var(--card-background-color) !important;
    color: var(--color) !important;
    border-color: var(--card-border-color) !important;
    box-shadow: var(--card-box-shadow) !important;
}

.k-colorpicker-popup .k-flatcolorpicker,
.k-colorpicker-popup .k-coloreditor {
    background-color: transparent !important;
    color: inherit !important;
}

.k-colorpicker-popup .k-coloreditor-header {
    background-color: transparent !important;
    color: inherit !important;
    border-color: var(--form-element-border-color) !important;
}

.k-colorpicker-popup .k-coloreditor-views {
    background-color: transparent !important;
}

.k-colorpicker-popup .k-colorpalette {
    background-color: transparent !important;
    border-color: var(--form-element-border-color) !important;
}

.k-colorpicker-popup .k-colorpalette-table {
    background-color: transparent !important;
}

.k-colorpicker-popup .k-colorpalette-tile {
    border-color: var(--form-element-border-color) !important;
}

.k-colorpicker-popup .k-colorpalette-tile:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px var(--primary-focus) !important;
}

/* Dark theme specific overrides for editor dropdowns and colorpicker */
[data-theme="dark"] .k-animation-container .k-list-container.k-popup,
[data-theme="dark"] .k-animation-container .k-colorpicker-popup {
    background-color: var(--card-background-color) !important;
    color: var(--color) !important;
    border-color: var(--form-element-border-color) !important;
}

[data-theme="dark"] .k-list-container .k-list-item {
    background-color: transparent !important;
    color: var(--color) !important;
}

[data-theme="dark"] .k-list-container .k-list-item:hover {
    background-color: var(--primary-hover) !important;
    color: var(--primary-inverse) !important;
}

[data-theme="dark"] .k-list-container .k-list-item.k-selected,
[data-theme="dark"] .k-list-container .k-list-item.k-focus {
    background-color: var(--primary) !important;
    color: var(--primary-inverse) !important;
}

[data-theme="dark"] .k-colorpicker-popup .k-flatcolorpicker,
[data-theme="dark"] .k-colorpicker-popup .k-coloreditor {
    background-color: transparent !important;
    color: var(--color) !important;
}

[data-theme="dark"] .k-colorpicker-popup .k-colorpalette {
    background-color: transparent !important;
    border-color: var(--form-element-border-color) !important;
}

/* Media query for automatic dark mode detection for editor components */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .k-animation-container .k-list-container.k-popup,
    :root:not([data-theme="light"]) .k-animation-container .k-colorpicker-popup {
        background-color: var(--card-background-color) !important;
        color: var(--color) !important;
        border-color: var(--form-element-border-color) !important;
    }
    
    :root:not([data-theme="light"]) .k-list-container .k-list-item {
        background-color: transparent !important;
        color: var(--color) !important;
    }
    
    :root:not([data-theme="light"]) .k-list-container .k-list-item:hover {
        background-color: var(--primary-hover) !important;
        color: var(--primary-inverse) !important;
    }
    
    :root:not([data-theme="light"]) .k-list-container .k-list-item.k-selected,
    :root:not([data-theme="light"]) .k-list-container .k-list-item.k-focus {
        background-color: var(--primary) !important;
        color: var(--primary-inverse) !important;
    }
}

/* Kendo PanelBar Theme Overrides */
.k-panelbar {
    background-color: transparent !important;
    color: var(--color) !important;
    border-color: var(--card-border-color) !important;
}

.k-panelbar > li {
    border-color: var(--card-border-color) !important;
    background-color: transparent !important;
}

.k-panelbar > li.k-expanded {
    background-color: transparent !important;
}

.k-panelbar > li > .k-link,
.k-panelbar > li > .k-panel-title,
.k-panelbar .k-header {
    background-color: var(--card-sectionning-background-color) !important;
    color: var(--color) !important;
    border-color: var(--card-border-color) !important;
    padding: 1rem !important;
    font-weight: var(--font-weight) !important;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition) !important;
}

.k-panelbar > li > .k-link:hover,
.k-panelbar > li > .k-panel-title:hover,
.k-panelbar .k-header:hover {
    background-color: var(--primary-hover) !important;
    color: var(--primary-inverse) !important;
}

.k-panelbar > li > .k-link.k-expanded,
.k-panelbar > li > .k-panel-title.k-expanded,
.k-panelbar .k-header.k-expanded,
.k-panelbar > li.k-expanded > .k-link,
.k-panelbar > li.k-expanded > .k-panel-title {
    background-color: var(--primary) !important;
    color: var(--primary-inverse) !important;
    border-color: var(--primary) !important;
}

.k-panelbar > li > .k-link.k-expanded:hover,
.k-panelbar > li > .k-panel-title.k-expanded:hover,
.k-panelbar .k-header.k-expanded:hover {
    background-color: var(--primary-focus) !important;
    color: var(--primary-inverse) !important;
    border-color: var(--primary-focus) !important;
}

.k-panelbar .k-content,
.k-panelbar > li > div {
    background-color: var(--card-background-color) !important;
    color: var(--color) !important;
    border-color: var(--card-border-color) !important;
    padding: 1rem !important;
}

.k-panelbar .k-icon {
    color: inherit !important;
}

.k-panelbar .k-link .k-icon {
    color: inherit !important;
}

/* Dark theme specific overrides for PanelBar */
[data-theme="dark"] .k-panelbar {
    background-color: transparent !important;
    color: var(--color) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .k-panelbar > li {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background-color: transparent !important;
}

[data-theme="dark"] .k-panelbar > li > .k-link,
[data-theme="dark"] .k-panelbar > li > .k-panel-title,
[data-theme="dark"] .k-panelbar .k-header {
    background-color: var(--card-sectionning-background-color) !important;
    color: var(--color) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .k-panelbar > li > .k-link:hover,
[data-theme="dark"] .k-panelbar > li > .k-panel-title:hover,
[data-theme="dark"] .k-panelbar .k-header:hover {
    background-color: var(--primary-hover) !important;
    color: var(--primary-inverse) !important;
}

[data-theme="dark"] .k-panelbar > li > .k-link.k-expanded,
[data-theme="dark"] .k-panelbar > li > .k-panel-title.k-expanded,
[data-theme="dark"] .k-panelbar .k-header.k-expanded,
[data-theme="dark"] .k-panelbar > li.k-expanded > .k-link,
[data-theme="dark"] .k-panelbar > li.k-expanded > .k-panel-title {
    background-color: var(--primary) !important;
    color: var(--primary-inverse) !important;
    border-color: var(--primary) !important;
}

[data-theme="dark"] .k-panelbar .k-content,
[data-theme="dark"] .k-panelbar > li > div {
    background-color: var(--card-background-color) !important;
    color: var(--color) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Media query for automatic dark mode detection for PanelBar */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .k-panelbar {
        background-color: transparent !important;
        color: var(--color) !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
    }
    
    :root:not([data-theme="light"]) .k-panelbar > li {
        border-color: rgba(255, 255, 255, 0.15) !important;
        background-color: transparent !important;
    }
    
    :root:not([data-theme="light"]) .k-panelbar > li > .k-link,
    :root:not([data-theme="light"]) .k-panelbar > li > .k-panel-title,
    :root:not([data-theme="light"]) .k-panelbar .k-header {
        background-color: var(--card-sectionning-background-color) !important;
        color: var(--color) !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
    }
    
    :root:not([data-theme="light"]) .k-panelbar > li > .k-link:hover,
    :root:not([data-theme="light"]) .k-panelbar > li > .k-panel-title:hover,
    :root:not([data-theme="light"]) .k-panelbar .k-header:hover {
        background-color: var(--primary-hover) !important;
        color: var(--primary-inverse) !important;
    }
    
    :root:not([data-theme="light"]) .k-panelbar > li > .k-link.k-expanded,
    :root:not([data-theme="light"]) .k-panelbar > li > .k-panel-title.k-expanded,
    :root:not([data-theme="light"]) .k-panelbar .k-header.k-expanded,
    :root:not([data-theme="light"]) .k-panelbar > li.k-expanded > .k-link,
    :root:not([data-theme="light"]) .k-panelbar > li.k-expanded > .k-panel-title {
        background-color: var(--primary) !important;
        color: var(--primary-inverse) !important;
        border-color: var(--primary) !important;
    }
    
    :root:not([data-theme="light"]) .k-panelbar .k-content,
    :root:not([data-theme="light"]) .k-panelbar > li > div {
        background-color: var(--card-background-color) !important;
        color: var(--color) !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
    }
}