/*
 * WDT Components - Common Utilities & Theme System
 *
 * Zentrale CSS-Utilities für alle WDT-Komponenten
 * Basiert auf Kendo CSS-Variablen für Theme-Kompatibilität
 */

/* ============================================================================
   CSS CUSTOM PROPERTIES (Zusätzliche WDT-spezifische Variablen)
   ============================================================================ */

:root {
    /* Transitions */
    --wdt-transition-fast: 0.15s ease;
    --wdt-transition-base: 0.2s ease;
    --wdt-transition-slow: 0.3s ease;
    --wdt-transition-material: 200ms cubic-bezier(0.0, 0, 0.2, 1);

    /* Shadows (basierend auf Material Design) */
    --wdt-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --wdt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --wdt-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
    --wdt-shadow-xl: 0 5px 5px -3px rgba(0,0,0,0.2), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12);

    /* Focus Ring */
    --wdt-focus-ring: 0 0 0 2px var(--kendo-color-primary-emphasis, rgba(255, 99, 88, 0.25));

    /* Disabled Opacity */
    --wdt-disabled-opacity: 0.6;
}

/* ============================================================================
   TRANSITION UTILITIES
   ============================================================================ */

.wdt-transition-fast {
    transition: all var(--wdt-transition-fast);
}

.wdt-transition-base {
    transition: all var(--wdt-transition-base);
}

.wdt-transition-slow {
    transition: all var(--wdt-transition-slow);
}

.wdt-transition-color {
    transition: background-color var(--wdt-transition-base),
                color var(--wdt-transition-base),
                border-color var(--wdt-transition-base);
}

.wdt-transition-transform {
    transition: transform var(--wdt-transition-base);
}

/* ============================================================================
   SHADOW UTILITIES
   ============================================================================ */

.wdt-shadow-none {
    box-shadow: none !important;
}

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

.wdt-shadow-md {
    box-shadow: var(--wdt-shadow-md);
}

.wdt-shadow-lg {
    box-shadow: var(--wdt-shadow-lg);
}

.wdt-shadow-xl {
    box-shadow: var(--wdt-shadow-xl);
}

/* Elevation (Kendo-kompatibel) */
.wdt-elevation-0 {
    box-shadow: none;
}

.wdt-elevation-1 {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.wdt-elevation-2 {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.wdt-elevation-3 {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.wdt-elevation-4 {
    box-shadow: var(--kendo-elevation-4, 0 4px 16px rgba(0, 0, 0, 0.12));
}

/* ============================================================================
   FOCUS UTILITIES
   ============================================================================ */

.wdt-focusable:focus {
    outline: none;
    box-shadow: var(--wdt-focus-ring);
}

.wdt-focus-visible:focus-visible {
    outline: none;
    box-shadow: var(--wdt-focus-ring);
}

/* ============================================================================
   DISABLED STATE UTILITIES
   ============================================================================ */

.wdt-disabled,
[disabled].wdt-component {
    opacity: var(--wdt-disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
}

.wdt-readonly {
    opacity: 0.8;
    cursor: default;
}

/* ============================================================================
   HOVER EFFECTS (Common Patterns)
   ============================================================================ */

.wdt-hover-primary:hover:not(:disabled):not(.wdt-disabled) {
    background-color: var(--kendo-color-primary-hover, #ff7368);
}

.wdt-hover-surface:hover:not(:disabled):not(.wdt-disabled) {
    background-color: var(--kendo-color-surface-alt, #f8f9fa);
}

.wdt-hover-base:hover:not(:disabled):not(.wdt-disabled) {
    background-color: var(--kendo-color-base-hover, #f5f5f5);
}

.wdt-hover-lift:hover:not(:disabled):not(.wdt-disabled) {
    transform: translateY(-2px);
    box-shadow: var(--wdt-shadow-md);
}

/* ============================================================================
   BORDER UTILITIES
   ============================================================================ */

.wdt-border {
    border: 1px solid var(--kendo-color-border, #e0e0e0);
}

.wdt-border-top {
    border-top: 1px solid var(--kendo-color-border, #e0e0e0);
}

.wdt-border-right {
    border-right: 1px solid var(--kendo-color-border, #e0e0e0);
}

.wdt-border-bottom {
    border-bottom: 1px solid var(--kendo-color-border, #e0e0e0);
}

.wdt-border-left {
    border-left: 1px solid var(--kendo-color-border, #e0e0e0);
}

.wdt-border-none {
    border: none !important;
}

/* ============================================================================
   BORDER RADIUS UTILITIES
   ============================================================================ */

.wdt-rounded-none {
    border-radius: 0;
}

.wdt-rounded-sm {
    border-radius: var(--kendo-border-radius-sm, 2px);
}

.wdt-rounded-md {
    border-radius: var(--kendo-border-radius-md, 4px);
}

.wdt-rounded-lg {
    border-radius: 8px;
}

.wdt-rounded-full {
    border-radius: 50%;
}

/* ============================================================================
   SPACING UTILITIES (Margin/Padding)
   ============================================================================ */

/* Padding */
.wdt-p-0 { padding: 0 !important; }
.wdt-p-1 { padding: 4px !important; }
.wdt-p-2 { padding: 8px !important; }
.wdt-p-3 { padding: 12px !important; }
.wdt-p-4 { padding: 16px !important; }
.wdt-p-5 { padding: 20px !important; }
.wdt-p-6 { padding: 24px !important; }

/* Margin */
.wdt-m-0 { margin: 0 !important; }
.wdt-m-1 { margin: 4px !important; }
.wdt-m-2 { margin: 8px !important; }
.wdt-m-3 { margin: 12px !important; }
.wdt-m-4 { margin: 16px !important; }
.wdt-m-5 { margin: 20px !important; }
.wdt-m-6 { margin: 24px !important; }

/* ============================================================================
   DISPLAY UTILITIES
   ============================================================================ */

.wdt-flex {
    display: flex;
}

.wdt-inline-flex {
    display: inline-flex;
}

.wdt-grid {
    display: grid;
}

.wdt-block {
    display: block;
}

.wdt-inline-block {
    display: inline-block;
}

.wdt-hidden {
    display: none !important;
}

/* ============================================================================
   FLEXBOX UTILITIES
   ============================================================================ */

.wdt-flex-row {
    flex-direction: row;
}

.wdt-flex-column {
    flex-direction: column;
}

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

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

.wdt-justify-start {
    justify-content: flex-start;
}

.wdt-justify-center {
    justify-content: center;
}

.wdt-justify-end {
    justify-content: flex-end;
}

.wdt-justify-between {
    justify-content: space-between;
}

.wdt-justify-around {
    justify-content: space-around;
}

.wdt-items-start {
    align-items: flex-start;
}

.wdt-items-center {
    align-items: center;
}

.wdt-items-end {
    align-items: flex-end;
}

.wdt-items-stretch {
    align-items: stretch;
}

/* ============================================================================
   TEXT UTILITIES
   ============================================================================ */

.wdt-text-left {
    text-align: left;
}

.wdt-text-center {
    text-align: center;
}

.wdt-text-right {
    text-align: right;
}

.wdt-text-primary {
    color: var(--kendo-color-primary, #ff6358);
}

.wdt-text-success {
    color: var(--kendo-color-success, #28a745);
}

.wdt-text-error {
    color: var(--kendo-color-error, #f31700);
}

.wdt-text-warning {
    color: var(--kendo-color-warning, #ffc107);
}

.wdt-text-info {
    color: var(--kendo-color-info, #17a2b8);
}

.wdt-text-muted {
    color: var(--kendo-color-subtle, #666666);
}

.wdt-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================================
   BACKGROUND UTILITIES
   ============================================================================ */

.wdt-bg-primary {
    background-color: var(--kendo-color-primary, #ff6358);
    color: var(--kendo-color-on-primary, #ffffff);
}

.wdt-bg-success {
    background-color: var(--kendo-color-success, #28a745);
    color: var(--kendo-color-on-success, #ffffff);
}

.wdt-bg-error {
    background-color: var(--kendo-color-error, #f31700);
    color: white;
}

.wdt-bg-warning {
    background-color: var(--kendo-color-warning, #ffc107);
    color: #000;
}

.wdt-bg-info {
    background-color: var(--kendo-color-info, #17a2b8);
    color: white;
}

.wdt-bg-surface {
    background-color: var(--kendo-color-surface, #ffffff);
}

.wdt-bg-surface-alt {
    background-color: var(--kendo-color-surface-alt, #f8f9fa);
}

.wdt-bg-transparent {
    background-color: transparent;
}

/* ============================================================================
   POSITION UTILITIES
   ============================================================================ */

.wdt-relative {
    position: relative;
}

.wdt-absolute {
    position: absolute;
}

.wdt-fixed {
    position: fixed;
}

.wdt-sticky {
    position: sticky;
}

/* ============================================================================
   OVERFLOW UTILITIES
   ============================================================================ */

.wdt-overflow-auto {
    overflow: auto;
}

.wdt-overflow-hidden {
    overflow: hidden;
}

.wdt-overflow-visible {
    overflow: visible;
}

.wdt-overflow-scroll {
    overflow: scroll;
}

/* ============================================================================
   CURSOR UTILITIES
   ============================================================================ */

.wdt-cursor-pointer {
    cursor: pointer;
}

.wdt-cursor-default {
    cursor: default;
}

.wdt-cursor-not-allowed {
    cursor: not-allowed;
}

.wdt-cursor-move {
    cursor: move;
}

/* ============================================================================
   WIDTH/HEIGHT UTILITIES
   ============================================================================ */

.wdt-w-full {
    width: 100%;
}

.wdt-w-auto {
    width: auto;
}

.wdt-h-full {
    height: 100%;
}

.wdt-h-auto {
    height: auto;
}

/* ============================================================================
   SCROLLBAR STYLING (Webkit)
   ============================================================================ */

.wdt-scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.wdt-scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}

.wdt-scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--kendo-color-border, #cacaca);
    border-radius: 3px;
}

.wdt-scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: var(--kendo-color-secondary, #666666);
}

/* Firefox */
.wdt-scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--kendo-color-border, #cacaca) transparent;
}

/* ============================================================================
   ANIMATION UTILITIES
   ============================================================================ */

@keyframes wdt-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes wdt-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes wdt-slide-up {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes wdt-slide-down {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes wdt-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.wdt-animate-fade-in {
    animation: wdt-fade-in var(--wdt-transition-base);
}

.wdt-animate-fade-out {
    animation: wdt-fade-out var(--wdt-transition-base);
}

.wdt-animate-slide-up {
    animation: wdt-slide-up var(--wdt-transition-base);
}

.wdt-animate-slide-down {
    animation: wdt-slide-down var(--wdt-transition-base);
}

.wdt-animate-spin {
    animation: wdt-spin 1s linear infinite;
}

/* ============================================================================
   Z-INDEX LAYERS (Standard-Ebenen für Overlays)
   ============================================================================ */

:root {
    --wdt-z-base: 1;
    --wdt-z-dropdown: 1000;
    --wdt-z-sticky: 1020;
    --wdt-z-fixed: 1030;
    --wdt-z-modal-backdrop: 1040;
    --wdt-z-modal: 1050;
    --wdt-z-popover: 1060;
    --wdt-z-tooltip: 1070;
    --wdt-z-notification: 1080;
    --wdt-z-snackbar: 100000; /* Höchste Ebene - Snackbars müssen IMMER sichtbar sein */
}

/* ============================================================================
   PRINT UTILITIES
   ============================================================================ */

@media print {
    .wdt-no-print {
        display: none !important;
    }
}

/* ============================================================================
   WDT MULTI-SPLITTER COMPONENT
   Telerik-Style Kompakter Splitter mit integrierten Mini-Buttons
   ============================================================================ */

.wdt-multi-splitter {
    /* Kendo Theme Variables - Telerik-kompatibel */
    --splitter-bar-size: var(--kendo-splitter-splitbar-size, var(--kendo-spacing-3, 0.75rem));
    --splitter-bar-hover-color: var(--kendo-color-base-hover, rgba(0, 0, 0, 0.04));
    --splitter-bar-active-color: var(--kendo-color-base-active, rgba(0, 0, 0, 0.08));
    --splitter-bar-bg: var(--kendo-color-border, #dee2e6);
    --splitter-bar-border: var(--kendo-color-border-alt, #d0d5dd);
    --splitter-icon-color: var(--kendo-color-on-app-surface, #424242);
    --splitter-focus-ring: var(--kendo-color-primary, #ff6358);

    /* Typography */
    font-family: var(--kendo-font-family, inherit);
    font-size: var(--kendo-font-size, 14px);
    color: var(--kendo-color-on-app-surface, #424242);
    background: var(--kendo-color-surface, #ffffff);

    /* Layout */
    display: flex;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.wdt-multi-splitter-horizontal {
    flex-direction: row;
}

.wdt-multi-splitter-vertical {
    flex-direction: column;
}

/* Splitter Pane */
.wdt-multi-splitter-pane {
    position: relative;
    overflow: auto;
    box-sizing: border-box;
    flex-shrink: 0;
    flex-grow: 0;
    transition: flex-basis 0.15s ease-out;
}

.wdt-multi-splitter-pane-lastresizable {
    flex-grow: 1;
    flex-shrink: 1;
}

.wdt-multi-splitter-pane-collapsed {
    flex-basis: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

.wdt-multi-splitter-pane-locked {
    flex-shrink: 0;
}

.wdt-multi-splitter-mask {
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 100;
    cursor: inherit;
}

/* Splitter Bar - Kompakt wie Telerik */
.wdt-multi-splitter-bar {
    position: relative;
    flex-shrink: 0;
    background: var(--splitter-bar-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    z-index: 10;
    transition: background-color 0.2s ease;
}

.wdt-multi-splitter-horizontal > .wdt-multi-splitter-bar {
    width: var(--splitter-bar-size);
    height: 100%;
    flex-direction: column;
    cursor: col-resize;
    border-inline: 1px solid var(--splitter-bar-border);
}

.wdt-multi-splitter-vertical > .wdt-multi-splitter-bar {
    height: var(--splitter-bar-size);
    width: 100%;
    flex-direction: row;
    cursor: row-resize;
    border-block: 1px solid var(--splitter-bar-border);
}

.wdt-multi-splitter-bar-collapsed,
.wdt-multi-splitter-bar-locked {
    cursor: default;
}

.wdt-multi-splitter-bar:hover {
    background: var(--splitter-bar-hover-color);
}

.wdt-multi-splitter-resizing > .wdt-multi-splitter-bar {
    background: var(--splitter-bar-active-color);
}

/* Collapse/Expand/Resize Buttons - Kompakt, kein eigener Hintergrund */
.wdt-multi-splitter-collapse,
.wdt-multi-splitter-expand,
.wdt-multi-splitter-resize {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

/* Horizontaler Splitter: Buttons übereinander, klein */
.wdt-multi-splitter-horizontal > .wdt-multi-splitter-bar .wdt-multi-splitter-collapse,
.wdt-multi-splitter-horizontal > .wdt-multi-splitter-bar .wdt-multi-splitter-expand {
    width: var(--splitter-bar-size);
    height: 10px;
}

.wdt-multi-splitter-horizontal > .wdt-multi-splitter-bar .wdt-multi-splitter-resize {
    width: var(--splitter-bar-size);
    height: 16px;
}

/* Vertikaler Splitter: Buttons nebeneinander, klein */
.wdt-multi-splitter-vertical > .wdt-multi-splitter-bar .wdt-multi-splitter-collapse,
.wdt-multi-splitter-vertical > .wdt-multi-splitter-bar .wdt-multi-splitter-expand {
    width: 10px;
    height: var(--splitter-bar-size);
}

.wdt-multi-splitter-vertical > .wdt-multi-splitter-bar .wdt-multi-splitter-resize {
    width: 16px;
    height: var(--splitter-bar-size);
}

/* Hover-Effekte */
.wdt-multi-splitter-collapse:hover,
.wdt-multi-splitter-expand:hover,
.wdt-multi-splitter-resize:hover {
    opacity: 1;
}

.wdt-multi-splitter-collapse:focus,
.wdt-multi-splitter-expand:focus,
.wdt-multi-splitter-resize:focus {
    outline: 1px solid var(--splitter-focus-ring);
    outline-offset: -1px;
    opacity: 1;
}

/* Icons - Kleine CSS-Dreiecke */
.wdt-multi-splitter .wdt-icon {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
}

/* Horizontaler Splitter: Links/Rechts Pfeile */
.wdt-multi-splitter-horizontal .wdt-icon-chevron-left {
    border-width: 3px 4px 3px 0;
    border-color: transparent var(--splitter-icon-color) transparent transparent;
}

.wdt-multi-splitter-horizontal .wdt-icon-chevron-right {
    border-width: 3px 0 3px 4px;
    border-color: transparent transparent transparent var(--splitter-icon-color);
}

/* Vertikaler Splitter: Oben/Unten Pfeile */
.wdt-multi-splitter-vertical .wdt-icon-chevron-up {
    border-width: 0 3px 4px 3px;
    border-color: transparent transparent var(--splitter-icon-color) transparent;
}

.wdt-multi-splitter-vertical .wdt-icon-chevron-down {
    border-width: 4px 3px 0 3px;
    border-color: var(--splitter-icon-color) transparent transparent transparent;
}

/* Grip/Resize Icon - Horizontale/Vertikale Linie */
.wdt-multi-splitter-resize-icon {
    display: block;
    background: var(--splitter-icon-color);
    opacity: 0.4;
}

/* Horizontaler Splitter: Vertikale Grip-Linie */
.wdt-multi-splitter-horizontal > .wdt-multi-splitter-bar .wdt-multi-splitter-resize-icon {
    width: 1px;
    height: 12px;
}

/* Vertikaler Splitter: Horizontale Grip-Linie */
.wdt-multi-splitter-vertical > .wdt-multi-splitter-bar .wdt-multi-splitter-resize-icon {
    width: 12px;
    height: 1px;
}

/* Performance */
.wdt-multi-splitter-resizing {
    user-select: none;
    -webkit-user-select: none;
}

.wdt-multi-splitter-resizing > .wdt-multi-splitter-pane {
    transition: none;
    contain: layout style;
}

.wdt-multi-splitter-resizing > .wdt-multi-splitter-bar {
    cursor: inherit;
}

/* Nested */
.wdt-multi-splitter .wdt-multi-splitter {
    width: 100%;
    height: 100%;
}
/* ============================================================================
   WDT TILE LAYOUT
   CSS Grid-based Tile Layout with Kendo Theme Integration
   ============================================================================ */

.wdt-tile-layout {
    font-family: var(--kendo-font-family, inherit);
    font-size: var(--kendo-font-size, 14px);
    color: var(--kendo-color-on-app-surface, #424242);
    background: transparent;
    position: relative;
    box-sizing: border-box;
}

.wdt-tile-layout-drag-over {
    /* Sichtbare Drop-Zone mit Hintergrund */
    background: rgba(var(--kendo-color-primary-rgb, 255, 99, 88), 0.05);
}

/* Dynamischer Drop-Indikator - zeigt nur die Zielzelle an */
.wdt-tile-drop-indicator {
    position: absolute;
    border: 2px dashed var(--kendo-color-primary, #ff6358);
    border-radius: var(--kendo-border-radius-md, 4px);
    background: rgba(var(--kendo-color-primary-rgb, 255, 99, 88), 0.1);
    pointer-events: none;
    z-index: 1000;
    box-sizing: border-box;
    transition: top 0.1s ease, left 0.1s ease, width 0.1s ease, height 0.1s ease;
}

.wdt-tile {
    background: var(--kendo-color-surface, #ffffff);
    border-radius: var(--kendo-border-radius-md, 4px);
    border: 1px solid var(--kendo-color-border, #dee2e6);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.wdt-tile-elevation-0 { box-shadow: none; }
.wdt-tile-elevation-1 { box-shadow: 0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12); }
.wdt-tile-elevation-2 { box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12); }
.wdt-tile-elevation-3 { box-shadow: 0 3px 3px -2px rgba(0,0,0,0.2), 0 3px 4px 0 rgba(0,0,0,0.14), 0 1px 8px 0 rgba(0,0,0,0.12); }
.wdt-tile-elevation-4 { box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12); }

.wdt-tile-reorderable:hover {
    border-color: var(--kendo-color-primary, #ff6358);
}

.wdt-tile-reorderable.wdt-tile-elevation-1:hover,
.wdt-tile-reorderable.wdt-tile-elevation-2:hover {
    box-shadow: 0 3px 3px -2px rgba(0,0,0,0.2), 0 3px 4px 0 rgba(0,0,0,0.14), 0 1px 8px 0 rgba(0,0,0,0.12);
}

.wdt-tile-header {
    padding: 12px 16px;
    flex-shrink: 0;
    background: var(--kendo-color-surface-alt, #f8f9fa);
    border-bottom: 1px solid var(--kendo-color-border, #dee2e6);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: var(--kendo-color-on-app-surface, #424242);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wdt-tile-header-draggable {
    cursor: grab;
    user-select: none;
}

.wdt-tile-header-draggable:active {
    cursor: grabbing;
}

.wdt-tile-header-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wdt-tile-content {
    flex: 1;
    padding: 16px;
    overflow: auto;
    position: relative;
}

.wdt-tile-dragging {
    opacity: 0.6;
    z-index: 1000;
    box-shadow: 0 8px 10px -5px rgba(0,0,0,0.2), 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12) !important;
}

.wdt-tile-drag-over {
    border-color: var(--kendo-color-primary, #ff6358) !important;
    border-width: 2px;
    background: rgba(var(--kendo-color-primary-rgb, 255, 99, 88), 0.05);
}

.wdt-tile-drag-over::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--kendo-color-primary, #ff6358);
    opacity: 0.1;
    pointer-events: none;
    z-index: 1;
}

.wdt-tile-resizing {
    z-index: 100;
    user-select: none;
    transition: none !important;
    overflow: hidden;
    /* Sichtbare Indikatoren während Resize */
    outline: 3px dashed var(--kendo-color-primary, #ff6358) !important;
    outline-offset: -3px;
    background: rgba(255, 99, 88, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}

/* Resize-Handles während aktivem Resize ausblenden - nicht mehr nötig */
.wdt-tile-resizing .wdt-tile-resize-handle {
    opacity: 0 !important;
    pointer-events: none;
}

.wdt-tile-resize-handle {
    position: absolute;
    background: transparent;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.wdt-tile:hover .wdt-tile-resize-handle {
    opacity: 1;
}

.wdt-tile-resize-handle-e {
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: e-resize;
}

.wdt-tile-resize-handle-e:hover {
    background: linear-gradient(to left, var(--kendo-color-primary, #ff6358), transparent);
}

.wdt-tile-resize-handle-s {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    cursor: s-resize;
}

.wdt-tile-resize-handle-s:hover {
    background: linear-gradient(to top, var(--kendo-color-primary, #ff6358), transparent);
}

.wdt-tile-resize-handle-se {
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    cursor: se-resize;
}

.wdt-tile-resize-handle-se::after {
    content: '';
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--kendo-color-on-app-surface, #424242);
    border-bottom: 2px solid var(--kendo-color-on-app-surface, #424242);
    opacity: 0.3;
    transition: opacity 0.2s ease;
}

.wdt-tile-resize-handle-se:hover::after {
    opacity: 0.8;
    border-color: var(--kendo-color-primary, #ff6358);
}

.wdt-tile-layout.wdt-tile-layout-resizing .wdt-tile,
.wdt-tile-layout.wdt-tile-layout-dragging .wdt-tile {
    transition: none !important;
}

.wdt-tile:focus-visible {
    outline: 2px solid var(--kendo-color-primary, #ff6358);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .wdt-tile-resize-handle-e { width: 12px; }
    .wdt-tile-resize-handle-s { height: 12px; }
    .wdt-tile-resize-handle-se { width: 20px; height: 20px; }
    .wdt-tile-header { padding: 10px 12px; }
    .wdt-tile-content { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .wdt-tile, .wdt-tile-resize-handle { transition: none !important; }
}

/* ============================================================================
   WDT TILE LAYOUT - Header Actions (Pin & Close Buttons)
   ============================================================================ */

.wdt-tile-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wdt-tile-header-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wdt-tile-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin-left: auto;
}

.wdt-tile-pin-button,
.wdt-tile-close-button {
    padding: 4px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.wdt-tile-header:hover .wdt-tile-pin-button,
.wdt-tile-header:hover .wdt-tile-close-button {
    opacity: 1;
}

.wdt-tile-pin-button.wdt-toggle-icon-button-toggled {
    opacity: 1;
    color: var(--kendo-color-primary, #ff6358);
}

.wdt-tile-close-button:hover {
    color: var(--kendo-color-error, #f44336) !important;
}

/* Pinned Tile Styling */
.wdt-tile-pinned {
    border-color: var(--kendo-color-primary, #ff6358);
}

.wdt-tile-pinned .wdt-tile-header {
    background: linear-gradient(135deg,
        var(--kendo-color-surface-alt, #f8f9fa),
        rgba(var(--kendo-color-primary-rgb, 255, 99, 88), 0.05));
}

.wdt-tile-pinned::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--kendo-color-primary, #ff6358);
}

/* ============================================================================
   WDT TILE LAYOUT - Hidden Tiles Tray
   ============================================================================ */

.wdt-tile-layout-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wdt-tile-tray {
    background: var(--kendo-color-surface, #ffffff);
    border: 1px solid var(--kendo-color-border, #dee2e6);
    border-radius: var(--kendo-border-radius-md, 4px);
    overflow: hidden;
}

.wdt-tile-tray-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--kendo-color-surface-alt, #f8f9fa);
    border-bottom: 1px solid var(--kendo-color-border, #dee2e6);
    font-size: 13px;
    font-weight: 500;
    color: var(--kendo-color-on-app-surface, #424242);
}

.wdt-tile-tray-icon {
    color: var(--kendo-color-subtle, #666);
    font-size: 14px;
}

.wdt-tile-tray-title {
    flex: 1;
}

.wdt-tile-tray-content {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
}

.wdt-tile-tray-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--kendo-color-surface-alt, #f8f9fa);
    border: 1px solid var(--kendo-color-border, #dee2e6);
    border-radius: var(--kendo-border-radius-md, 4px);
    cursor: pointer;
    font-size: 13px;
    color: var(--kendo-color-on-app-surface, #424242);
    transition: all 0.2s ease;
}

.wdt-tile-tray-item:hover {
    background: var(--kendo-color-primary-subtle, rgba(255, 99, 88, 0.1));
    border-color: var(--kendo-color-primary, #ff6358);
    color: var(--kendo-color-primary, #ff6358);
}

.wdt-tile-tray-item-icon {
    font-size: 12px;
    opacity: 0.7;
}

.wdt-tile-tray-item-text {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================================
   WDT BUTTON STYLES
   (Global styles for reliable NuGet delivery - not dependent on scoped CSS)
   ============================================================================ */

.k-button.wdt-button {
    border-radius: var(--kendo-border-radius-md, 4px);
}

.k-button.wdt-button:focus,
.k-button.wdt-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--kendo-color-primary);
}

.k-button-solid-base.wdt-button:focus:not(:disabled),
.k-button-solid-base.wdt-button:focus-visible:not(:disabled) {
    border-color: var(--kendo-color-primary);
    box-shadow: 0 0 0 2px var(--kendo-color-primary);
}

.k-button-solid-primary.wdt-button:focus:not(:disabled),
.k-button-solid-primary.wdt-button:focus-visible:not(:disabled) {
    box-shadow: 0 0 0 3px var(--kendo-color-primary);
}

.wdt-button-dense {
    padding: 4px 8px !important;
    min-height: unset !important;
    gap: 4px;
}

.wdt-button-dense .k-button-icon i {
    font-size: 16px;
}

.wdt-button-fullwidth {
    width: 100%;
}

.wdt-button-flat,
.k-button-flat.wdt-button {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.wdt-button-flat:hover:not(:disabled),
.k-button-flat.wdt-button:hover:not(:disabled) {
    background: var(--kendo-color-surface-alt, rgba(0,0,0,0.04));
    border-color: transparent;
}

.wdt-button-flat:active:not(:disabled),
.k-button-flat.wdt-button:active:not(:disabled) {
    background: var(--kendo-color-base-hover, rgba(0,0,0,0.08));
}

.wdt-button-flat:focus:not(:disabled),
.k-button-flat.wdt-button:focus:not(:disabled) {
    box-shadow: 0 0 0 2px var(--kendo-color-primary);
}

.wdt-button-icon-only {
    aspect-ratio: 1;
    padding: 4px;
    min-width: 32px;
    min-height: 32px;
    justify-content: center;
}

.wdt-button-icon-only .k-button-icon {
    margin: 0;
}

/* Toolbar Button - matches WDTToggleGroup height exactly */
button.wdt-button-toolbar.k-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
    font-size: 14px !important;
    font-family: var(--kendo-font-family, inherit) !important;
    gap: 6px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    border: 1px solid var(--kendo-color-border, #cacaca) !important;
    border-radius: 4px !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--kendo-color-on-app-surface, #424242) !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    box-shadow: none !important;
    text-transform: none !important;
}

button.wdt-button-toolbar.k-button:hover:not(:disabled) {
    background-color: var(--kendo-color-surface-alt, #f5f5f5) !important;
    background-image: none !important;
}

button.wdt-button-toolbar.k-button:disabled {
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

button.wdt-button-toolbar.k-button .k-button-icon {
    margin: 0 !important;
    padding: 0 !important;
}

button.wdt-button-toolbar.k-button .k-button-text {
    margin: 0 !important;
    padding: 0 !important;
}

/* Toolbar ThemeColor Overrides */
button.wdt-button-toolbar.k-button-solid-primary {
    background: var(--kendo-color-primary, #0078d4) !important;
    background-color: var(--kendo-color-primary, #0078d4) !important;
    color: var(--kendo-color-on-primary, white) !important;
    border-color: var(--kendo-color-primary, #0078d4) !important;
}

button.wdt-button-toolbar.k-button-solid-primary:hover:not(:disabled) {
    background-color: var(--kendo-color-primary-hover, #106ebe) !important;
    border-color: var(--kendo-color-primary-hover, #106ebe) !important;
}

button.wdt-button-toolbar.k-button-solid-error {
    background: var(--kendo-color-error, #d32f2f) !important;
    background-color: var(--kendo-color-error, #d32f2f) !important;
    color: var(--kendo-color-on-error, white) !important;
    border-color: var(--kendo-color-error, #d32f2f) !important;
}

button.wdt-button-toolbar.k-button-solid-error:hover:not(:disabled) {
    background-color: var(--kendo-color-error-hover, #c62828) !important;
    border-color: var(--kendo-color-error-hover, #c62828) !important;
}

button.wdt-button-toolbar.k-button-solid-warning {
    background: var(--kendo-color-warning, #f9a825) !important;
    background-color: var(--kendo-color-warning, #f9a825) !important;
    color: var(--kendo-color-on-warning, #1e1e1e) !important;
    border-color: var(--kendo-color-warning, #f9a825) !important;
}

button.wdt-button-toolbar.k-button-solid-warning:hover:not(:disabled) {
    background-color: var(--kendo-color-warning-hover, #f57f17) !important;
    border-color: var(--kendo-color-warning-hover, #f57f17) !important;
}

button.wdt-button-toolbar.k-button-solid-success {
    background: var(--kendo-color-success, #388e3c) !important;
    background-color: var(--kendo-color-success, #388e3c) !important;
    color: var(--kendo-color-on-success, white) !important;
    border-color: var(--kendo-color-success, #388e3c) !important;
}

button.wdt-button-toolbar.k-button-solid-success:hover:not(:disabled) {
    background-color: var(--kendo-color-success-hover, #2e7d32) !important;
    border-color: var(--kendo-color-success-hover, #2e7d32) !important;
}

button.wdt-button-toolbar.k-button-solid-info {
    background: var(--kendo-color-info, #0288d1) !important;
    background-color: var(--kendo-color-info, #0288d1) !important;
    color: var(--kendo-color-on-info, white) !important;
    border-color: var(--kendo-color-info, #0288d1) !important;
}

button.wdt-button-toolbar.k-button-solid-info:hover:not(:disabled) {
    background-color: var(--kendo-color-info-hover, #0277bd) !important;
    border-color: var(--kendo-color-info-hover, #0277bd) !important;
}

/* ============================================================================
   WDT BUTTON - Loading Spinner
   ============================================================================ */

.wdt-button-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wdt-spinner-svg {
    width: 1em;
    height: 1em;
    animation: wdt-spinner-rotate 1s linear infinite;
}

.wdt-spinner-circle {
    stroke: currentColor;
    stroke-linecap: round;
    stroke-dasharray: 45, 200;
    stroke-dashoffset: 0;
    animation: wdt-spinner-dash 1.5s ease-in-out infinite;
}

@keyframes wdt-spinner-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes wdt-spinner-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 45, 200;
        stroke-dashoffset: -15;
    }
    100% {
        stroke-dasharray: 45, 200;
        stroke-dashoffset: -60;
    }
}

.wdt-button.wdt-button-loading {
    cursor: wait;
    pointer-events: none;
}

/* ============================================================================
   WDT BUTTON - Ripple Effect
   ============================================================================ */

.wdt-button.wdt-button-ripple {
    position: relative;
    overflow: hidden;
}

.wdt-button.wdt-button-ripple::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}

.wdt-button.wdt-button-ripple:active:not(:disabled)::after,
.wdt-button.wdt-button-ripple.wdt-ripple-active:not(:disabled)::after {
    animation: wdt-ripple-effect 0.6s ease-out forwards;
}

.wdt-button.wdt-button-ripple.k-button-solid-base::after {
    background: rgba(0, 0, 0, 0.2);
}

@keyframes wdt-ripple-effect {
    0% {
        width: 0;
        height: 0;
        opacity: 0.6;
    }
    40% {
        opacity: 0.4;
    }
    100% {
        width: 500%;
        height: 500%;
        opacity: 0;
    }
}

/* ============================================================================
   WDT BUTTON - Elevation (Box Shadow)
   ============================================================================ */

.wdt-button.wdt-button-elevation-0 {
    box-shadow: none;
}

.wdt-button.wdt-button-elevation-1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.wdt-button.wdt-button-elevation-2 {
    box-shadow: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12);
}

.wdt-button.wdt-button-elevation-3 {
    box-shadow: 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10);
}

.wdt-button.wdt-button-elevation-4 {
    box-shadow: 0 15px 25px rgba(0,0,0,0.15), 0 5px 10px rgba(0,0,0,0.05);
}

.wdt-button.wdt-button-elevation-1:hover:not(:disabled),
.wdt-button.wdt-button-elevation-2:hover:not(:disabled) {
    box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10);
}

.wdt-button.wdt-button-elevation-3:hover:not(:disabled),
.wdt-button.wdt-button-elevation-4:hover:not(:disabled) {
    box-shadow: 0 15px 30px rgba(0,0,0,0.18), 0 5px 15px rgba(0,0,0,0.10);
}

.wdt-button[class*="wdt-button-elevation-"]:active:not(:disabled) {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transform: translateY(1px);
}

.wdt-button[class*="wdt-button-elevation-"] {
    transition: box-shadow 0.2s ease, transform 0.1s ease;
}

/* ============================================================================
   WDT BUTTON - Visibility & Focus
   ============================================================================ */

.wdt-button.wdt-hidden {
    display: none !important;
}

.wdt-button:focus-visible {
    outline: 2px solid var(--kendo-color-primary, #0078d4);
    outline-offset: 2px;
}

.wdt-button:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================================================
   WDT BUTTON - Animations
   ============================================================================ */

.wdt-button.wdt-button-anim-pulse {
    animation: wdt-btn-pulse 2s ease-in-out infinite;
}

.wdt-button.wdt-button-anim-pulse.k-button-solid-primary {
    animation: wdt-btn-pulse-primary 2s ease-in-out infinite;
}

@keyframes wdt-btn-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.15));
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 16px rgba(0, 0, 0, 0.1));
    }
}

@keyframes wdt-btn-pulse-primary {
    0%, 100% {
        filter: drop-shadow(0 0 2px rgba(0, 120, 212, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(0, 120, 212, 0.6)) drop-shadow(0 0 16px rgba(0, 120, 212, 0.2));
    }
}

.wdt-button.wdt-button-anim-breathe {
    animation: wdt-btn-breathe 3s ease-in-out infinite;
}

@keyframes wdt-btn-breathe {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.wdt-button.wdt-button-anim-shake {
    animation: wdt-btn-shake 3s ease-in-out infinite;
}

@keyframes wdt-btn-shake {
    0%, 10%, 100% {
        transform: translateX(0);
    }
    2% {
        transform: translateX(-3px);
    }
    4% {
        transform: translateX(3px);
    }
    6% {
        transform: translateX(-2px);
    }
    8% {
        transform: translateX(2px);
    }
}

.wdt-button.wdt-button-anim-bounce {
    animation: wdt-btn-bounce 2.5s ease-in-out infinite;
}

@keyframes wdt-btn-bounce {
    0%, 20%, 100% {
        transform: translateY(0);
    }
    5% {
        transform: translateY(-4px);
    }
    10% {
        transform: translateY(0);
    }
    15% {
        transform: translateY(-2px);
    }
}

.wdt-button.wdt-button-anim-shimmer {
    position: relative;
    overflow: hidden;
}

.wdt-button.wdt-button-anim-shimmer::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.25),
        transparent
    );
    animation: wdt-btn-shimmer 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes wdt-btn-shimmer {
    0%, 100% {
        left: -100%;
    }
    50% {
        left: 150%;
    }
}

/* ============================================================================
   WDT TOGGLE ICON BUTTON STYLES
   ============================================================================ */

.wdt-toggle-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    min-width: 40px;
    min-height: 40px;
    border: 1px solid var(--kendo-color-border);
    background: var(--kendo-color-surface);
    color: var(--kendo-color-on-app-surface);
    border-radius: var(--kendo-border-radius-md, 4px);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 18px;
    user-select: none;
}

.wdt-toggle-icon-button:hover:not(:disabled) {
    background: var(--kendo-color-surface-alt, rgba(0,0,0,0.04));
    border-color: var(--kendo-color-primary);
}

.wdt-toggle-icon-button:active:not(:disabled) {
    transform: scale(0.95);
}

.wdt-toggle-icon-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Toggled State */
.wdt-toggle-icon-button-toggled {
    background: var(--kendo-color-primary);
    color: white;
    border-color: var(--kendo-color-primary);
}

.wdt-toggle-icon-button-toggled:hover:not(:disabled) {
    background: var(--kendo-color-primary-hover, var(--kendo-color-primary));
    border-color: var(--kendo-color-primary-hover, var(--kendo-color-primary));
}

/* Variants */
.wdt-toggle-icon-button-variant-text {
    border: none;
    background: transparent;
}

.wdt-toggle-icon-button-variant-text:hover:not(:disabled) {
    background: var(--kendo-color-surface-alt, rgba(0,0,0,0.04));
}

.wdt-toggle-icon-button-variant-outlined {
    background: transparent;
}

.wdt-toggle-icon-button-variant-outlined.wdt-toggle-icon-button-toggled {
    background: var(--kendo-color-primary-subtle, rgba(var(--kendo-color-primary-rgb), 0.1));
    color: var(--kendo-color-primary);
}

/* Sizes */
.wdt-toggle-icon-button-size-small {
    padding: 4px;
    min-width: 32px;
    min-height: 32px;
    font-size: 14px;
}

.wdt-toggle-icon-button-size-medium {
    padding: 8px;
    min-width: 40px;
    min-height: 40px;
    font-size: 18px;
}

.wdt-toggle-icon-button-size-large {
    padding: 12px;
    min-width: 48px;
    min-height: 48px;
    font-size: 22px;
}

/* Colors */
.wdt-toggle-icon-button-color-primary.wdt-toggle-icon-button-toggled {
    background: var(--kendo-color-primary);
    border-color: var(--kendo-color-primary);
    color: white;
}

.wdt-toggle-icon-button-color-success.wdt-toggle-icon-button-toggled {
    background: var(--kendo-color-success);
    border-color: var(--kendo-color-success);
    color: white;
}

.wdt-toggle-icon-button-color-error.wdt-toggle-icon-button-toggled {
    background: var(--kendo-color-error);
    border-color: var(--kendo-color-error);
    color: white;
}

.wdt-toggle-icon-button-color-warning.wdt-toggle-icon-button-toggled {
    background: var(--kendo-color-warning);
    border-color: var(--kendo-color-warning);
    color: white;
}

.wdt-toggle-icon-button-color-info.wdt-toggle-icon-button-toggled {
    background: var(--kendo-color-info);
    border-color: var(--kendo-color-info);
    color: white;
}

/* Outlined Variants for Colors */
.wdt-toggle-icon-button-variant-outlined.wdt-toggle-icon-button-color-success.wdt-toggle-icon-button-toggled {
    background: rgba(var(--kendo-color-success-rgb, 76, 175, 80), 0.1);
    color: var(--kendo-color-success);
}

.wdt-toggle-icon-button-variant-outlined.wdt-toggle-icon-button-color-error.wdt-toggle-icon-button-toggled {
    background: rgba(var(--kendo-color-error-rgb, 244, 67, 54), 0.1);
    color: var(--kendo-color-error);
}

.wdt-toggle-icon-button-variant-outlined.wdt-toggle-icon-button-color-warning.wdt-toggle-icon-button-toggled {
    background: rgba(var(--kendo-color-warning-rgb, 255, 152, 0), 0.1);
    color: var(--kendo-color-warning);
}

.wdt-toggle-icon-button-variant-outlined.wdt-toggle-icon-button-color-info.wdt-toggle-icon-button-toggled {
    background: rgba(var(--kendo-color-info-rgb, 33, 150, 243), 0.1);
    color: var(--kendo-color-info);
}

/* Text */
.wdt-toggle-icon-button-text {
    font-size: 14px;
    font-weight: 500;
}

/* Circular */
.wdt-toggle-icon-button-circular {
    border-radius: 50%;
}


/* ============================================================================
   WDT SCHEDULER - Complete Styles
   Integriert aus wwwroot/css/wdt-scheduler.css fuer automatisches Laden
   via WDTCommon.css (kein extra Link-Tag im NuGet noetig)
   ============================================================================ */

/* --- WDTScheduler (Main Container) --- */

.wdt-scheduler {
    display: flex;
    height: 100%;
    min-height: 500px;
    border: 1px solid var(--kendo-component-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--kendo-border-radius-md, 4px);
    overflow: hidden;
    background: var(--kendo-component-bg, #ffffff);
    font-family: var(--kendo-font-family, inherit);
    font-size: var(--kendo-font-size, 14px);
    color: var(--kendo-component-text, #424242);
    box-shadow: var(--kendo-elevation-4, 0 2px 8px rgba(0,0,0,0.08));
}

.wdt-scheduler-sidebar {
    flex-shrink: 0;
    width: 270px;
    border-right: 1px solid var(--kendo-component-border, rgba(0, 0, 0, 0.08));
    padding: 8px;
    background: var(--kendo-component-bg, #ffffff);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.wdt-scheduler-sidebar:hover {
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

.wdt-scheduler-sidebar::-webkit-scrollbar { width: 6px; }
.wdt-scheduler-sidebar::-webkit-scrollbar-track { background: transparent; }
.wdt-scheduler-sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.wdt-scheduler-sidebar:hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.3); }

.wdt-scheduler-sidebar .wdt-calendar {
    box-shadow: none;
    border: none;
}

.wdt-scheduler-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.wdt-scheduler-content {
    flex: 1;
    overflow: hidden;
}

.wdt-scheduler-readonly {
    pointer-events: auto;
}

.wdt-scheduler-readonly .wdt-scheduler-dayview-slot:hover {
    background: transparent;
    cursor: default;
}

@media (max-width: 900px) {
    .wdt-scheduler-sidebar {
        display: none;
    }
}

/* --- WDTSchedulerHeader --- */

.wdt-scheduler-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--kendo-component-bg, #ffffff);
    border-bottom: 1px solid var(--kendo-component-border, rgba(0, 0, 0, 0.08));
    gap: 8px;
    flex-wrap: wrap;
}

.wdt-scheduler-header-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wdt-scheduler-header-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--kendo-component-text, #424242);
    margin-left: 12px;
    white-space: nowrap;
}

.wdt-scheduler-header-views {
    display: flex;
    gap: 2px;
    border: 1px solid var(--kendo-component-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--kendo-border-radius-md, 4px);
    overflow: hidden;
}

.wdt-scheduler-header-views .wdt-scheduler-view-btn {
    border-radius: 0;
    border: none;
    min-width: auto;
    padding: 4px 12px;
    font-size: 0.85rem;
}

.wdt-scheduler-view-btn-active {
    font-weight: 600;
}

.wdt-scheduler-btn-today {
    margin-right: 8px;
}

.wdt-scheduler-btn-nav {
    min-width: 32px;
}

@media (max-width: 768px) {
    .wdt-scheduler-header {
        flex-direction: column;
        align-items: stretch;
    }

    .wdt-scheduler-header-nav {
        justify-content: center;
    }

    .wdt-scheduler-header-views {
        justify-content: center;
    }
}

/* --- WDTSchedulerDayView --- */

.wdt-scheduler-dayview {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--kendo-component-bg, #ffffff);
}

.wdt-scheduler-dayview-header {
    display: grid;
    border-bottom: 1px solid var(--kendo-component-border, rgba(0, 0, 0, 0.08));
    flex-shrink: 0;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.wdt-scheduler-dayview-header::-webkit-scrollbar { width: 6px; }
.wdt-scheduler-dayview-header::-webkit-scrollbar-thumb { background: transparent; }

.wdt-scheduler-dayview-gutter-header {
    border-right: 1px solid var(--kendo-component-border, rgba(0, 0, 0, 0.08));
}

.wdt-scheduler-dayview-header-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border-right: 1px solid var(--kendo-component-border, rgba(0, 0, 0, 0.08));
}

.wdt-scheduler-dayview-header-day:last-child {
    border-right: none;
}

.wdt-scheduler-dayview-header-weekday {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--kendo-subtle-text, #666666);
    letter-spacing: 0.5px;
}

.wdt-scheduler-dayview-header-daynumber {
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--kendo-component-text, #424242);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.wdt-scheduler-dayview-header-today {
    background: var(--kendo-color-primary, #1e88e5);
    color: var(--kendo-color-on-primary, #ffffff);
}

.wdt-scheduler-dayview-header-today .wdt-scheduler-dayview-header-weekday {
    color: var(--kendo-color-primary, #1e88e5);
    font-weight: 600;
}

.wdt-scheduler-dayview-allday {
    display: grid;
    border-bottom: 2px solid var(--kendo-component-border, rgba(0, 0, 0, 0.08));
    flex-shrink: 0;
    min-height: 32px;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.wdt-scheduler-dayview-allday::-webkit-scrollbar { width: 6px; }
.wdt-scheduler-dayview-allday::-webkit-scrollbar-thumb { background: transparent; }

.wdt-scheduler-dayview-gutter-allday {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    font-size: 0.7rem;
    color: var(--kendo-subtle-text, #666666);
    border-right: 1px solid var(--kendo-component-border, rgba(0, 0, 0, 0.08));
}

.wdt-scheduler-dayview-allday-cell {
    padding: 2px;
    border-right: 1px solid var(--kendo-component-border, rgba(0, 0, 0, 0.08));
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
}

.wdt-scheduler-dayview-allday-cell:last-child {
    border-right: none;
}

.wdt-scheduler-dayview-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.wdt-scheduler-dayview-body:hover {
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

.wdt-scheduler-dayview-body::-webkit-scrollbar { width: 6px; }
.wdt-scheduler-dayview-body::-webkit-scrollbar-track { background: transparent; }
.wdt-scheduler-dayview-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.wdt-scheduler-dayview-body:hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.3); }

.wdt-scheduler-dayview-timegrid {
    display: grid;
    position: relative;
    min-height: calc(1152px + 8px);
    padding-top: 8px;
}

.wdt-scheduler-dayview-gutter {
    position: relative;
    border-right: 1px solid var(--kendo-component-border, rgba(0, 0, 0, 0.08));
}

.wdt-scheduler-dayview-gutter-hour {
    position: absolute;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-right: 8px;
}

.wdt-scheduler-dayview-gutter-hour span {
    font-size: 0.7rem;
    color: var(--kendo-subtle-text, #666666);
    transform: translateY(-50%);
    line-height: 1;
}

.wdt-scheduler-dayview-column {
    position: relative;
    border-right: 1px solid var(--kendo-component-border, rgba(0, 0, 0, 0.08));
}

.wdt-scheduler-dayview-column:last-child {
    border-right: none;
}

.wdt-scheduler-dayview-column-today {
    background: color-mix(in srgb, var(--kendo-color-primary, #1e88e5) 3%, transparent);
}

.wdt-scheduler-dayview-slot {
    position: absolute;
    width: 100%;
    cursor: pointer;
}

.wdt-scheduler-dayview-slot:hover {
    background: var(--kendo-hover-bg, rgba(0, 0, 0, 0.04));
}

.wdt-scheduler-dayview-slot-top {
    border-bottom: 1px dashed var(--kendo-component-border, rgba(0, 0, 0, 0.04));
}

.wdt-scheduler-dayview-slot-bottom {
    border-bottom: 1px solid var(--kendo-component-border, rgba(0, 0, 0, 0.08));
}

.wdt-scheduler-dayview-now {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--kendo-color-error, #f44336);
    z-index: 3;
    pointer-events: none;
}

.wdt-scheduler-dayview-now::before {
    content: '';
    position: absolute;
    left: -5px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--kendo-color-error, #f44336);
}

.wdt-scheduler-dayview-column > .wdt-scheduler-appointment {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
}

/* --- WDTSchedulerMonthView --- */

.wdt-scheduler-monthview {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--kendo-component-bg, #ffffff);
}

.wdt-scheduler-monthview-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--kendo-component-border, rgba(0, 0, 0, 0.08));
    flex-shrink: 0;
}

.wdt-scheduler-monthview-header-day {
    padding: 8px 4px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--kendo-subtle-text, #666666);
    border-right: 1px solid var(--kendo-component-border, rgba(0, 0, 0, 0.08));
}

.wdt-scheduler-monthview-header-day:last-child {
    border-right: none;
}

.wdt-scheduler-monthview-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wdt-scheduler-monthview-week {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    min-height: 0;
    border-bottom: 1px solid var(--kendo-component-border, rgba(0, 0, 0, 0.08));
}

.wdt-scheduler-monthview-week:last-child {
    border-bottom: none;
}

.wdt-scheduler-monthview-cell {
    border-right: 1px solid var(--kendo-component-border, rgba(0, 0, 0, 0.08));
    padding: 2px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.wdt-scheduler-monthview-cell:last-child {
    border-right: none;
}

.wdt-scheduler-monthview-cell:hover {
    background: var(--kendo-hover-bg, rgba(0, 0, 0, 0.02));
}

.wdt-scheduler-monthview-cell-other {
    background: var(--kendo-component-bg, #f5f5f5);
    opacity: 0.6;
}

.wdt-scheduler-monthview-cell-today {
    background: color-mix(in srgb, var(--kendo-color-primary, #1e88e5) 4%, transparent);
}

.wdt-scheduler-monthview-cell-weekend {
    background: color-mix(in srgb, var(--kendo-color-base, #ebebeb) 30%, transparent);
}

.wdt-scheduler-monthview-day-header {
    display: flex;
    justify-content: flex-end;
    padding: 2px 4px;
    flex-shrink: 0;
}

.wdt-scheduler-monthview-daynumber {
    font-size: 0.8rem;
    color: var(--kendo-component-text, #424242);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.wdt-scheduler-monthview-daynumber-today {
    background: var(--kendo-color-primary, #1e88e5);
    color: var(--kendo-color-on-primary, #ffffff);
    font-weight: 600;
}

.wdt-scheduler-monthview-day-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    min-height: 0;
}

.wdt-scheduler-monthview-more {
    font-size: 0.7rem;
    color: var(--kendo-color-primary, #1e88e5);
    padding: 1px 4px;
    cursor: pointer;
    font-weight: 500;
}

.wdt-scheduler-monthview-more:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .wdt-scheduler-monthview-daynumber {
        font-size: 0.7rem;
        width: 20px;
        height: 20px;
    }

    .wdt-scheduler-monthview-cell {
        padding: 1px;
    }
}

/* --- WDTSchedulerAppointment --- */

.wdt-scheduler-appointment {
    border-radius: var(--kendo-border-radius-md, 4px);
    padding: 2px 6px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    line-height: 1.4;
    transition: opacity 0.15s, box-shadow 0.15s;
    position: relative;
    border-left: 3px solid transparent;
}

.wdt-scheduler-appointment:hover {
    opacity: 0.85;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.wdt-scheduler-appointment-content {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.wdt-scheduler-appointment-time {
    font-weight: 600;
    flex-shrink: 0;
}

.wdt-scheduler-appointment-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wdt-scheduler-appointment-location {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 0.7rem;
    opacity: 0.85;
    margin-top: 1px;
}

.wdt-scheduler-appointment-recurrence-icon {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 0.6rem;
    opacity: 0.7;
}

.wdt-scheduler-appointment-status-icon {
    font-size: 0.7rem;
    flex-shrink: 0;
}

.wdt-scheduler-appointment-status-accepted,
.wdt-scheduler-appointment-status-declined,
.wdt-scheduler-appointment-status-tentative,
.wdt-scheduler-appointment-status-completed {
    color: #ffffff;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));
}

.wdt-scheduler-appointment-declined-style {
    opacity: 0.5;
}

.wdt-scheduler-appointment-declined-style .wdt-scheduler-appointment-title {
    text-decoration: line-through;
}

.wdt-scheduler-appointment-completed-style {
    opacity: 0.7;
}

.wdt-scheduler-appointment-completed-style .wdt-scheduler-appointment-title {
    text-decoration: line-through;
    text-decoration-style: double;
}

.wdt-scheduler-appointment-tentative-style {
    border-left-style: dashed;
}

.wdt-scheduler-appointment-compact {
    padding: 1px 4px;
    font-size: 0.75rem;
    border-left-width: 3px;
}

.wdt-scheduler-appointment-expanded {
    white-space: normal;
    padding: 4px 6px;
}

.wdt-scheduler-appointment-expanded .wdt-scheduler-appointment-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

/* Appointment Colors */
.wdt-scheduler-appointment-blue {
    background-color: var(--kendo-color-primary, #1e88e5);
    color: var(--kendo-color-on-primary, #ffffff);
    border-left-color: color-mix(in srgb, var(--kendo-color-primary, #1e88e5) 70%, black);
}

.wdt-scheduler-appointment-green {
    background-color: var(--kendo-color-success, #4caf50);
    color: #ffffff;
    border-left-color: color-mix(in srgb, var(--kendo-color-success, #4caf50) 70%, black);
}

.wdt-scheduler-appointment-red {
    background-color: var(--kendo-color-error, #f44336);
    color: #ffffff;
    border-left-color: color-mix(in srgb, var(--kendo-color-error, #f44336) 70%, black);
}

.wdt-scheduler-appointment-orange {
    background-color: var(--kendo-color-warning, #ff9800);
    color: #ffffff;
    border-left-color: color-mix(in srgb, var(--kendo-color-warning, #ff9800) 70%, black);
}

.wdt-scheduler-appointment-purple {
    background-color: #9c27b0;
    color: #ffffff;
    border-left-color: #7b1fa2;
}

.wdt-scheduler-appointment-teal {
    background-color: var(--kendo-color-info, #00bcd4);
    color: #ffffff;
    border-left-color: color-mix(in srgb, var(--kendo-color-info, #00bcd4) 70%, black);
}

.wdt-scheduler-appointment-gray {
    background-color: var(--kendo-color-base, #9e9e9e);
    color: var(--kendo-color-on-app-surface, #424242);
    border-left-color: color-mix(in srgb, var(--kendo-color-base, #9e9e9e) 70%, black);
}

/* --- WDTSchedulerAgendaView --- */

.wdt-scheduler-agendaview {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    background: var(--kendo-component-bg, #ffffff);
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.wdt-scheduler-agendaview:hover {
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

.wdt-scheduler-agendaview::-webkit-scrollbar { width: 6px; }
.wdt-scheduler-agendaview::-webkit-scrollbar-track { background: transparent; }
.wdt-scheduler-agendaview::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.wdt-scheduler-agendaview:hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.3); }

.wdt-scheduler-agendaview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    gap: 12px;
    color: var(--kendo-subtle-text, #666666);
    font-size: 0.95rem;
}

.wdt-scheduler-agendaview-empty-icon {
    font-size: 2.5rem;
    opacity: 0.4;
}

.wdt-scheduler-agendaview-daygroup {
    padding: 0;
}

.wdt-scheduler-agendaview-dayheader {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 4px;
    position: sticky;
    top: 0;
    background: var(--kendo-component-bg, #ffffff);
    z-index: 1;
}

.wdt-scheduler-agendaview-dayheader-today {
    background: color-mix(in srgb, var(--kendo-color-primary, #1e88e5) 5%, var(--kendo-component-bg, #ffffff));
}

.wdt-scheduler-agendaview-day-weekday {
    font-weight: 600;
    color: var(--kendo-component-text, #424242);
    font-size: 0.9rem;
}

.wdt-scheduler-agendaview-day-date {
    color: var(--kendo-subtle-text, #666666);
    font-size: 0.85rem;
}

.wdt-scheduler-agendaview-badge {
    margin-left: auto;
}

.wdt-scheduler-agendaview-items {
    padding: 4px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wdt-scheduler-agendaview-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--kendo-border-radius-md, 4px);
    cursor: pointer;
    transition: background 0.15s;
}

.wdt-scheduler-agendaview-item:hover {
    background: var(--kendo-hover-bg, rgba(0, 0, 0, 0.04));
}

.wdt-scheduler-agendaview-item-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    flex-shrink: 0;
    padding: 4px 8px;
    border-radius: var(--kendo-border-radius-md, 4px);
    font-size: 0.8rem;
    font-weight: 500;
}

.wdt-scheduler-agendaview-allday {
    font-size: 0.75rem;
    font-weight: 600;
}

.wdt-scheduler-agendaview-start {
    font-weight: 600;
}

.wdt-scheduler-agendaview-separator {
    font-size: 0.7rem;
    opacity: 0.6;
}

.wdt-scheduler-agendaview-end {
    font-size: 0.75rem;
    opacity: 0.85;
}

/* Agenda Color Markers */
.wdt-scheduler-agendaview-color-blue {
    background: color-mix(in srgb, var(--kendo-color-primary, #1e88e5) 15%, transparent);
    color: var(--kendo-color-primary, #1e88e5);
}
.wdt-scheduler-agendaview-color-green {
    background: color-mix(in srgb, var(--kendo-color-success, #4caf50) 15%, transparent);
    color: var(--kendo-color-success, #4caf50);
}
.wdt-scheduler-agendaview-color-red {
    background: color-mix(in srgb, var(--kendo-color-error, #f44336) 15%, transparent);
    color: var(--kendo-color-error, #f44336);
}
.wdt-scheduler-agendaview-color-orange {
    background: color-mix(in srgb, var(--kendo-color-warning, #ff9800) 15%, transparent);
    color: var(--kendo-color-warning, #ff9800);
}
.wdt-scheduler-agendaview-color-purple {
    background: color-mix(in srgb, #9c27b0 15%, transparent);
    color: #9c27b0;
}
.wdt-scheduler-agendaview-color-teal {
    background: color-mix(in srgb, var(--kendo-color-info, #00bcd4) 15%, transparent);
    color: var(--kendo-color-info, #00bcd4);
}
.wdt-scheduler-agendaview-color-gray {
    background: color-mix(in srgb, var(--kendo-color-base, #9e9e9e) 15%, transparent);
    color: var(--kendo-subtle-text, #666666);
}

/* Agenda Details */
.wdt-scheduler-agendaview-item-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.wdt-scheduler-agendaview-item-title {
    font-weight: 500;
    color: var(--kendo-component-text, #424242);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wdt-scheduler-agendaview-recurrence {
    font-size: 0.7rem;
    color: var(--kendo-subtle-text, #666666);
}

.wdt-scheduler-agendaview-item-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--kendo-subtle-text, #666666);
}

.wdt-scheduler-agendaview-item-location i {
    font-size: 0.7rem;
}

.wdt-scheduler-agendaview-item-description {
    font-size: 0.8rem;
    color: var(--kendo-subtle-text, #666666);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 400px;
}

/* Agenda Status */
.wdt-scheduler-agendaview-item-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.wdt-scheduler-agendaview-item-status i {
    font-size: 0.7rem;
}

.wdt-scheduler-agendaview-status-accepted { color: var(--kendo-color-success, #4caf50); }
.wdt-scheduler-agendaview-status-declined { color: var(--kendo-color-error, #f44336); }
.wdt-scheduler-agendaview-status-tentative { color: var(--kendo-color-warning, #ff9800); }
.wdt-scheduler-agendaview-status-completed { color: var(--kendo-color-info, #00bcd4); }

.wdt-scheduler-agendaview-declined {
    text-decoration: line-through;
    opacity: 0.6;
}

.wdt-scheduler-agendaview-completed {
    text-decoration: line-through;
    text-decoration-style: double;
    opacity: 0.7;
}

/* Agenda Status Action Buttons */
.wdt-scheduler-agendaview-item-actions {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 12px;
}

.wdt-scheduler-status-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.15s;
    padding: 0;
    outline: none;
}

.wdt-scheduler-status-btn:hover {
    transform: scale(1.15);
}

.wdt-scheduler-status-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--kendo-color-primary, #1e88e5);
}

.wdt-scheduler-status-btn-accepted {
    border-color: var(--kendo-color-success, #4caf50);
    color: var(--kendo-color-success, #4caf50);
}
.wdt-scheduler-status-btn-accepted:hover {
    background: color-mix(in srgb, var(--kendo-color-success, #4caf50) 15%, transparent);
}
.wdt-scheduler-status-btn-accepted.wdt-scheduler-status-btn-active {
    background: var(--kendo-color-success, #4caf50);
    color: #ffffff;
}

.wdt-scheduler-status-btn-declined {
    border-color: var(--kendo-color-error, #f44336);
    color: var(--kendo-color-error, #f44336);
}
.wdt-scheduler-status-btn-declined:hover {
    background: color-mix(in srgb, var(--kendo-color-error, #f44336) 15%, transparent);
}
.wdt-scheduler-status-btn-declined.wdt-scheduler-status-btn-active {
    background: var(--kendo-color-error, #f44336);
    color: #ffffff;
}

.wdt-scheduler-status-btn-tentative {
    border-color: var(--kendo-color-warning, #ff9800);
    color: var(--kendo-color-warning, #ff9800);
}
.wdt-scheduler-status-btn-tentative:hover {
    background: color-mix(in srgb, var(--kendo-color-warning, #ff9800) 15%, transparent);
}
.wdt-scheduler-status-btn-tentative.wdt-scheduler-status-btn-active {
    background: var(--kendo-color-warning, #ff9800);
    color: #ffffff;
}

.wdt-scheduler-status-btn-completed {
    border-color: var(--kendo-color-info, #00bcd4);
    color: var(--kendo-color-info, #00bcd4);
}
.wdt-scheduler-status-btn-completed:hover {
    background: color-mix(in srgb, var(--kendo-color-info, #00bcd4) 15%, transparent);
}
.wdt-scheduler-status-btn-completed.wdt-scheduler-status-btn-active {
    background: var(--kendo-color-info, #00bcd4);
    color: #ffffff;
}

.wdt-scheduler-status-btn-pending {
    border-color: var(--kendo-subtle-text, #666666);
    color: var(--kendo-subtle-text, #666666);
}
.wdt-scheduler-status-btn-pending:hover {
    background: color-mix(in srgb, var(--kendo-subtle-text, #666666) 15%, transparent);
}
.wdt-scheduler-status-btn-pending.wdt-scheduler-status-btn-active {
    background: var(--kendo-subtle-text, #666666);
    color: #ffffff;
}

/* --- WDTSchedulerDragDrop --- */

.wdt-scheduler-drag-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    cursor: grabbing;
}

.wdt-scheduler-drag-ghost {
    position: fixed;
    z-index: 10001;
    padding: 4px 8px;
    background: var(--kendo-color-primary, #1e88e5);
    color: var(--kendo-color-on-primary, #ffffff);
    border-radius: var(--kendo-border-radius-md, 4px);
    font-size: 0.8rem;
    pointer-events: none;
    opacity: 0.85;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
}

.wdt-scheduler-drag-ghost-title {
    font-weight: 600;
}

.wdt-scheduler-drag-ghost-time {
    font-size: 0.7rem;
    opacity: 0.85;
}

/* --- WDTSchedulerEditDialog --- */

.wdt-scheduler-edit-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
    min-width: 0;
    max-width: 100%;
}

.wdt-scheduler-edit-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.wdt-scheduler-edit-inline {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.wdt-scheduler-edit-datetime {
    flex-direction: row;
    gap: 8px;
    align-items: flex-end;
}

.wdt-scheduler-edit-datetime > * {
    flex: 1;
    min-width: 0;
}

.wdt-scheduler-edit-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--kendo-component-text, #424242);
}

.wdt-scheduler-edit-color-status-row {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 24px;
}

.wdt-scheduler-edit-color-status-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wdt-scheduler-edit-colors {
    display: flex;
    gap: 4px;
}

.wdt-scheduler-edit-color-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.1s;
}

.wdt-scheduler-edit-color-item:hover {
    transform: scale(1.15);
}

.wdt-scheduler-edit-color-selected {
    border-color: var(--kendo-component-text, #424242);
}

.wdt-scheduler-edit-color-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.wdt-scheduler-edit-status {
    display: flex;
    gap: 4px;
}

.wdt-scheduler-edit-status-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    border-radius: var(--kendo-border-radius-md, 4px);
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, background 0.15s;
}

.wdt-scheduler-edit-status-item:hover {
    background: var(--kendo-hover-bg, rgba(0, 0, 0, 0.04));
}

.wdt-scheduler-edit-status-selected {
    border-color: var(--kendo-component-text, #424242);
}

.wdt-scheduler-edit-status-item i { font-size: 1rem; }
.wdt-scheduler-edit-status-pending i { color: var(--kendo-subtle-text, #666666); }
.wdt-scheduler-edit-status-accepted i { color: var(--kendo-color-success, #4caf50); }
.wdt-scheduler-edit-status-declined i { color: var(--kendo-color-error, #f44336); }
.wdt-scheduler-edit-status-tentative i { color: var(--kendo-color-warning, #ff9800); }
.wdt-scheduler-edit-status-completed i { color: var(--kendo-color-info, #00bcd4); }

.wdt-scheduler-edit-recurrence {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--kendo-component-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--kendo-border-radius-md, 4px);
    background: color-mix(in srgb, var(--kendo-color-base, #ebebeb) 20%, transparent);
}

.wdt-scheduler-edit-recurrence-types {
    display: flex;
    gap: 4px;
}

.wdt-scheduler-edit-recurrence-btn {
    font-size: 0.8rem;
    padding: 2px 10px;
}

.wdt-scheduler-edit-weekdays {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.wdt-scheduler-edit-weekday-btn {
    min-width: 36px;
    padding: 2px 6px;
    font-size: 0.8rem;
}