/* #region CSS Variables */
:root {
    /* Color Palette */
    --bosui-background-color: #ffffff;
    --bosui-primary-color: #0366d6;
    --bosui-primary-darker-color: #01448f;
    --bosui-primary-hover-color: #0255b3;
    --bosui-secondary-color: #e56868;
    --bosui-secondary-hover-color: #5a6268;
    --bosui-warning-color: #f7ba5a;
    --bosui-warning-hover-color: #fbc36c;
    --bosui-danger-color: #dc3545;
    --bosui-danger-hover-color: #c82333;
    --bosui-button-text-color: #ffffff;
    --bosui-button-text-outlined-color: #424242;
    --bosui-success-color: #28a745;
    --bosui-success-hover-color: #28a745;
    --bosui-info-color: #2c3e50;
    --bosui-info-hover-color: #2c3e50;
    --bosui-white-color: #ffffff;
    --bosui-light-color: #f8f9fa;
    --bosui-dark-color: #343a40;
    --bosui-primary-text-color: #424242;
    --bosui-secondary-text-color: #ffffff;
    --bosui-switch-color: #ffffff;
    --bosui-element-color: #ffffff;
    --bosui-element-off-color: #eeeeee;
    --bosui-seperator-color: #e6e6e6;
    --bosui-chart-line-color: #000;
    /* Typography */
    --bosui-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bosui-font-size-base: 1rem;
    --bosui-font-weight-normal: 400;
    --bosui-font-weight-thick: 500;
    --bosui-font-weight-bold: 600;
    --bosui-font-weight-bolder: 700;
    --bosui-line-height: 1.5;
    /* Spacing */
    --bosui-spacing-xs: 0.25rem;
    --bosui-spacing-sm: 0.5rem;
    --bosui-spacing-md: 1rem;
    --bosui-spacing-lg: 1.5rem;
    --bosui-spacing-xl: 3rem;
    /* Border */
    --bosui-border-radius: 0.25rem;
    --bosui-border-width: 1px;
    --bosui-border-style: solid;
    --bosui-border-color: #dee2e6;
    --bosui-border-color-focus: #c9cbce;
    /* Transition */
    --bosui-transition-speed: 0.3s;
    --bosui-transition-speed-slow: 0.4s;
    --bosui-transition-timing: ease-in-out;
    /* Button Specific */
    --bosui-button-padding-y: 0.5rem;
    --bosui-button-padding-x: 1rem;
    --bosui-button-disabled-opacity: 0.65;
    --bosui-button-outline: none;
    /* Box Shadows */
    --bosui-shadow-color: rgba(0, 0, 0, 0.3);
    --bosui-shadow-color-darker: rgba(0, 0, 0, 0.5);
    /* Elevation levels - from subtle to pronounced */
    --bosui-shadow-xs: 0 1px 2px var(--bosui-shadow-color);
    --bosui-shadow-sm: 0 1px 3px var(--bosui-shadow-color), 0 1px 2px var(--bosui-shadow-color);
    --bosui-shadow-md: 0 4px 6px var(--bosui-shadow-color), 0 1px 3px var(--bosui-shadow-color);
    --bosui-shadow-lg: 0 10px 15px -3px var(--bosui-shadow-color), 0 4px 6px -2px var(--bosui-shadow-color);
    --bosui-shadow-xl: 0 20px 25px -5px var(--bosui-shadow-color), 0 10px 10px -5px var(--bosui-shadow-color);
    --bosui-shadow-2xl: 0 25px 50px -12px var(--bosui-shadow-color-darker);
    /* Directional shadows */
    --bosui-shadow-top: 0 -4px 6px -1px var(--bosui-shadow-color);
    --bosui-shadow-right: 4px 0 6px -1px var(--bosui-shadow-color);
    --bosui-shadow-bottom: 0 4px 6px -1px var(--bosui-shadow-color);
    --bosui-shadow-left: -4px 0 6px -1px var(--bosui-shadow-color);
    /* Special effects */
    --bosui-shadow-inner: inset 0 2px 4px 0 var(--bosui-shadow-color);
    --bosui-shadow-outline: 0 0 0 3px rgba(66, 153, 225, 0.5);
    --bosui-shadow-focus: 0 0 0 2px var(--bosui-white-color), 0 0 0 4px var(--bosui-primary-color);
    /* Card and container shadows */
    --bosui-shadow-card: 0 1px 3px var(--bosui-shadow-color), 0 1px 2px var(--bosui-shadow-color);
    --bosui-shadow-card-hover: 0 14px 28px var(--bosui-shadow-color), 0 10px 10px var(--bosui-shadow-color);
    --bosui-shadow-dropdown: var(--bosui-shadow-md);
    --bosui-shadow-modal: 0 10px 50px var(--bosui-shadow-color-darker);
    /* Button */
    --bosui-button-height: 2.8rem;
    /* Switch */
    --bosui-switch-width: 3rem;
    --bosui-switch-height: 1.5rem;
    --bosui-switch-inner-height: 1.8rem;
    --bosui-switch-inner-width: 1.8rem;
    --bosui-switch-inner-left: -2px;
    --bosui-switch-inner-bottom: -2px;
    --bosui-switch-background-color: var(--bosui-primary-darker-color);
    /* Dropdown */
    --bosui-dropdown-width: 20rem;
    --bosui-dropdown-shadow: var(--bosui-shadow-xs);
    --bosui-dropdown-outline: var(--bosui-border-width) var(--bosui-border-style) var(--bosui-border-color);
    --bosui-dropdown-seperator: 1px solid var(--bosui-seperator-color);
    --bosui-dropdown-chip-color: var(--bosui-secondary-text-color);
    /* Card */
    --bosui-card-padding: 1rem;
    --bosui-card-border-radius: .5rem;
    --bosui-card-border: none;
    --bosui-card-header-seperator: 1px solid var(--bosui-seperator-color);
    --bosui-card-header-background: var(--bosui-element-off-color);
    /* Input */
    --bosui-input-height: 2.8rem;
    --bosui-label-spacing: var(--bosui-spacing-sm);
    /* Scrollbar */
    --bosui-scrollbar-width: 10px;
    --bosui-scrollbar-height: 10px;
    --bosui-scrollbar-track-color: rgba(0, 0, 0, 0);
    --bosui-scrollbar-thumb-color: var(--bosui-element-off-color);
    --bosui-scrollbar-thumb-hover-color: var(--bosui-element-off-color);
    --bosui-scrollbar-thumb-active-color: var(--bosui-element-off-color);
    --bosui-scrollbar-border-radius: var(--bosui-border-radius);
    /* Tooltip */
    --bosui-tooltip-background: var(--bosui-element-color);
    --bosui-tooltip-text-color: var(--bosui-primary-text-color);
    --bosui-tooltip-border-radius: var(--bosui-border-radius);
    --bosui-tooltip-padding: var(--bosui-spacing-xs) var(--bosui-spacing-sm);
    --bosui-tooltip-shadow: var(--bosui-shadow-sm);
    --bosui-tooltip-max-width: 300px;
    --bosui-tooltip-arrow-size: 6px;
    --bosui-tooltip-border: 1px solid var(--bosui-border-color);
    /* Table */
    --bosui-table-cell-padding: 1rem;
    --bosui-table-border-radius: .5rem;
    --bosui-table-header-background-color: var(--bosui-white-color);
    --bosui-table-body-background-color: var(--bosui-white-color);
    /* Tabs */
    --bosui-tab-border-color: var(--bosui-border-color);
    --bosui-tab-header-background: var(--bosui-element-off-color);
    --bosui-tab-active-color: var(--bosui-primary-color);
    --bosui-tab-content-padding: var(--bosui-spacing-md);
    /* Button Component Variables */
    --bosui-button-font-family: var(--bosui-font-family);
    --bosui-button-font-size: var(--bosui-font-size-base);
    --bosui-button-font-weight: var(--bosui-font-weight-normal);
    --bosui-button-line-height: var(--bosui-line-height);
    --bosui-button-border-radius: var(--bosui-border-radius);
    --bosui-button-border-width: var(--bosui-border-width);
    --bosui-button-border-style: var(--bosui-border-style);
    --bosui-button-transition: all var(--bosui-transition-speed) var(--bosui-transition-timing);
    --bosui-button-text-color: var(--bosui-secondary-text-color);
    --bosui-button-icon-padding: var(--bosui-spacing-sm);
    --bosui-button-icon-size: 2.5rem;
    /* Input Component Variables */
    --bosui-input-padding: 0 var(--bosui-spacing-sm);
    --bosui-input-font-family: var(--bosui-font-family);
    --bosui-input-font-size: var(--bosui-font-size-base);
    --bosui-input-background-color: var(--bosui-background-color);
    --bosui-input-border: var(--bosui-border-width) var(--bosui-border-style) var(--bosui-border-color);
    --bosui-input-border-radius: var(--bosui-border-radius);
    --bosui-input-border-focus: var(--bosui-border-color-focus);
    --bosui-input-text-color: var(--bosui-primary-text-color);
    --bosui-input-disabled-opacity: var(--bosui-button-disabled-opacity);
    --bosui-input-disabled-background: var(--bosui-element-off-color);
    --bosui-input-transition: all var(--bosui-transition-speed) var(--bosui-transition-timing);
    --bosui-input-error-border-color: var(--bosui-danger-color);
    --bosui-input-error-text-color: var(--bosui-danger-color);
    --bosui-label-font-weight: var(--bosui-font-weight-thick);
    /* Card Component Variables */
    --bosui-card-background-color: var(--bosui-element-color);
    --bosui-card-text-color: var(--bosui-primary-text-color);
    --bosui-card-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    --bosui-card-transition: all var(--bosui-transition-speed) var(--bosui-transition-timing);
    --bosui-card-hover-transform: 0.25rem;
    /* Tabs Component Variables */
    --bosui-tab-header-padding: var(--bosui-spacing-sm) var(--bosui-spacing-md);
    --bosui-tab-header-gap: var(--bosui-spacing-xs);
    --bosui-tab-font-family: var(--bosui-font-family);
    --bosui-tab-font-size: var(--bosui-font-size-base);
    --bosui-tab-font-weight: var(--bosui-font-weight-thick);
    --bosui-tab-text-color: var(--bosui-primary-text-color);
    --bosui-tab-background-color: var(--bosui-element-color);
    --bosui-tab-border-radius: var(--bosui-border-radius);
    --bosui-tab-transition: all var(--bosui-transition-speed) var(--bosui-transition-timing);
    --bosui-tab-hover-background: rgba(var(--bosui-primary-color), 0.1);
    --bosui-tab-disabled-opacity: var(--bosui-button-disabled-opacity);
    --bosui-tab-border-width: var(--bosui-border-width);
    --bosui-tab-border-style: var(--bosui-border-style);
    --bosui-tab-active-border-width: 2px;
    --bosui-tab-left-min-width: 200px;
    --bosui-tab-right-min-width: 200px;
    /* Switch Component Variables */
    --bosui-switch-transition: .4s;
    --bosui-switch-border-radius: calc(var(--bosui-switch-inner-height) / 2);
    --bosui-switch-shadow: var(--bosui-shadow-inner);
    --bosui-switch-thumb-shadow: var(--bosui-shadow-sm);
    /* Dropdown Component Variables */
    --bosui-dropdown-background-color: var(--bosui-background-color);
    --bosui-dropdown-text-color: var(--bosui-primary-text-color);
    --bosui-dropdown-border-radius: var(--bosui-border-radius);
    --bosui-dropdown-padding: 0 10px;
    --bosui-dropdown-height: var(--bosui-input-height);
    --bosui-dropdown-max-height: 200px;
    --bosui-dropdown-item-padding: 10px;
    --bosui-dropdown-overlay-background: rgba(0, 0, 0, 0.5);
    --bosui-dropdown-mobile-width: 90%;
    --bosui-dropdown-mobile-max-height: 90vh;
    /* Checkbox Component Variables */
    --bosui-checkbox-size: 18px;
    --bosui-checkbox-background-color: var(--bosui-background-color);
    --bosui-checkbox-border: 1px solid var(--bosui-border-color);
    --bosui-checkbox-border-radius: var(--bosui-border-radius);
    --bosui-checkbox-transition: all var(--bosui-transition-speed) ease;
    --bosui-checkbox-checked-background: var(--bosui-primary-color);
    --bosui-checkbox-checked-border: var(--bosui-primary-color);
    --bosui-checkbox-disabled-background: var(--bosui-light-color);
    --bosui-checkbox-disabled-opacity: var(--bosui-button-disabled-opacity);
    --bosui-checkbox-label-margin: 8px;
    --bosui-checkbox-label-color: var(--bosui-primary-text-color);
    --bosui-checkbox-hover-border: var(--bosui-primary-hover-color);
    --bosui-checkbox-shadow: var(--bosui-shadow-inner);
    /* Progress Bar Component Variables */
    --bosui-progress-height: 1.5rem;
    --bosui-progress-background: var(--bosui-primary-darker-color);
    --bosui-progress-bar-background: var(--bosui-primary-color);
    --bosui-progress-border-radius: 0.75rem;
    --bosui-progress-transition: width 0.3s ease;
    --bosui-progress-label-color: var(--bosui-white-color);
    --bosui-progress-label-font-size: 0.75rem;
    /* Popup Component Variables */
    --bosui-popup-overlay-background: rgba(0, 0, 0, 0.5);
    --bosui-popup-background: var(--bosui-background-color);
    --bosui-popup-border-radius: var(--bosui-card-border-radius);
    --bosui-popup-width: 30rem;
    --bosui-popup-max-width: 90%;
    --bosui-popup-max-height: 90vh;
    --bosui-popup-shadow: var(--bosui-shadow-lg);
    --bosui-popup-text-color: var(--bosui-primary-text-color);
    --bosui-popup-z-index: 1050;
    /* Table Component Variables */
    --bosui-table-border: var(--bosui-border-width) var(--bosui-border-style) var(--bosui-border-color);
    --bosui-table-header-font-weight: var(--bosui-font-weight-bold);
    --bosui-table-text-color: var(--bosui-primary-text-color);
    --bosui-table-hover-background: var(--bosui-element-off-color);
    --bosui-table-selected-background: rgba(var(--bosui-primary-color), 0.1);
    --bosui-table-transition: background-color var(--bosui-transition-speed) var(--bosui-transition-timing);
    --bosui-table-shadow: var(--bosui-shadow-xs);
    --bosui-table-resizer-width: 5px;
    --bosui-table-resizer-hover-color: var(--bosui-primary-color);
    /* Tooltip Component Variables */
    --bosui-tooltip-font-size: 0.875rem;
    --bosui-tooltip-line-height: 1.5;
    --bosui-tooltip-z-index: 1060;
    /* Scrollbar Component Variables */
    --bosui-scrollbar-transition: background-color var(--bosui-transition-speed) var(--bosui-transition-timing);
    
    /* Color Picker Component Variables */
    --bosui-colorpicker-width: 22rem;
    --bosui-colorpicker-area-width: 280px;
    --bosui-colorpicker-area-height: 200px;
    --bosui-colorpicker-slider-width: 20px;
    --bosui-colorpicker-slider-height: 200px;
    --bosui-colorpicker-selector-size: 12px;
    --bosui-colorpicker-thumb-size: 12px;
    --bosui-colorpicker-preview-size: 44.8px;
    --bosui-colorpicker-swatch-size: 32px;
    --bosui-colorpicker-dropdown-z-index: 1000;
    --bosui-colorpicker-background: var(--bosui-element-color);
    --bosui-colorpicker-border: var(--bosui-input-border);
    --bosui-colorpicker-border-radius: var(--bosui-input-border-radius);
    --bosui-colorpicker-shadow: var(--bosui-shadow-dropdown);
    --bosui-colorpicker-text-color: var(--bosui-primary-text-color);
    --bosui-colorpicker-label-color: var(--bosui-primary-text-color);
    --bosui-colorpicker-font-family: var(--bosui-font-family);
    --bosui-colorpicker-font-size: var(--bosui-font-size-base);
    --bosui-colorpicker-transition: var(--bosui-input-transition);
    --bosui-colorpicker-section-spacing: var(--bosui-spacing-md);
    --bosui-colorpicker-gap: var(--bosui-spacing-sm);
    --bosui-colorpicker-alpha-grid-size: 8px;
    --bosui-colorpicker-alpha-grid-color: #ccc;
    --bosui-colorpicker-selector-border: 2px solid var(--bosui-white-color);
    --bosui-colorpicker-selector-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    --bosui-colorpicker-hover-transform: scale(1.1);
    --bosui-colorpicker-active-border: var(--bosui-primary-color);
    --bosui-colorpicker-disabled-opacity: var(--bosui-button-disabled-opacity);
}
/* #endregion */

body {
    background-color: var(--bosui-background-color);
    color: var(--bosui-primary-text-color);
    font-family: var(--bosui-font-family);
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}

/* #region Scrollbar */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: var(--bosui-scrollbar-width);
    height: var(--bosui-scrollbar-height);
}

::-webkit-scrollbar-track {
    background-color: var(--bosui-scrollbar-track-color);
    border-radius: var(--bosui-scrollbar-border-radius);
}

::-webkit-scrollbar-thumb {
    background-color: var(--bosui-scrollbar-thumb-color);
    border-radius: var(--bosui-scrollbar-border-radius);
    transition: background-color var(--bosui-transition-speed) var(--bosui-transition-timing);
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--bosui-scrollbar-thumb-hover-color);
    }

    ::-webkit-scrollbar-thumb:active {
        background-color: var(--bosui-scrollbar-thumb-active-color);
    }

::-webkit-scrollbar-corner {
    background-color: var(--bosui-scrollbar-track-color);
}

/* Apply styled scrollbars to specific components */
.bosui-dropdown-options,
.bosui-dropdown-mobile-items,
.bosui-popup {
    scrollbar-width: thin;
    scrollbar-color: var(--bosui-scrollbar-thumb-color) var(--bosui-scrollbar-track-color);
}

    .bosui-dropdown-options::-webkit-scrollbar,
    .bosui-dropdown-mobile-items::-webkit-scrollbar,
    .bosui-popup::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .bosui-dropdown-options::-webkit-scrollbar-track,
    .bosui-dropdown-mobile-items::-webkit-scrollbar-track,
    .bosui-popup::-webkit-scrollbar-track {
        background-color: transparent;
    }

    .bosui-dropdown-options::-webkit-scrollbar-thumb,
    .bosui-dropdown-mobile-items::-webkit-scrollbar-thumb,
    .bosui-popup::-webkit-scrollbar-thumb {
        background-color: var(--bosui-scrollbar-thumb-color);
        border-radius: var(--bosui-scrollbar-border-radius);
    }
/* #endregion */
/* #region Buttons */
.bosui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--bosui-button-padding-y) var(--bosui-button-padding-x);
    font-family: var(--bosui-button-font-family);
    font-size: var(--bosui-button-font-size);
    font-weight: var(--bosui-button-font-weight);
    line-height: var(--bosui-button-line-height);
    border-radius: var(--bosui-button-border-radius);
    border: var(--bosui-button-border-width) var(--bosui-button-border-style) transparent;
    transition: var(--bosui-button-transition);
    color: var(--bosui-button-text-color);
    cursor: pointer;
    height: var(--bosui-button-height);
    width: fit-content;
}

    .bosui-button:focus-visible {
        outline: var(--bosui-button-outline);
    }

    .bosui-button:disabled {
        opacity: var(--bosui-button-disabled-opacity);
        cursor: not-allowed;
        pointer-events: none;
    }

/* Variant styles based on enum */
.bosui-flat {
    box-shadow: none;
}

.bosui-raised {
    box-shadow: var(--bosui-shadow-sm);
}

    .bosui-raised:hover {
        box-shadow: var(--bosui-shadow-md);
    }

.bosui-outlined {
    background-color: transparent;
    box-shadow: none;
    border: var(--bosui-border-width) var(--bosui-border-style);
    border-color: currentColor;
}

.bosui-text {
    background-color: transparent !important;
    color: var(--bosui-primary-text-color);
    font-weight: var(--bosui-font-weight-thick);
    border: none;
    padding: var(--bosui-spacing-xs) var(--bosui-spacing-sm);
    box-shadow: none;
}

    .bosui-text:hover {
        box-shadow: none;
    }

/* Color styles based on enum */
.bosui-primary {
    background-color: var(--bosui-primary-color);
    color: var(--bosui-button-text-color);
    border-color: var(--bosui-primary-color);
}

    .bosui-primary:hover {
        background-color: var(--bosui-primary-hover-color);
    }

.bosui-secondary {
    background-color: var(--bosui-secondary-color);
    color: var(--bosui-button-text-color);
    border-color: var(--bosui-secondary-color);
}

    .bosui-secondary:hover {
        background-color: var(--bosui-secondary-hover-color);
    }

.bosui-danger {
    background-color: var(--bosui-danger-color);
    color: var(--bosui-button-text-color);
    border-color: var(--bosui-danger-color);
}

    .bosui-danger:hover {
        background-color: var(--bosui-danger-hover-color);
    }

.bosui-success {
    background-color: var(--bosui-success-color);
    color: var(--bosui-button-text-color);
    border-color: var(--bosui-success-color);
}

    .bosui-success:hover {
        background-color: var(--bosui-success-color);
        filter: brightness(1.02);
    }

.bosui-warning {
    background-color: var(--bosui-warning-color);
    color: var(--bosui-button-text-color);
    border-color: var(--bosui-warning-color);
}

    .bosui-warning:hover {
        filter: brightness(1.02);
    }

.bosui-info {
    background-color: var(--bosui-info-color);
    color: var(--bosui-button-text-color);
    border-color: var(--bosui-info-color);
}

    .bosui-info:hover {
        filter: brightness(1.02);
    }

.bosui-primary-text {
    color: var(--bosui-primary-text-color);
}

    .bosui-primary-text:hover {
        filter: brightness(1.02);
    }

.bosui-secondary-text {
    color: var(--bosui-secondary-text-color);
}

    .bosui-secondary-text:hover {
        filter: brightness(95%);
    }

/* Combination variant-color specific styles */
.bosui-outlined.bosui-primary {
    background-color: transparent;
    color: var(--bosui-primary-color);
}

    .bosui-outlined.bosui-primary:hover {
        background-color: var(--bosui-primary-color);
        color: var(--bosui-button-text-outlined-color);
    }

.bosui-outlined.bosui-secondary {
    background-color: transparent;
    color: var(--bosui-secondary-color);
}

    .bosui-outlined.bosui-secondary:hover {
        background-color: var(--bosui-secondary-color);
        color: var(--bosui-button-text-outlined-color);
    }

.bosui-outlined.bosui-danger {
    background-color: transparent;
    color: var(--bosui-danger-color);
}

    .bosui-outlined.bosui-danger:hover {
        background-color: var(--bosui-danger-color);
        color: var(--bosui-button-text-outlined-color);
    }

.bosui-outlined.bosui-success {
    background-color: transparent;
    color: var(--bosui-success-color);
}

    .bosui-outlined.bosui-success:hover {
        background-color: var(--bosui-success-color);
        color: var(--bosui-button-text-outlined-color);
    }

.bosui-outlined.bosui-warning {
    background-color: transparent;
    color: var(--bosui-warning-color);
}

    .bosui-outlined.bosui-warning:hover {
        background-color: var(--bosui-warning-color);
        color: var(--bosui-button-text-outlined-color);
    }

.bosui-outlined.bosui-info {
    background-color: transparent;
    color: var(--bosui-info-color);
}

    .bosui-outlined.bosui-info:hover {
        background-color: var(--bosui-info-color);
        color: var(--bosui-button-text-outlined-color);
    }

.bosui-text.bosui-primary {
    color: var(--bosui-primary-color);
}

.bosui-text.bosui-secondary {
    color: var(--bosui-secondary-color);
}

.bosui-text.bosui-danger {
    color: var(--bosui-danger-color);
}

.bosui-text.bosui-success {
    color: var(--bosui-success-color);
}

.bosui-text.bosui-warning {
    color: var(--bosui-warning-color);
}

.bosui-text.bosui-info {
    color: var(--bosui-info-color);
}

/* Support for icon buttons */
.bosui-button-icon {
    padding: var(--bosui-button-icon-padding);
    width: var(--bosui-button-icon-size);
    height: var(--bosui-button-icon-size);
}

/* Loading and icon styling */
.bosui-button .loader {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--bosui-white-color);
    animation: bosui-spin 1s ease-in-out infinite;
}

.bosui-button .check-icon {
    color: var(--bosui-white-color);
}

.button-content {
    display: flex;
    flex-direction: row;
}

@keyframes bosui-spin {
    to {
        transform: rotate(360deg);
    }
}
/* #endregion */
/* #region Button Group */
.bosui-button-group {
    display: flex;
    position: relative;
}

/* Button positioning classes for grouped styling */
.bosui-button-group-styled .bosui-btn-group-first-row {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.bosui-button-group-styled .bosui-btn-group-middle-row {
    border-radius: 0;
    border-right: none;
}

.bosui-button-group-styled .bosui-btn-group-last-row {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.bosui-button-group-styled .bosui-btn-group-first-col {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
}

.bosui-button-group-styled .bosui-btn-group-middle-col {
    border-radius: 0;
    border-bottom: none;
}

.bosui-button-group-styled .bosui-btn-group-last-col {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Separators */
.bosui-btn-separator-row::after {
    content: '';
    position: absolute;
    right: 0;
    top: 25%;
    bottom: 25%;
    width: 1px;
    background-color: var(--separator-color, var(--bosui-border-color));
    z-index: 1;
}

.bosui-btn-separator-col::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 25%;
    right: 25%;
    height: 1px;
    background-color: var(--separator-color, var(--bosui-border-color));
    z-index: 1;
}

/* Ensure buttons are positioned relative for separators */
.bosui-button-group .bosui-button {
    position: relative;
}

    /* Remove separator from last button */
    .bosui-button-group .bosui-button:last-child::after {
        display: none;
    }

    /* Selection styling */
    .bosui-button-group .bosui-button.selected {
        background-color: var(--bosui-primary-color);
        color: var(--bosui-primary-color);
        border-color: var(--bosui-primary-color);
    }

        .bosui-button-group .bosui-button.selected.bosui-outlined {
            background-color: var(--bosui-primary-color);
            color: var(--bosui-button-text-color);
        }
/* #endregion */
/* #region Switch */
.bosui-switch {
    position: relative;
    display: inline-block;
    width: var(--bosui-switch-width);
    height: var(--bosui-switch-height);
}

.bosui-switch-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
}

.bosui-switch-label {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bosui-switch-background-color);
    transition: .4s;
    border-radius: calc(var(--bosui-switch-inner-height) / 2);
    box-shadow: var(--bosui-shadow-inner);
    filter: var(--bosui-switch-filter-inactive);
}

    .bosui-switch-label:before {
        position: absolute;
        content: "";
        width: var(--bosui-switch-inner-width);
        height: var(--bosui-switch-inner-height);
        left: var(--bosui-switch-inner-left);
        bottom: var(--bosui-switch-inner-bottom);
        background-color: var(--bosui-switch-color);
        transition: .4s;
        border-radius: 50%;
        box-shadow: var(--bosui-shadow-sm);
    }

.bosui-switch-checkbox:checked + .bosui-switch-label {
    background-color: var(--bosui-switch-background-color);
    filter: var(--bosui-switch-filter-active);
}

    .bosui-switch-checkbox:checked + .bosui-switch-label:before {
        transform: translateX(calc(var(--bosui-switch-width) / 2));
    }
/* #endregion */
/* #region Dropdown */
.bosui-dropdown-container {
    width: fit-content;
}

.bosui-dropdown {
    position: relative;
    width: var(--bosui-dropdown-width);
    max-width: 100%;
    border-radius: 4px;
    height: var(--bosui-input-height);
}

.bosui-dropdown-header {
    box-shadow: var(--bosui-dropdown-shadow);
    padding: 0 10px;
    border-radius: var(--bosui-border-radius);
    border: var(--bosui-dropdown-outline);
    cursor: pointer;
    background-color: var(--bosui-background-color);
    color: var(--bosui-primary-text-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--bosui-input-height);
}

.bosui-dropdown.inset > .bosui-dropdown-header {
    box-shadow: var(--bosui-shadow-inner);
    border: none;
}

.bosui-dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bosui-background-color);
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    width: var(--bosui-dropdown-width);
    box-shadow: var(--bosui-shadow-dropdown);
}

.bosui-dropdown-item {
    padding: 10px;
    cursor: pointer;
    color: var(--bosui-primary-text-color);
}

    .bosui-dropdown-item:hover {
        background-color: var(--element-highlight);
    }

.bosui-dropdown.slim {
    padding: 5px 10px;
    width: 200px;
}

.bosui-dropdown-item.selected {
    background-color: rgba(var(--bosui-primary-color-rgb, 3, 102, 214), 0.1);
}

.bosui-dropdown-item.selected {
    background-color: rgba(3, 102, 214, 0.1);
}

.bosui-dropdown-selected-items {
    flex-direction: row;
    display: flex;
    gap: .25rem;
}

.bosui-dropdown-selected-item {
    background: var(--bosui-secondary-color);
    color: var(--bosui-dropdown-chip-color);
    padding: .3rem .75rem;
    border-radius: 1rem;
    height: fit-content;
}

.bosui-dropdown-more-items {
    padding: .3rem .25rem;
    border-radius: 1rem;
    height: fit-content;
}

.bosui-dropdown-divider {
    height: 1px;
    background-color: var(--bosui-seperator-color, #e6e6e6);
}

/* Mobile dropdown styles */
.bosui-dropdown-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.bosui-dropdown-mobile-options {
    position: relative;
    background-color: var(--bosui-background-color);
    border-radius: var(--bosui-card-border-radius);
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--bosui-shadow-lg);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.bosui-dropdown-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: var(--bosui-dropdown-seperator);
}

.bosui-dropdown-mobile-title {
    font-weight: var(--bosui-font-weight-bold);
    color: var(--bosui-primary-text-color);
}

.bosui-dropdown-mobile-close {
    font-size: 24px;
    color: var(--bosui-primary-text-color);
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

    .bosui-dropdown-mobile-close:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }

.bosui-dropdown-mobile-items {
    overflow-y: auto;
    max-height: calc(80vh - 60px);
    -webkit-overflow-scrolling: touch;
}

    .bosui-dropdown-mobile-items .bosui-dropdown-item {
        padding: 15px;
        border-bottom: var(--bosui-dropdown-seperator);
    }

        .bosui-dropdown-mobile-items .bosui-dropdown-item:last-child {
            border-bottom: none;
        }

        .bosui-dropdown-mobile-items .bosui-dropdown-item:active {
            background-color: rgba(0, 0, 0, 0.05);
        }
/* #endregion */
/* #region Card */
.bosui-card {
    position: relative;
    width: fit-content;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    border: var(--bosui-card-border);
    border-radius: var(--bosui-card-border-radius);
    background-color: var(--bosui-card-background-color);
    color: var(--bosui-card-text-color);
    box-shadow: var(--bosui-card-shadow);
    transition: var(--bosui-card-transition);
}

    .bosui-card h3 {
        margin: 0;
    }

.bosui-header {
    padding: var(--bosui-card-padding);
    border-radius: var(--bosui-card-border-radius) var(--bosui-card-border-radius) 0 0;
    align-items: center;
    border-bottom: var(--bosui-card-header-seperator)
}

.bosui-body {
    padding: var(--bosui-card-padding);
    overflow: auto;
}

    .bosui-body.standalone {
        border-radius: inherit;
    }

.bosui-footer {
    padding: var(--bosui-card-padding);
    border-radius: 0 0 var(--bosui-card-border-radius) var(--bosui-card-border-radius);
}

.bosui-card.hover-x:hover {
    cursor: pointer;
    transform: translateX(var(--bosui-card-hover-transform));
}

.bosui-card.hover-y:hover {
    cursor: pointer;
    transform: translateY(var(--bosui-card-hover-transform));
}

/* #endregion */
/* #region Sub Components */
.bosui-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: visible;
    min-height: 0;
}
/* #endregion */
/* #region Layout */
.bosui-stack {
    display: flex;
}

.bosui-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.bosui-row-reverse {
    display: flex;
    flex-direction: row-reverse;
    gap: 1rem;
}

.bosui-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bosui-column-reverse {
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
}

.bosui-jc-start {
    display: flex;
    justify-content: start;
}

.bosui-jc-between {
    display: flex;
    justify-content: space-between;
}

.bosui-jc-center {
    display: flex;
    justify-content: center;
}

.bosui-jc-around {
    display: flex;
    justify-content: space-around;
}

.bosui-jc-end {
    display: flex;
    justify-content: end;
}

.bosui-ac-start {
    align-content: start;
}

.bosui-ac-between {
    align-content: space-between;
}

.bosui-ac-center {
    align-content: center;
}

.bosui-ac-around {
    align-content: space-around;
}

.bosui-ac-end {
    align-content: end;
}

.bosui-ai-start {
    align-items: start;
}


.bosui-ai-center {
    align-items: center;
}

.bosui-ai-end {
    align-items: end;
}

.bosui-wrap {
    flex-wrap: wrap;
}

.bosui-nowrap {
    flex-wrap: nowrap;
}

.bosui-fw {
    width: 100%;
}

.bosui-fh {
    height: 100%;
}

.bosui-flex {
    display: flex;
}

.bosui-flex-full {
    flex: 1 1;
}

.bosui-np {
    padding: 0;
}

.bosui-ta-left {
    text-align: left;
}

.bosui-ta-right {
    text-align: right;
}

.bosui-ta-center {
    text-align: center;
}

.bosui-ta-start {
    text-align: start;
}

.bosui-ta-end {
    text-align: end;
}

.bosui-quick-nav {
    position: sticky;
    inset-block-start: 2rem;
}
/* #endregion */
/* #region Effect */
.clickable {
    cursor: pointer;
}

.fade-bottom {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
}

.transparent {
    background: none;
}

.bosui-mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.bosui-my-auto {
    margin-top: auto;
    margin-left: auto;
}

.bosui-m-auto {
    margin: auto;
}

.hidden {
    visibility: hidden;
}

.no-shadow {
    box-shadow: none;
}
/* #endregion*/
/* #region Grid System */
.bosui-grid {
    --bosui-grid-columns: 12;
    --bosui-grid-gap: var(--bosui-spacing-md);
    display: grid;
    grid-template-columns: repeat(var(--bosui-grid-columns), 1fr);
    gap: var(--bosui-grid-gap);
    width: 100%;
}

/* Media query fixes */
@media (min-width: 701px) and (max-width: 1200px) {
    .bosui-grid {
        --bosui-grid-columns: 6;
    }
}

@media (max-width: 700px) {
    .bosui-grid {
        --bosui-grid-columns: 2;
    }
}

/* Modern Grid-based system (replacing flex-based calculations) */
.bosui-flex-grid {
    --bosui-grid-columns: 12;
    --bosui-grid-gap: var(--bosui-spacing-md);
    display: grid;
    grid-template-columns: repeat(var(--bosui-grid-columns), 1fr);
    gap: var(--bosui-grid-gap);
    width: 100%;
    box-sizing: border-box;
}

    /* Generate grid-based columns with standard grid spans */
    .bosui-flex-grid > .bosui-col-1 {
        grid-column: span 1;
    }

    .bosui-flex-grid > .bosui-col-2 {
        grid-column: span 2;
    }

    .bosui-flex-grid > .bosui-col-3 {
        grid-column: span 3;
    }

    .bosui-flex-grid > .bosui-col-4 {
        grid-column: span 4;
    }

    .bosui-flex-grid > .bosui-col-5 {
        grid-column: span 5;
    }

    .bosui-flex-grid > .bosui-col-6 {
        grid-column: span 6;
    }

    .bosui-flex-grid > .bosui-col-7 {
        grid-column: span 7;
    }

    .bosui-flex-grid > .bosui-col-8 {
        grid-column: span 8;
    }

    .bosui-flex-grid > .bosui-col-9 {
        grid-column: span 9;
    }

    .bosui-flex-grid > .bosui-col-10 {
        grid-column: span 10;
    }

    .bosui-flex-grid > .bosui-col-11 {
        grid-column: span 11;
    }

    .bosui-flex-grid > .bosui-col-12 {
        grid-column: span 12;
    }

/* Tablet-specific column behaviors */
@media (max-width: 1023px) {
    .bosui-flex-grid {
        --bosui-grid-columns: 8;
    }

        .bosui-flex-grid > .bosui-col-md-1 {
            grid-column: span 1;
        }

        .bosui-flex-grid > .bosui-col-md-2 {
            grid-column: span 2;
        }

        .bosui-flex-grid > .bosui-col-md-3 {
            grid-column: span 3;
        }

        .bosui-flex-grid > .bosui-col-md-4 {
            grid-column: span 4;
        }

        .bosui-flex-grid > .bosui-col-md-5 {
            grid-column: span 5;
        }

        .bosui-flex-grid > .bosui-col-md-6 {
            grid-column: span 6;
        }

        .bosui-flex-grid > .bosui-col-md-7 {
            grid-column: span 7;
        }

        .bosui-flex-grid > .bosui-col-md-8 {
            grid-column: span 8;
        }

        /* Forces items to take full width on tablets regardless of desktop size */
        .bosui-flex-grid > .bosui-col-md-full {
            grid-column: 1 / -1;
        }
}

/* Mobile-specific column behaviors */
@media (max-width: 640px) {
    .bosui-flex-grid {
        --bosui-grid-columns: 4;
        --bosui-grid-gap: var(--bosui-spacing-sm);
    }

        .bosui-flex-grid > .bosui-col-sm-1 {
            grid-column: span 1;
        }

        .bosui-flex-grid > .bosui-col-sm-2 {
            grid-column: span 2;
        }

        .bosui-flex-grid > .bosui-col-sm-3 {
            grid-column: span 3;
        }

        .bosui-flex-grid > .bosui-col-sm-4 {
            grid-column: span 4;
        }

        /* Forces items to take full width on mobile regardless of desktop/tablet size */
        .bosui-flex-grid > [class*="bosui-col-"]:not([class*="bosui-col-sm-"]) {
            grid-column: 1 / -1;
        }

        /* Explicitly handle the bosui-col-sm-full class for full-width items */
        .bosui-flex-grid > .bosui-col-sm-full {
            grid-column: 1 / -1;
        }
}

/* Additional grid utilities */
.bosui-flex-grid.gap-none {
    gap: 0;
}

.bosui-flex-grid.gap-xs {
    gap: var(--bosui-spacing-xs);
}

.bosui-flex-grid.gap-sm {
    gap: var(--bosui-spacing-sm);
}

.bosui-flex-grid.gap-md {
    gap: var(--bosui-spacing-md);
}

.bosui-flex-grid.gap-lg {
    gap: var(--bosui-spacing-lg);
}

.bosui-flex-grid.gap-xl {
    gap: var(--bosui-spacing-xl);
}

/* Different row/column gaps */
.bosui-flex-grid.row-gap-sm {
    row-gap: var(--bosui-spacing-sm);
}

.bosui-flex-grid.col-gap-lg {
    column-gap: var(--bosui-spacing-lg);
}

/* Auto-fit columns that adjust based on content */
.bosui-flex-grid.content-fit {
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width, 250px), 1fr));
}

/* Auto-fill columns for maximizing column count */
.bosui-flex-grid.content-fill {
    grid-template-columns: repeat(auto-fill, minmax(var(--min-column-width, 250px), 1fr));
}

/* Fixed width columns */
.bosui-flex-grid.fixed-columns {
    grid-template-columns: repeat(auto-fit, var(--column-width, 300px));
    justify-content: center;
}

/* Row height control */
.bosui-flex-grid.auto-rows {
    grid-auto-rows: minmax(min-content, max-content);
}

/* Equal height rows */
.bosui-flex-grid.equal-height > * {
    height: 100%;
}

/* Nested grids with proper scaling */
.bosui-flex-grid .bosui-flex-grid {
    width: 100%;
}

/* Fix for overlapping grid items in some browsers */
.bosui-flex-grid > * {
    min-width: 0;
}
/* #endregion */
/* #region Popup */
.bosui-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

.bosui-popup {
    position: relative;
    background-color: var(--bosui-background-color);
    border-radius: var(--bosui-card-border-radius);
    width: 30rem;
    max-width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--bosui-shadow-lg);
    animation: slideUp 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    color: var(--bosui-primary-text-color);
    overflow: hidden;
}

    .bosui-popup > .bosui-body {
        overflow: auto;
    }

    .bosui-popup.keyboard-visible {
        max-height: 45vh;
        align-self: flex-start;
        transform: translateY(8vh)
    }

/* #endregion */
/* #region Checkbox */
.bosui-checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin: 0.25rem 0;
}

.bosui-checkbox-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.bosui-checkbox-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.bosui-checkbox-custom {
    position: relative;
    display: inline-block;
    height: 18px;
    width: 18px;
    background-color: var(--bosui-background-color, white);
    border: 1px solid var(--bosui-border-color);
    border-radius: var(--bosui-border-radius, 0.25rem);
    transition: all var(--bosui-transition-speed, 0.3s) ease;
}

.bosui-checkbox-input:not(:checked) ~ .bosui-checkbox-custom {
    box-shadow: var(--bosui-shadow-inner);
}

.bosui-checkbox-input:checked ~ .bosui-checkbox-custom {
    background-color: var(--bosui-primary-color, #0366d6);
    border-color: var(--bosui-primary-color, #0366d6);
}

.bosui-checkbox-input:disabled ~ .bosui-checkbox-custom {
    background-color: var(--bosui-light-color, #f8f9fa);
    border-color: var(--bosui-border-color, #dee2e6);
    opacity: var(--bosui-button-disabled-opacity, 0.65);
    cursor: not-allowed;
}

.bosui-checkbox-custom:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.bosui-checkbox-input:checked ~ .bosui-checkbox-custom:after {
    display: block;
}

.bosui-checkbox-input:disabled ~ .bosui-checkbox-custom:after {
    border-color: var(--bosui-secondary-color, #6c757d);
}

.bosui-checkbox-input:indeterminate ~ .bosui-checkbox-custom {
    background-color: var(--bosui-primary-color, #0366d6);
    border-color: var(--bosui-primary-color, #0366d6);
}

    .bosui-checkbox-input:indeterminate ~ .bosui-checkbox-custom:after {
        display: block;
        transform: rotate(0);
        left: 3px;
        top: 8px;
        width: 10px;
        height: 0;
        border-width: 0 0 2px 0;
    }

.bosui-checkbox-label {
    margin-left: 8px;
    user-select: none;
    line-height: 1.5;
    color: var(--bosui-primary-text-color, #424242);
}

.bosui-checkbox-container:hover .bosui-checkbox-custom {
    border-color: var(--bosui-primary-hover-color, #0255b3);
}
/* #endregion */
/* #region Progress Bar */
/* Basic Progress Bar Styles */
.bosui-progress {
    width: 100%;
    height: 1.5rem;
    background-color: var(--bosui-primary-darker-color);
    border-radius: 0.75rem;
    overflow: hidden;
    display: flex;
}

.bosui-progress-bar {
    height: 100%;
    background-color: var(--bosui-primary-color, #0366d6);
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bosui-progress-label {
    color: white;
    font-size: 0.75rem;
    white-space: nowrap;
}

@keyframes bosui-progress-animation {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 1rem 0;
    }
}

.bosui-pb-label-start {
    position: absolute;
    left: 1.75rem;
    align-self: center;
}

.bosui-pb-label-center {
    position: absolute;
    left: 50%;
    align-self: center;
    transform: translateX(-50%);
}

.bosui-pb-label-end {
    position: absolute;
    right: 1.75rem;
    align-self: center;
}

.bosui-pb-label-above {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-150%);
}

.bosui-pb-label-below {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(150%);
}
/* #endregion */
/* #region Input */

.bosui-input-wrapper{
    width: 100%;
}
.bosui-input-container {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    background-color: var(--bosui-input-background-color);
    border: var(--bosui-input-border);
    border-radius: var(--bosui-input-border-radius);
    transition: var(--bosui-input-transition);
    height: fit-content;
}

    .bosui-input-container:focus-within {
        border-color: var(--bosui-input-border-focus);
        box-shadow: none;
    }

.bosui-input {
    flex: 1;
    height: var(--bosui-input-height);
    min-width: 0;
    border: none;
    padding: var(--bosui-input-padding);
    font-family: var(--bosui-input-font-family);
    font-size: var(--bosui-input-font-size);
    color: var(--bosui-input-text-color);
    background-color: transparent;
}

    .bosui-input:focus {
        outline: none;
    }

    .bosui-input:disabled {
        cursor: not-allowed;
        opacity: var(--bosui-input-disabled-opacity);
        background-color: var(--bosui-input-disabled-background);
    }

.bosui-input-left-items {
    display: flex;
    align-items: center;
    padding-left: var(--bosui-spacing-sm);
    gap: var(--bosui-spacing-xs);
}

.bosui-input-right-items {
    display: flex;
    align-items: center;
    padding-right: var(--bosui-spacing-sm);
    gap: var(--bosui-spacing-xs);
}

.bosui-input-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    height: 100%;
    padding: .3rem;
    color: var(--bosui-primary-text-color)
}

    .bosui-input-clear:hover {
        background-color: var(--bosui-element-off-color);
    }

.bosui-input-error {
    border-color: var(--bosui-input-error-border-color);
}

.bosui-input-error-message {
    color: var(--bosui-input-error-text-color);
    font-size: 0.8rem;
    margin-top: var(--bosui-spacing-xs);
}

.bosui-input-label {
    display: block;
    margin-bottom: var(--bosui-label-spacing);
    font-weight: var(--bosui-label-font-weight);
}

.bosui-numeric-stepper {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-left: var(--bosui-spacing-xs);
}

.bosui-numeric-stepper-up,
.bosui-numeric-stepper-down {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: transparent;
    border: none;
    height: 50%;
    padding: 0 var(--bosui-spacing-sm);
    color: var(--bosui-primary-text-color);
    transition: background-color var(--bosui-transition-speed) var(--bosui-transition-timing);
    font-size: 0.75rem;
}

    .bosui-numeric-stepper-up:hover,
    .bosui-numeric-stepper-down:hover {
        background-color: var(--bosui-element-off-color);
    }


    .bosui-numeric-stepper-up[disabled],
    .bosui-numeric-stepper-down[disabled] {
        opacity: var(--bosui-button-disabled-opacity);
        cursor: not-allowed;
    }

.bosui-numeric-stepper i {
    pointer-events: none;
}

/* Ensure numeric input doesn't show browser's spinner buttons */
input[type="number"].bosui-input::-webkit-inner-spin-button,
input[type="number"].bosui-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"].bosui-input {
    -moz-appearance: textfield;
}

.inset > .bosui-input-container {
    box-shadow: var(--bosui-shadow-inner);
    border: none;
}


.form-x {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 3rem;
    align-items: center;
}

    .form-x > .bosui-input-label {
        width: 50%;
        margin-bottom: 0;
    }

    .form-x > .bosui-input-container {
        width: 50%;
    }

    .form-x > .bosui-dropdown {
        width: 50%;
    }
/* #endregion */
/* #region ChippedInput */
.bosui-chipped-input {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
}

.bosui-chipped-input-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    height: 100%;
    gap: var(--bosui-spacing-xs);
    padding: 0 var(--bosui-spacing-sm);
    overflow-x: auto;
}

.bosui-chipped-input-field {
    flex: 1;
    min-width: 50px;
    height: 100%;
    border: none;
    height: var(--bosui-input-height);
    background-color: transparent;
    color: var(--bosui-primary-text-color);
    font-family: var(--bosui-font-family);
    font-size: var(--bosui-font-size-base);
    padding: 0;
}

    .bosui-chipped-input-field:focus {
        outline: none;
    }

.bosui-chip {
    display: flex;
    align-items: center;
    background-color: var(--bosui-secondary-color);
    color: var(--bosui-white-color);
    border-radius: 1rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.9rem;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bosui-chip-text {
    margin-right: 0.3rem;
}

.bosui-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--bosui-white-color);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

    .bosui-chip-remove:hover {
        opacity: 1;
    }
/* #endregion */
/* #region Tooltip */
.bosui-tooltip {
    position: absolute;
    z-index: 1060;
    display: block;
    max-width: var(--bosui-tooltip-max-width);
    padding: 0;
    background-color: var(--bosui-tooltip-background);
    color: var(--bosui-tooltip-text-color);
    border-radius: var(--bosui-tooltip-border-radius);
    box-shadow: var(--bosui-tooltip-shadow);
    font-size: 0.875rem;
    line-height: 1.5;
    pointer-events: none;
    animation: fadeIn 0.2s ease;
    overflow: visible;
    border: var(--bosui-tooltip-border);
}

.bosui-tooltip-content {
    padding: var(--bosui-tooltip-padding);
}

.bosui-tooltip-arrow {
    position: absolute;
    width: calc(var(--bosui-tooltip-arrow-size) * 2);
    height: calc(var(--bosui-tooltip-arrow-size) * 2);
    background-color: var(--bosui-tooltip-background);
    border: var(--bosui-tooltip-border);
    transform: rotate(45deg);
    z-index: -1;
}

/* Top positioning */
.bosui-tooltip-top {
    margin-bottom: var(--bosui-tooltip-arrow-size);
}

    .bosui-tooltip-top .bosui-tooltip-arrow {
        bottom: calc(var(--bosui-tooltip-arrow-size) * -0.5);
        left: 50%;
        transform: translateX(-50%) translateY(30%) rotate(45deg);
        border-right: var(--bosui-tooltip-border);
        border-bottom: var(--bosui-tooltip-border);
        border-top: none;
        border-left: none;
    }

/* Bottom positioning */
.bosui-tooltip-bottom {
    margin-top: var(--bosui-tooltip-arrow-size);
}

    .bosui-tooltip-bottom .bosui-tooltip-arrow {
        top: calc(var(--bosui-tooltip-arrow-size) * -0.5);
        left: 50%;
        transform: translateX(-50%) translateY(-30%) rotate(45deg);
        border-left: var(--bosui-tooltip-border);
        border-top: var(--bosui-tooltip-border);
        border-right: none;
        border-bottom: none;
    }

/* Left positioning */
.bosui-tooltip-left {
    margin-right: var(--bosui-tooltip-arrow-size);
}

    .bosui-tooltip-left .bosui-tooltip-arrow {
        right: calc(var(--bosui-tooltip-arrow-size) * -0.5);
        top: 50%;
        transform: translateY(-50%) translateX(30%) rotate(45deg);
        border-right: var(--bosui-tooltip-border);
        border-top: var(--bosui-tooltip-border);
        border-bottom: none;
        border-left: none;
    }

/* Right positioning */
.bosui-tooltip-right {
    margin-left: var(--bosui-tooltip-arrow-size);
}

    .bosui-tooltip-right .bosui-tooltip-arrow {
        left: calc(var(--bosui-tooltip-arrow-size) * -0.5);
        top: 50%;
        transform: translateY(-50%) translateX(-30%) rotate(45deg);
        border-bottom: var(--bosui-tooltip-border);
        border-left: var(--bosui-tooltip-border);
        border-top: none;
        border-right: none;
    }
/* #endregion */
/* #region Drag and Drop */
.bosui-drag-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.bosui-drag-item {
    cursor: grab;
    user-select: none;
    margin-bottom: var(--bosui-spacing-sm);
    transition: all var(--bosui-transition-speed) var(--bosui-transition-timing);
    position: relative; /* Add position relative */
}

    .bosui-drag-item:active {
        cursor: grabbing;
        box-shadow: var(--bosui-shadow-md);
        z-index: 10; /* Ensure dragged item appears above others */
    }

    .bosui-drag-item:hover {
        box-shadow: var(--bosui-shadow-sm);
    }

.bosui-drop-zone {
    padding: var(--bosui-spacing-md);
    background-color: var(--bosui-background-color);
    border: 1px dashed var(--bosui-border-color);
    border-radius: var(--bosui-border-radius);
    min-height: 100px;
    transition: all var(--bosui-transition-speed) var(--bosui-transition-timing);
    position: relative; /* Add position relative */
}

.bosui-drop-zone-active {
    border-color: var(--bosui-primary-color);
    background-color: rgba(3, 102, 214, 0.05);
}

/* Insertion indicator styles */
.bosui-drag-insertion-indicator {
    height: 2px;
    background-color: var(--bosui-primary-color);
    position: absolute;
    left: 0;
    right: 0;
    z-index: 5;
    transform: scaleY(1.5);
    transition: all 0.15s ease-in-out;
}

.bosui-drag-indicator-before {
    top: -2px;
}

.bosui-drag-indicator-after {
    bottom: -2px;
}

.bosui-drag-placeholder {
    border: 1px dashed var(--bosui-primary-color);
    background-color: rgba(3, 102, 214, 0.1);
    border-radius: var(--bosui-border-radius);
    height: 50px;
    margin: var(--bosui-spacing-sm) 0;
    animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
    0% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 0.4;
    }
}
/* #endregion */
/* #region Markup Builder */
.bosui-markup-builder {
    border: 1px solid var(--bosui-border-color);
    border-radius: var(--bosui-border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.bosui-markup-toolbar {
    padding: 0.5rem;
    background-color: var(--bosui-control-background);
    border-bottom: 1px solid var(--bosui-border-color);
}

.bosui-markup-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.bosui-markup-editor {
    min-height: 200px;
    padding: 1rem;
    overflow-y: auto;
    background-color: var(--bosui-input-background);
    color: var(--bosui-text-color);
    outline: none;
}

.bosui-markup-preview {
    padding: 1rem;
    border-top: 1px solid var(--bosui-border-color);
    background-color: var(--bosui-background);
}

.bosui-divider-vertical {
    height: 24px;
    width: 1px;
    background-color: var(--bosui-border-color);
    margin: 0 0.25rem;
}

.bosui-format-h1 {
    font-size: 1.2rem;
    font-weight: bold;
}

.bosui-format-h2 {
    font-size: 1.1rem;
    font-weight: bold;
}

.bosui-format-h3 {
    font-size: 1rem;
    font-weight: bold;
}

.bosui-format-p {
    font-size: 1rem;
    font-weight: normal;
}

.bosui-format-span {
    font-size: 0.8rem;
    font-style: italic;
}

.bosui-format-h4 {
    font-size: 0.9rem;
    font-weight: bold;
}
/* #endregion */
/* #region Colorpicker */
.bosui-color-picker {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--bosui-colorpicker-gap);
    font-family: var(--bosui-colorpicker-font-family);
    user-select: none;
}

.bosui-color-picker-label {
    display: block;
    margin-bottom: var(--bosui-label-spacing);
    font-weight: var(--bosui-label-font-weight);
    color: var(--bosui-colorpicker-label-color);
    font-size: var(--bosui-font-size-base);
}

.bosui-color-picker-container {
    display: flex;
    gap: var(--bosui-colorpicker-gap);
    align-items: center;
}

.bosui-color-picker-preview {
    min-width: var(--bosui-colorpicker-preview-size);
    height: var(--bosui-colorpicker-preview-size);
    border: var(--bosui-colorpicker-border);
    border-radius: var(--bosui-colorpicker-border-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: var(--bosui-colorpicker-transition);
    overflow: hidden;
}

    .bosui-color-picker-preview:hover {
        border-color: var(--bosui-primary-hover-color);
        box-shadow: 0 0 0 2px rgba(3, 102, 214, 0.1);
    }

.bosui-color-picker-value {
    font-size: 0.75rem;
    color: var(--bosui-white-color);
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
    font-weight: var(--bosui-font-weight-thick);
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 4px;
    border-radius: 2px;
    font-family: monospace;
}

.bosui-color-picker-input {
    flex: 1;
    height: var(--bosui-input-height);
    padding: var(--bosui-input-padding);
    border: var(--bosui-colorpicker-border);
    border-radius: var(--bosui-colorpicker-border-radius);
    font-family: monospace;
    font-size: var(--bosui-colorpicker-font-size);
    color: var(--bosui-colorpicker-text-color);
    background-color: var(--bosui-colorpicker-background);
    transition: var(--bosui-colorpicker-transition);
}

    .bosui-color-picker-input:focus {
        outline: none;
        border-color: var(--bosui-primary-color);
        box-shadow: 0 0 0 2px rgba(3, 102, 214, 0.1);
    }

.bosui-color-picker-native {
    width: 100%;
    height: 100%;
    border: var(--bosui-colorpicker-border);
    border-radius: var(--bosui-colorpicker-border-radius);
    cursor: pointer;
    background: none;
    padding: 0;
    transition: var(--bosui-colorpicker-transition);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    overflow: hidden;
}

    .bosui-color-picker-native:hover {
        border-color: var(--bosui-primary-hover-color);
        box-shadow: 0 0 0 2px rgba(3, 102, 214, 0.1);
    }

    .bosui-color-picker-native:focus {
        outline: none;
        border-color: var(--bosui-primary-color);
        box-shadow: 0 0 0 2px rgba(3, 102, 214, 0.2);
    }

    .bosui-color-picker-native::-webkit-color-swatch-wrapper {
        padding: 0;
        border: none;
        border-radius: calc(var(--bosui-colorpicker-border-radius) - 2px);
    }

    .bosui-color-picker-native::-webkit-color-swatch {
        border: none;
        border-radius: calc(var(--bosui-colorpicker-border-radius) - 2px);
    }

    .bosui-color-picker-native::-moz-color-swatch {
        border: none;
        border-radius: calc(var(--bosui-colorpicker-border-radius) - 2px);
    }

/* Dropdown */
.bosui-color-picker-dropdown {
    position: absolute;
    top: calc(100% + var(--bosui-spacing-xs));
    left: 0;
    width: var(--bosui-colorpicker-width);
    min-width: 300px;
    background-color: var(--bosui-colorpicker-background);
    border: var(--bosui-colorpicker-border);
    border-radius: var(--bosui-card-border-radius);
    box-shadow: var(--bosui-colorpicker-shadow);
    z-index: var(--bosui-colorpicker-dropdown-z-index);
    padding: var(--bosui-spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--bosui-colorpicker-section-spacing);
}

.bosui-color-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--bosui-spacing-sm);
}

    .bosui-color-picker-header h4 {
        margin: 0;
        font-size: var(--bosui-font-size-base);
        color: var(--bosui-colorpicker-text-color);
        font-weight: var(--bosui-font-weight-thick);
    }

.bosui-color-picker-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--bosui-primary-text-color);
    padding: var(--bosui-spacing-xs);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bosui-border-radius);
    transition: var(--bosui-transition-speed) var(--bosui-transition-timing);
}

    .bosui-color-picker-close:hover {
        background-color: var(--bosui-element-off-color);
        color: var(--bosui-primary-color);
    }

/* Main color picker area */
.bosui-color-picker-main {
    display: flex;
    gap: var(--bosui-spacing-md);
}

.bosui-color-picker-saturation-area {
    position: relative;
    width: var(--bosui-colorpicker-area-width);
    height: var(--bosui-colorpicker-area-height);
    border-radius: var(--bosui-border-radius);
    cursor: crosshair;
    overflow: hidden;
    border: 1px solid var(--bosui-border-color);
}

.bosui-color-picker-white-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, white, transparent);
    pointer-events: none;
}

.bosui-color-picker-black-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent, black);
    pointer-events: none;
}

.bosui-color-picker-selector {
    position: absolute;
    width: var(--bosui-colorpicker-selector-size);
    height: var(--bosui-colorpicker-selector-size);
    border: var(--bosui-colorpicker-selector-border);
    border-radius: 50%;
    box-shadow: var(--bosui-colorpicker-selector-shadow);
    pointer-events: none;
    transform-origin: center;
}

/* Sliders */
.bosui-color-picker-sliders {
    display: flex;
    gap: var(--bosui-spacing-md);
    justify-content: center;
}

.bosui-color-picker-slider-container {
    position: relative;
    width: var(--bosui-colorpicker-slider-width);
    height: var(--bosui-colorpicker-slider-height);
}

.bosui-color-picker-hue-slider {
    width: 100%;
    height: 100%;
    border-radius: calc(var(--bosui-colorpicker-slider-width) / 2);
    cursor: pointer;
    position: relative;
    background: linear-gradient(to bottom, #FF0000 0%, #FFFF00 16.66%, #00FF00 33.33%, #00FFFF 50%, #0000FF 66.66%, #FF00FF 83.33%, #FF0000 100%);
    border: 1px solid var(--bosui-border-color);
}

.bosui-color-picker-alpha-slider {
    width: 100%;
    height: 100%;
    border-radius: calc(var(--bosui-colorpicker-slider-width) / 2);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--bosui-border-color);
}

.bosui-color-picker-alpha-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(45deg, var(--bosui-colorpicker-alpha-grid-color) 25%, transparent 25%), linear-gradient(-45deg, var(--bosui-colorpicker-alpha-grid-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--bosui-colorpicker-alpha-grid-color) 75%), linear-gradient(-45deg, transparent 75%, var(--bosui-colorpicker-alpha-grid-color) 75%);
    background-size: var(--bosui-colorpicker-alpha-grid-size) var(--bosui-colorpicker-alpha-grid-size);
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

.bosui-color-picker-alpha-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.bosui-color-picker-slider-thumb {
    position: absolute;
    width: var(--bosui-colorpicker-thumb-size);
    height: var(--bosui-colorpicker-thumb-size);
    border: var(--bosui-colorpicker-selector-border);
    border-radius: 50%;
    box-shadow: var(--bosui-colorpicker-selector-shadow);
    pointer-events: none;
    left: 50%;
    margin-left: calc(var(--bosui-colorpicker-thumb-size) / -2);
    background-color: var(--bosui-white-color);
}

/* Controls */
.bosui-color-picker-controls {
    display: flex;
    gap: var(--bosui-colorpicker-gap);
    align-items: center;
}

.bosui-color-picker-preview-large {
    min-width: var(--bosui-colorpicker-preview-size);
    height: var(--bosui-colorpicker-preview-size);
    border: var(--bosui-colorpicker-border);
    border-radius: var(--bosui-border-radius);
    overflow: hidden;
    position: relative;
}

.bosui-picker-rgb-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--bosui-spacing-xs);
    width: 100%;
}

    .bosui-picker-rgb-fields .bosui-input-wrapper {
        width: 100%;
        min-width: 0;
    }

    .bosui-picker-rgb-fields .bosui-input-container {
        width: 100%;
        min-width: 0;
    }

    .bosui-picker-rgb-fields .bosui-input {
        width: 100%;
        min-width: 0;
    }
/* Palette */
.bosui-color-picker-palette {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--bosui-spacing-xs);
}

.bosui-color-picker-swatch {
    width: var(--bosui-colorpicker-swatch-size);
    height: var(--bosui-colorpicker-swatch-size);
    border: 2px solid transparent;
    border-radius: var(--bosui-border-radius);
    cursor: pointer;
    transition: all var(--bosui-transition-speed) var(--bosui-transition-timing);
    position: relative;
    overflow: hidden;
}

    .bosui-color-picker-swatch:hover {
        transform: var(--bosui-colorpicker-hover-transform);
        border-color: var(--bosui-primary-text-color);
        z-index: 1;
    }

    .bosui-color-picker-swatch.selected {
        border-color: var(--bosui-colorpicker-active-border);
        box-shadow: 0 0 0 2px rgba(3, 102, 214, 0.2);
        transform: var(--bosui-colorpicker-hover-transform);
    }

/* Actions */
.bosui-color-picker-actions {
    display: flex;
    gap: var(--bosui-colorpicker-gap);
    justify-content: space-between;
    margin-top: var(--bosui-spacing-md);
    padding-top: var(--bosui-spacing-md);
    border-top: 1px solid var(--bosui-border-color);
}

/* Disabled state */
.bosui-color-picker:disabled,
.bosui-color-picker.disabled {
    opacity: var(--bosui-colorpicker-disabled-opacity);
    pointer-events: none;
}

/* Mobile responsive */
@media (max-width: 640px) {
    .bosui-color-picker-dropdown {
        left: 50%;
        transform: translateX(-50%);
        width: 90vw;
        max-width: 320px;
    }

    .bosui-color-picker-main {
        flex-direction: column;
        gap: var(--bosui-spacing-sm);
    }

    .bosui-color-picker-sliders {
        flex-direction: row;
        justify-content: center;
        gap: var(--bosui-spacing-lg);
    }

    .bosui-color-picker-slider-container {
        width: var(--bosui-colorpicker-slider-height);
        height: var(--bosui-colorpicker-slider-width);
    }

    .bosui-color-picker-hue-slider,
    .bosui-color-picker-alpha-slider {
        background: linear-gradient(to right, #FF0000 0%, #FFFF00 16.66%, #00FF00 33.33%, #00FFFF 50%, #0000FF 66.66%, #FF00FF 83.33%, #FF0000 100%);
    }

    .bosui-color-picker-slider-thumb {
        top: 50%;
        margin-top: calc(var(--bosui-colorpicker-thumb-size) / -2);
        margin-left: 0;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .bosui-color-picker-alpha-background {
        background-image: linear-gradient(45deg, #555 25%, transparent 25%), linear-gradient(-45deg, #555 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #555 75%), linear-gradient(-45deg, transparent 75%, #555 75%);
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .bosui-color-picker-preview,
    .bosui-color-picker-input,
    .bosui-color-picker-native,
    .bosui-color-picker-dropdown {
        border-width: 2px;
    }

    .bosui-color-picker-selector {
        border-width: 3px;
    }
}
/* #endregion */
/* #region Table */
/* Data Table Styles */
.bosui-table-container {
    display: flex;
    flex-direction: column;
    border-radius: var(--bosui-border-radius);
    overflow: hidden;
    background-color: var(--bosui-background-color);
}

.bosui-table-header {
    padding: var(--bosui-spacing-sm);
    background-color: var(--bosui-table-header-background-color);
    border-bottom: var(--bosui-border-width) var(--bosui-border-style) var(--bosui-border-color);
}

.bosui-table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bosui-table-global-filter input {
    padding: var(--bosui-spacing-xs) var(--bosui-spacing-sm);
    border: var(--bosui-border-width) var(--bosui-border-style) var(--bosui-border-color);
    border-radius: var(--bosui-border-radius);
    width: 200px;
}

.bosui-table-scroll {
    overflow-x: auto;
    overflow-y: auto;
    border: var(--bosui-border-width) var(--bosui-border-style) var(--bosui-border-color);
    box-shadow: var(--bosui-shadow-xs);
    border-radius: var(--bosui-table-border-radius);
}


.bosui-select-column {
    width: 2.15rem;
    max-width: 2.15rem;
    justify-content: center;
    position: sticky;
    left: 0;
    z-index: 10;
    background-color: var(--bosui-table-body-background-color);
}

.bosui-table {
    width: 100%;
    border-collapse: collapse;
    /*table-layout: fixed;*/
}

    .bosui-table td {
        background-color: var(--bosui-table-body-background-color);
    }

    .bosui-table th, .bosui-table td {
        padding: var(--bosui-spacing-sm) var(--bosui-spacing-md);
        padding: var(--bosui-table-cell-padding);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        color: var(--bosui-primary-text-color);
    }

    .bosui-table th {
        background-color: var(--bosui-table-header-background-color);
        font-weight: var(--bosui-font-weight-bold);
        text-align: left;
        position: sticky;
        top: 0;
        z-index: 1;
    }

.selectable .bosui-table td {
    cursor: pointer;
}


.bosui-column-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.bosui-sort-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: var(--bosui-spacing-xs);
}

.bosui-sort-asc::after {
    content: '▲';
    font-size: 10px;
}

.bosui-sort-desc::after {
    content: '▼';
    font-size: 10px;
}

.bosui-sort-none::after {
    content: '⇕';
    color: var(--bosui-border-color);
    font-size: 10px;
}

.bosui-column-filter {
    margin-top: var(--bosui-spacing-xs);
}

    .bosui-column-filter input {
        width: 100%;
        padding: var(--bosui-spacing-xs);
        border: var(--bosui-border-width) var(--bosui-border-style) var(--bosui-border-color);
        border-radius: var(--bosui-border-radius);
        font-size: 12px;
    }

.bosui-column-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    background-color: transparent;
    z-index: 2;
    transition: background-color var(--bosui-transition-speed) var(--bosui-transition-timing);
}

    .bosui-column-resizer:hover {
        background-color: var(--bosui-primary-color);
    }

.bosui-table-row:hover {
    background-color: var(--bosui-element-off-color);
    transition: background-color var(--bosui-transition-speed) var(--bosui-transition-timing);
}

.bosui-table-row.selected {
    background-color: rgba(var(--bosui-primary-color), 0.1);
}

.bosui-datatable.alternating-rows tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

.bosui-table-empty {
    text-align: center;
    padding: var(--bosui-spacing-lg);
    color: var(--bosui-secondary-text-color);
}

.bosui-table-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--bosui-spacing-sm);
    padding-right: 0;
}

.bosui-pager-controls {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.bosui-pager-button {
    height: 3rem;
    width: 3rem;
    padding: var(--bosui-spacing-xs) var(--bosui-spacing-sm);
    background-color: var(--bosui-background-color);
    border: var(--bosui-border-width) var(--bosui-border-style) var(--bosui-border-color);
    border-radius: var(--bosui-border-radius);
    cursor: pointer;
    transition: all var(--bosui-transition-speed) var(--bosui-transition-timing);
    font-size: 15px;
    color: var(--bosui-white-color);
}

    .bosui-pager-button.active {
        background-color: var(--bosui-primary-color);
        border-color: var(--bosui-primary-color);
    }

    .bosui-pager-button:disabled {
        opacity: var(--bosui-button-disabled-opacity);
        cursor: not-allowed;
    }


.bosui-table-footer {
    padding: var(--bosui-spacing-sm);
    background-color: var(--bosui-element-off-color);
    border-top: var(--bosui-border-width) var(--bosui-border-style) var(--bosui-border-color);
}

.bosui-column-header.frozen {
    position: sticky;
    left: 0;
    z-index: 3;
    box-shadow: var(--bosui-shadow-right);
}

.bosui-table td.frozen {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: var(--bosui-shadow-right);
}

.bosui-table td:first-child.frozen {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: inherit;
    box-shadow: var(--bosui-shadow-right);
}

/* Toolbar styles */
.bosui-table-toolbar {
    display: flex;
    align-items: center;
    gap: var(--bosui-spacing-sm);
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    .bosui-table-container {
        border-radius: 0;
    }

    .bosui-table-controls {
        flex-direction: column;
        align-items: stretch;
        gap: var(--bosui-spacing-sm);
    }

    .bosui-table-global-filter input {
        width: 100%;
    }

    .bosui-table-pager {
        flex-direction: column;
        gap: var(--bosui-spacing-sm);
    }
}
/* #endregion */
/* #region Pie Chart */
.bosui-pie-chart-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bosui-font-family);
    position: relative;
}

.bosui-pie-chart-content {
    display: flex;
    align-items: center;
    gap: var(--bosui-spacing-lg);
}

.bosui-pie-chart-svg-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bosui-pie-chart-svg {
    overflow: visible;
}

.bosui-pie-slice {
    cursor: pointer;
    transition: all var(--bosui-transition-speed-slow) var(--bosui-transition-timing);
    stroke: var(--bosui-background-color);
    stroke-width: 0;
    stroke-linejoin: round;
    stroke-linecap: round;
}

    .bosui-pie-slice:hover,
    .bosui-pie-slice.hovered {
        filter: brightness(1.1);
    }

.bosui-pie-label {
    fill: var(--bosui-secondary-text-color);
    font-size: 12px;
    font-weight: var(--bosui-font-weight-thick);
    pointer-events: none;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.bosui-pie-legend {
    display: flex;
    gap: var(--bosui-spacing-sm);
    max-width: 200px;
}

.bosui-pie-legend-right,
.bosui-pie-legend-left {
    flex-direction: column;
}

.bosui-pie-legend-top,
.bosui-pie-legend-bottom {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: none;
}

.bosui-pie-legend-item {
    display: flex;
    align-items: center;
    gap: var(--bosui-spacing-xs);
    padding: var(--bosui-spacing-xs);
    border-radius: var(--bosui-border-radius);
    cursor: pointer;
    transition: background-color var(--bosui-transition-speed) var(--bosui-transition-timing);
    min-width: 0;
}

    .bosui-pie-legend-item:hover {
        background-color: var(--bosui-element-off-color);
    }

.bosui-pie-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

.bosui-pie-legend-label {
    font-size: 14px;
    color: var(--bosui-primary-text-color);
    font-weight: var(--bosui-font-weight-normal);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bosui-pie-legend-value {
    font-size: 12px;
    color: var(--bosui-primary-text-color);
    font-weight: var(--bosui-font-weight-thick);
    margin-left: auto;
}

.bosui-pie-tooltip {
    position: absolute;
    background-color: var(--bosui-tooltip-background);
    color: var(--bosui-tooltip-text-color);
    padding: var(--bosui-tooltip-padding);
    border-radius: var(--bosui-tooltip-border-radius);
    box-shadow: var(--bosui-tooltip-shadow);
    border: var(--bosui-tooltip-border);
    pointer-events: none;
    z-index: 1000;
    top: 10px;
    right: 10px;
    max-width: 200px;
}

.bosui-pie-tooltip-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bosui-pie-tooltip-label {
    font-weight: var(--bosui-font-weight-thick);
    font-size: 14px;
}

.bosui-pie-tooltip-value {
    font-size: 16px;
    color: var(--bosui-primary-color);
    font-weight: var(--bosui-font-weight-bold);
}

.bosui-pie-tooltip-percentage {
    font-size: 12px;
    opacity: 0.8;
}

.bosui-pie-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--bosui-spacing-xl);
    color: var(--bosui-primary-text-color);
    opacity: 0.6;
}

.bosui-pie-slice-animated {
    animation: bosui-pie-slice-draw 0.75s ease-out forwards;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .bosui-pie-chart-content {
        flex-direction: column !important;
        gap: var(--bosui-spacing-md);
    }

    .bosui-pie-legend {
        max-width: 100%;
    }

    .bosui-pie-legend-right,
    .bosui-pie-legend-left,
    .bosui-pie-legend-top,
    .bosui-pie-legend-bottom {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* #endregion */
/* #region Column Chart */
.bosui-column-chart-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bosui-font-family);
    position: relative;
}

.bosui-column-chart-content {
    display: flex;
    align-items: center;
    gap: var(--bosui-spacing-lg);
}

.bosui-column-chart-svg-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bosui-column-chart-svg {
    overflow: visible;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Grid lines */
.bosui-column-grid-line-main {
    stroke: var(--bosui-primary-text-color);
    stroke-width: 1px;
    opacity: 0.1;
}

/* Sub grid lines - more subtle */
.bosui-column-grid-line-sub {
    stroke: var(--bosui-primary-text-color);
    stroke-width: 1px;
    stroke-dasharray: 5,5;
    opacity: 0.1;
}

/* Keep backward compatibility for existing grid line class */
.bosui-column-grid-line {
    stroke: var(--bosui-primary-text-color);
    stroke-width: 1px;
    stroke-dasharray: 5,5;
    opacity: 0.1;
}

/* Axes */
.bosui-column-axis-line {
    stroke: var(--bosui-primary-text-color);
    stroke-width: 1px;
}

.bosui-column-axis-label {
    fill: var(--bosui-primary-text-color);
    font-size: 12px;
    font-family: var(--bosui-font-family);
}

.bosui-column-axis-title {
    fill: var(--bosui-primary-text-color);
    font-size: 14px;
    font-weight: var(--bosui-font-weight-thick);
    font-family: var(--bosui-font-family);
}

/* Column bars - No animations */
.bosui-column-bar {
    cursor: pointer;
    transition: filter 0.2s ease;
}

    .bosui-column-bar:hover,
    .bosui-column-bar.hovered {
        filter: brightness(1.1);
    }

/* Value labels */
.bosui-column-value-label {
    fill: var(--bosui-primary-text-color);
    font-size: 11px;
    font-weight: var(--bosui-font-weight-thick);
    font-family: var(--bosui-font-family);
    pointer-events: none;
}

/* Legend */
.bosui-column-legend {
    display: flex;
    gap: var(--bosui-spacing-sm);
    max-width: 200px;
}

.bosui-column-legend-right,
.bosui-column-legend-left {
    flex-direction: column;
}

.bosui-column-legend-top,
.bosui-column-legend-bottom {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: none;
    justify-content: center;
}

.bosui-column-legend-item {
    display: flex;
    align-items: center;
    gap: var(--bosui-spacing-xs);
    padding: var(--bosui-spacing-xs);
    border-radius: var(--bosui-border-radius);
    cursor: pointer;
    transition: background-color 0.2s ease;
    min-width: 0;
}

    .bosui-column-legend-item:hover {
        background-color: var(--bosui-element-off-color);
    }

.bosui-column-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

.bosui-column-legend-label {
    font-size: 14px;
    color: var(--bosui-primary-text-color);
    font-weight: var(--bosui-font-weight-normal);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bosui-column-legend-value {
    font-size: 12px;
    color: var(--bosui-primary-text-color);
    font-weight: var(--bosui-font-weight-thick);
    margin-left: auto;
}

/* Tooltip */
.bosui-column-tooltip {
    position: absolute;
    background-color: var(--bosui-tooltip-background);
    color: var(--bosui-tooltip-text-color);
    padding: var(--bosui-tooltip-padding);
    border-radius: var(--bosui-tooltip-border-radius);
    box-shadow: var(--bosui-tooltip-shadow);
    border: var(--bosui-tooltip-border);
    pointer-events: none;
    z-index: 1000;
    top: 10px;
    right: 10px;
    max-width: 200px;
}

.bosui-column-tooltip-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bosui-column-tooltip-label {
    font-weight: var(--bosui-font-weight-thick);
    font-size: 14px;
}

.bosui-column-tooltip-value {
    font-size: 16px;
    color: var(--bosui-primary-color);
    font-weight: var(--bosui-font-weight-bold);
}

/* Empty state */
.bosui-column-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--bosui-spacing-xl);
    color: var(--bosui-primary-text-color);
    opacity: 0.6;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .bosui-column-chart-content {
        flex-direction: column !important;
        gap: var(--bosui-spacing-md);
    }

    .bosui-column-legend {
        max-width: 100%;
    }

    .bosui-column-legend-right,
    .bosui-column-legend-left,
    .bosui-column-legend-top,
    .bosui-column-legend-bottom {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .bosui-column-axis-label {
        font-size: 10px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .bosui-column-bar {
        stroke-width: 2px;
    }

    .bosui-column-axis-line {
        stroke-width: 2px;
    }

    .bosui-column-grid-line {
        stroke-width: 1px;
    }
}
/* #endregion */
/* #region Generic Chart */
.bosui-chart-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bosui-font-family);
    position: relative;
}

.bosui-chart-content {
    display: flex;
    align-items: center;
    gap: var(--bosui-spacing-lg);
}

.bosui-chart-svg-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bosui-chart-svg {
    overflow: visible;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Grid lines */
.bosui-chart-grid-line-main {
    stroke: var(--bosui-primary-text-color);
    stroke-width: 1px;
    opacity: 0.1;
}

.bosui-chart-grid-line-sub {
    stroke: var(--bosui-primary-text-color);
    stroke-width: 1px;
    stroke-dasharray: 5,5;
    opacity: 0.1;
}

/* Axes */
.bosui-chart-axis-line {
    stroke: var(--bosui-primary-text-color);
    stroke-width: 1px;
}

.bosui-chart-axis-label {
    fill: var(--bosui-primary-text-color);
    font-size: 12px;
    font-family: var(--bosui-font-family);
}

.bosui-chart-axis-title {
    fill: var(--bosui-primary-text-color);
    font-size: 14px;
    font-weight: var(--bosui-font-weight-thick);
    font-family: var(--bosui-font-family);
}

/* Chart elements */
.bosui-column-element {
    cursor: pointer;
    transition: filter 0.2s ease;
}

    .bosui-column-element:hover,
    .bosui-column-element.hovered {
        filter: brightness(1.1);
    }

.bosui-line-element {
    cursor: pointer;
    transition: filter 0.2s ease;
}

    .bosui-line-element:hover,
    .bosui-line-element.hovered {
        filter: brightness(1.1);
    }

.bosui-pie-element {
    cursor: pointer;
    transition: filter 0.2s ease;
    stroke: var(--bosui-background-color);
    stroke-width: 0;
    stroke-linejoin: round;
    stroke-linecap: round;
}

    .bosui-pie-element:hover,
    .bosui-pie-element.hovered {
        filter: brightness(1.1);
    }

/* Line chart specific */
.bosui-line-chart-path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bosui-line-area-path {
    stroke: none;
}

.bosui-line-point {
    cursor: pointer;
    transition: all 0.2s ease;
}

    .bosui-line-point:hover {
        filter: brightness(1.1);
    }

/* Value labels */
.bosui-chart-value-label {
    fill: var(--bosui-primary-text-color);
    font-size: 11px;
    font-weight: var(--bosui-font-weight-thick);
    font-family: var(--bosui-font-family);
    pointer-events: none;
}

/* Legend */
.bosui-chart-legend {
    display: flex;
    gap: var(--bosui-spacing-sm);
    max-width: 200px;
}

.bosui-chart-legend-right,
.bosui-chart-legend-left {
    flex-direction: column;
}

.bosui-chart-legend-top,
.bosui-chart-legend-bottom {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: none;
    justify-content: center;
}

.bosui-chart-legend-item {
    display: flex;
    align-items: center;
    gap: var(--bosui-spacing-xs);
    padding: var(--bosui-spacing-xs);
    border-radius: var(--bosui-border-radius);
    cursor: pointer;
    transition: background-color 0.2s ease;
    min-width: 0;
}

    .bosui-chart-legend-item:hover {
        background-color: var(--bosui-element-off-color);
    }

.bosui-chart-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

.bosui-chart-legend-series {
    font-size: 12px;
    color: var(--bosui-primary-text-color);
    font-weight: var(--bosui-font-weight-thick);
    opacity: 0.8;
}

.bosui-chart-legend-label {
    font-size: 14px;
    color: var(--bosui-primary-text-color);
    font-weight: var(--bosui-font-weight-normal);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bosui-chart-legend-value {
    font-size: 12px;
    color: var(--bosui-primary-text-color);
    font-weight: var(--bosui-font-weight-thick);
    margin-left: auto;
}

/* Tooltip */
.bosui-chart-tooltip-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bosui-chart-tooltip-series {
    font-size: 12px;
    color: var(--bosui-primary-text-color);
    font-weight: var(--bosui-font-weight-thick);
    opacity: 0.8;
}

.bosui-chart-tooltip-label {
    font-weight: var(--bosui-font-weight-thick);
    font-size: 14px;
}

.bosui-chart-tooltip-value {
    font-size: 16px;
    color: var(--bosui-primary-color);
    font-weight: var(--bosui-font-weight-bold);
}

/* Empty state */
.bosui-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--bosui-spacing-xl);
    color: var(--bosui-primary-text-color);
    opacity: 0.6;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .bosui-chart-content {
        flex-direction: column !important;
        gap: var(--bosui-spacing-md);
    }

    .bosui-chart-legend {
        max-width: 100%;
    }

    .bosui-chart-legend-right,
    .bosui-chart-legend-left,
    .bosui-chart-legend-top,
    .bosui-chart-legend-bottom {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .bosui-chart-axis-label {
        font-size: 10px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .bosui-column-element,
    .bosui-line-element,
    .bosui-pie-element {
        stroke-width: 2px;
    }

    .bosui-chart-axis-line {
        stroke-width: 2px;
    }

    .bosui-chart-grid-line-main,
    .bosui-chart-grid-line-sub {
        stroke-width: 1px;
    }
}
/* #endregion */
/* #region Tabs */
.bosui-tabs {
    display: flex;
    font-family: var(--bosui-tab-font-family);
    background-color: var(--bosui-tab-background-color);
    border-radius: var(--bosui-tab-border-radius);
    height: fit-content;
    border-radius: inherit;
}

    /* Top tabs (default) */
    .bosui-tabs.bosui-tabs-top {
        flex-direction: column;
    }

        .bosui-tabs.bosui-tabs-top > .bosui-tabs-header {
            display: flex;
            flex-direction: row;
            border-bottom: var(--bosui-border-width) var(--bosui-border-style) var(--bosui-tab-border-color);
            background-color: var(--bosui-tab-header-background);
            border-top-left-radius: inherit;
            border-top-right-radius: inherit;
            overflow: hidden;
        }

        .bosui-tabs.bosui-tabs-top > .bosui-tab-header {
            position: relative;
            border-bottom: 2px solid transparent;
        }

            .bosui-tabs.bosui-tabs-top > .bosui-tab-header.active {
                border-bottom-color: var(--bosui-tab-active-color);
            }

    /* Bottom tabs */
    .bosui-tabs.bosui-tabs-bottom {
        flex-direction: column-reverse;
    }

        .bosui-tabs.bosui-tabs-bottom > .bosui-tabs-header {
            display: flex;
            flex-direction: row;
            border-top: var(--bosui-border-width) var(--bosui-border-style) var(--bosui-tab-border-color);
            background-color: var(--bosui-tab-header-background);
            border-bottom-left-radius: inherit;
            border-bottom-right-radius: inherit;
            overflow: hidden;
        }

        .bosui-tabs.bosui-tabs-bottom > .bosui-tab-header {
            position: relative;
            border-top: 2px solid transparent;
        }

            .bosui-tabs.bosui-tabs-bottom > .bosui-tab-header.active {
                border-top-color: var(--bosui-tab-active-color);
            }

    /* Left tabs */
    .bosui-tabs.bosui-tabs-left {
        flex-direction: row;
    }

        .bosui-tabs.bosui-tabs-left > .bosui-tabs-header {
            display: flex;
            flex-direction: column;
            border-right: var(--bosui-border-width) var(--bosui-border-style) var(--bosui-tab-border-color);
            background-color: var(--bosui-tab-header-background);
            min-width: var(--bosui-tab-left-min-width);
            border-top-left-radius: inherit;
            border-bottom-left-radius: inherit;
            overflow: hidden;
        }

        .bosui-tabs.bosui-tabs-left > .bosui-tab-header {
            position: relative;
            border-right: 2px solid transparent;
        }

            .bosui-tabs.bosui-tabs-left > .bosui-tab-header.active {
                border-right-color: var(--bosui-tab-active-color);
            }

    /* Right tabs */
    .bosui-tabs.bosui-tabs-right {
        flex-direction: row-reverse;
    }

        .bosui-tabs.bosui-tabs-right > .bosui-tabs-header {
            display: flex;
            flex-direction: column;
            border-left: var(--bosui-border-width) var(--bosui-border-style) var(--bosui-tab-border-color);
            background-color: var(--bosui-tab-header-background);
            min-width: var(--bosui-tab-right-min-width);
            border-top-right-radius: inherit;
            border-bottom-right-radius: inherit;
            overflow: hidden;
        }

        .bosui-tabs.bosui-tabs-right > .bosui-tab-header {
            position: relative;
            border-left: 2px solid transparent;
        }

            .bosui-tabs.bosui-tabs-right > .bosui-tab-header.active {
                border-left-color: var(--bosui-tab-active-color);
            }

/* Tab header buttons */
.bosui-tab-header {
    display: flex;
    align-items: center;
    background-color: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    gap: var(--bosui-tab-header-gap);
    padding: var(--bosui-tab-header-padding);
    transition: var(--bosui-tab-transition);
    color: var(--bosui-tab-text-color);
    font-family: var(--bosui-tab-font-family);
    font-size: var(--bosui-tab-font-size);
    font-weight: var(--bosui-tab-font-weight);
}

    .bosui-tab-header:hover:not(.disabled) {
        background-color: var(--bosui-tab-hover-background);
    }

    .bosui-tab-header.active {
        color: var(--bosui-tab-active-color);
        background-color: var(--bosui-element-color);
    }

    .bosui-tab-header.disabled {
        opacity: var(--bosui-tab-disabled-opacity);
        cursor: not-allowed;
        pointer-events: none;
    }

.bosui-tab-title {
    flex: 1;
}

/* Tab content */
.bosui-tabs-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.bosui-tab-content {
    display: none;
    flex-direction: column;
    padding: var(--bosui-tab-content-padding);
    background-color: var(--bosui-element-color);
    min-height: 0;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

    .bosui-tab-content.active {
        display: flex;
        flex: 1;
    }

    .bosui-tab-content.invisible {
        display: none !important;
    }

/* Responsive behavior */
@media (max-width: 640px) {
    .bosui-tabs.bosui-tabs-left,
    .bosui-tabs.bosui-tabs-right {
        flex-direction: column;
    }

        .bosui-tabs.bosui-tabs-left > .bosui-tabs-header,
        .bosui-tabs.bosui-tabs-right > .bosui-tabs-header {
            flex-direction: row;
            min-width: auto;
            border-right: none;
            border-left: none;
            border-bottom: var(--bosui-border-width) var(--bosui-border-style) var(--bosui-tab-border-color);
            overflow-x: auto;
        }

        .bosui-tabs.bosui-tabs-left > .bosui-tab-header,
        .bosui-tabs.bosui-tabs-right > .bosui-tab-header {
            border-right: none;
            border-left: none;
            border-bottom: 2px solid transparent;
        }

            .bosui-tabs.bosui-tabs-left > .bosui-tab-header.active,
            .bosui-tabs.bosui-tabs-right > .bosui-tab-header.active {
                border-right-color: transparent;
                border-left-color: transparent;
                border-bottom-color: var(--bosui-tab-active-color);
            }
}
/* #endregion */