/*
 * WDT Components - Common Utilities & Theme System
 *
 * Zentrale CSS-Utilities für alle WDT-Komponenten.
 * Alle Komponenten verwenden ausschließlich --wdt-* Variablen.
 * Die Kendo-Kompatibilität wird hier in :root hergestellt.
 * Um Kendo abzulösen: Einfach die var(--kendo-*) Fallbacks durch eigene Werte ersetzen.
 */

/* ============================================================================
   WDT DESIGN TOKENS — Zentrale Abstraktionsschicht
   ============================================================================
   Jede --wdt-* Variable mappt aktuell auf eine --kendo-* Variable (Telerik-kompatibel).
   Zum Ablösen von Telerik: --kendo-*-Referenzen durch eigene Werte ersetzen.
   Alle Komponenten-CSS-Dateien verwenden NUR --wdt-* Variablen.
   ============================================================================ */

:root {
    /* ── Colors: Primary ── */
    --wdt-color-primary: var(--kendo-color-primary, #0078d4);
    --wdt-color-primary-hover: var(--kendo-color-primary-hover, #106ebe);
    --wdt-color-primary-active: var(--kendo-color-primary-active, #005a9e);
    --wdt-color-primary-subtle: var(--kendo-color-primary-subtle, rgba(0, 120, 212, 0.1));
    --wdt-color-primary-subtle-hover: var(--kendo-color-primary-subtle-hover, rgba(0, 120, 212, 0.2));
    --wdt-color-primary-subtle-active: var(--kendo-color-primary-subtle-active, rgba(0, 120, 212, 0.3));
    --wdt-color-primary-emphasis: var(--kendo-color-primary-emphasis, #004578);
    --wdt-color-primary-rgb: var(--kendo-color-primary-rgb, 0, 120, 212);
    --wdt-color-primary-darker: var(--kendo-color-primary-darker, #005a9e);
    --wdt-color-primary-on-subtle: var(--kendo-color-primary-on-subtle, #004578);
    --wdt-color-primary-on-surface: var(--kendo-color-primary-on-surface, #005a9e);
    --wdt-color-on-primary: var(--kendo-color-on-primary, #ffffff);

    /* ── Colors: Secondary ── */
    --wdt-color-secondary: var(--kendo-color-secondary, #979593);
    --wdt-color-secondary-hover: var(--kendo-color-secondary-hover, #8a8886);
    --wdt-color-on-secondary: var(--kendo-color-on-secondary, #ffffff);

    /* ── Colors: Tertiary ── */
    --wdt-color-tertiary: var(--kendo-color-tertiary, #2b88d8);
    --wdt-color-on-tertiary: var(--kendo-color-on-tertiary, #ffffff);

    /* ── Colors: Dark / Light / Inverse ── */
    --wdt-color-on-dark: var(--kendo-color-on-dark, #ffffff);

    /* ── Colors: Semantic — Success ── */
    --wdt-color-success: var(--kendo-color-success, #55a554);
    --wdt-color-success-hover: var(--kendo-color-success-hover, #3e973e);
    --wdt-color-success-active: var(--kendo-color-success-active, #278a27);
    --wdt-color-success-emphasis: var(--kendo-color-success-emphasis, #107c10);
    --wdt-color-success-subtle: var(--kendo-color-success-subtle, rgba(85, 165, 84, 0.1));
    --wdt-color-success-subtle-hover: var(--kendo-color-success-subtle-hover, rgba(85, 165, 84, 0.2));
    --wdt-color-success-on-subtle: var(--kendo-color-success-on-subtle, #107c10);
    --wdt-color-success-rgb: var(--kendo-color-success-rgb, 76, 175, 80);
    --wdt-color-on-success: var(--kendo-color-on-success, #ffffff);

    /* ── Colors: Semantic — Error ── */
    --wdt-color-error: var(--kendo-color-error, #c2666b);
    --wdt-color-error-hover: var(--kendo-color-error-hover, #b85156);
    --wdt-color-error-subtle: var(--kendo-color-error-subtle, rgba(194, 102, 107, 0.1));
    --wdt-color-error-subtle-hover: var(--kendo-color-error-subtle-hover, rgba(194, 102, 107, 0.2));
    --wdt-color-error-subtle-active: var(--kendo-color-error-subtle-active, rgba(194, 102, 107, 0.3));
    --wdt-color-error-on-subtle: var(--kendo-color-error-on-subtle, #a4262c);
    --wdt-color-error-rgb: var(--kendo-color-error-rgb, 244, 67, 54);
    --wdt-color-on-error: var(--kendo-color-on-error, #ffffff);

    /* ── Colors: Semantic — Warning ── */
    --wdt-color-warning: var(--kendo-color-warning, #ffc80a);
    --wdt-color-warning-hover: var(--kendo-color-warning-hover, #f5c000);
    --wdt-color-warning-emphasis: var(--kendo-color-warning-emphasis, #c19c00);
    --wdt-color-warning-subtle: var(--kendo-color-warning-subtle, rgba(255, 200, 10, 0.1));
    --wdt-color-warning-subtle-hover: var(--kendo-color-warning-subtle-hover, rgba(255, 200, 10, 0.2));
    --wdt-color-warning-subtle-active: var(--kendo-color-warning-subtle-active, rgba(255, 200, 10, 0.3));
    --wdt-color-warning-on-subtle: var(--kendo-color-warning-on-subtle, #c19c00);
    --wdt-color-warning-rgb: var(--kendo-color-warning-rgb, 255, 152, 0);
    --wdt-color-on-warning: var(--kendo-color-on-warning, #323130);

    /* ── Colors: Semantic — Info ── */
    --wdt-color-info: var(--kendo-color-info, #0a7eff);
    --wdt-color-info-hover: var(--kendo-color-info-hover, #096edf);
    --wdt-color-info-subtle: var(--kendo-color-info-subtle, rgba(10, 126, 255, 0.1));
    --wdt-color-info-subtle-hover: var(--kendo-color-info-subtle-hover, rgba(10, 126, 255, 0.2));
    --wdt-color-info-subtle-active: var(--kendo-color-info-subtle-active, rgba(10, 126, 255, 0.3));
    --wdt-color-info-rgb: var(--kendo-color-info-rgb, 33, 150, 243);
    --wdt-color-on-info: var(--kendo-color-on-info, #ffffff);

    /* ── Colors: Surfaces & Backgrounds ── */
    --wdt-color-surface: var(--kendo-color-surface, #faf9f8);
    --wdt-color-surface-alt: var(--kendo-color-surface-alt, #ffffff);
    --wdt-color-app-surface: var(--kendo-color-app-surface, #ffffff);
    --wdt-color-base: var(--kendo-color-base, #ffffff);
    --wdt-color-base-hover: var(--kendo-color-base-hover, #f3f2f1);
    --wdt-color-base-active: var(--kendo-color-base-active, #edebe9);
    --wdt-color-base-subtle: var(--kendo-color-base-subtle, #edebe9);
    --wdt-color-base-subtle-hover: var(--kendo-color-base-subtle-hover, #e1dfdd);
    --wdt-color-base-subtle-active: var(--kendo-color-base-subtle-active, #d2d0ce);
    --wdt-color-base-emphasis: var(--kendo-color-base-emphasis, #605e5c);
    --wdt-color-base-on-subtle: var(--kendo-color-base-on-subtle, #323130);
    --wdt-color-base-on-surface: var(--kendo-color-base-on-surface, #323130);

    /* ── Colors: Text ── */
    --wdt-color-on-app-surface: var(--kendo-color-on-app-surface, #323130);
    --wdt-color-on-base: var(--kendo-color-on-base, #323130);
    --wdt-color-on-surface: var(--kendo-color-on-surface, #323130);
    --wdt-color-subtle: var(--kendo-color-subtle, #605e5c);
    --wdt-color-subtle-text: var(--kendo-color-subtle-text, #605e5c);
    --wdt-subtle-text: var(--kendo-subtle-text, #666666);

    /* ── Colors: Borders ── */
    --wdt-color-border: var(--kendo-color-border, #8a8886);
    --wdt-color-border-alt: var(--kendo-color-border-alt, #323130);

    /* ── Colors: Component ── */
    --wdt-component-bg: var(--kendo-component-bg, #ffffff);
    --wdt-component-text: var(--kendo-component-text, #424242);
    --wdt-component-border: var(--kendo-component-border, rgba(0, 0, 0, 0.08));
    --wdt-hover-bg: var(--kendo-hover-bg, rgba(0, 0, 0, 0.04));
    --wdt-selected-bg: var(--kendo-selected-bg, rgba(0, 120, 212, 0.12));
    --wdt-disabled-bg: var(--kendo-disabled-bg, #f3f2f1);
    --wdt-disabled-text: var(--kendo-disabled-text, #a19f9d);

    /* ── Typography ── */
    --wdt-font-family: var(--kendo-font-family, inherit);
    --wdt-font-family-monospace: var(--kendo-font-family-monospace, "Consolas", "Courier New", monospace);
    --wdt-font-size: var(--kendo-font-size, 0.875rem);
    --wdt-font-size-xs: var(--kendo-font-size-xs, 0.625rem);
    --wdt-font-size-sm: var(--kendo-font-size-sm, 0.75rem);
    --wdt-font-size-lg: var(--kendo-font-size-lg, 1rem);
    --wdt-font-weight-bold: var(--kendo-font-weight-bold, 600);
    --wdt-font-weight-semibold: 600;
    --wdt-line-height: var(--kendo-line-height, 1.4285714286);

    /* ── Border Radius ── */
    --wdt-border-radius-sm: var(--kendo-border-radius-sm, 2px);
    --wdt-border-radius-md: var(--kendo-border-radius-md, 4px);
    --wdt-border-radius-lg: var(--kendo-border-radius-lg, 6px);

    /* ── Elevation / Shadows ── */
    --wdt-elevation-3: var(--kendo-elevation-3, 0 4px 8px rgba(0, 0, 0, 0.12));
    --wdt-elevation-4: var(--kendo-elevation-4, 0 4px 16px rgba(0, 0, 0, 0.12));

    /* ── Input Components ── */
    --wdt-input-sm-height: var(--kendo-input-sm-height, 30px);
    --wdt-input-sm-padding-x: var(--kendo-input-sm-padding-x, 4px);
    --wdt-input-sm-padding-y: var(--kendo-input-sm-padding-y, 2px);
    --wdt-input-md-height: var(--kendo-input-md-height, 40px);
    --wdt-input-md-padding-x: var(--kendo-input-md-padding-x, 8px);
    --wdt-input-md-padding-y: var(--kendo-input-md-padding-y, 6px);
    --wdt-input-lg-padding-x: var(--kendo-input-lg-padding-x, 12px);
    --wdt-input-lg-padding-y: var(--kendo-input-lg-padding-y, 10px);

    /* ── Splitter ── */
    --wdt-splitter-splitbar-size: var(--kendo-splitter-splitbar-size, 0.75rem);

    /* ── Spacing ── */
    --wdt-spacing-1: var(--kendo-spacing-1, 4px);
    --wdt-spacing-2: var(--kendo-spacing-2, 8px);
    --wdt-spacing-3: var(--kendo-spacing-3, 12px);
    --wdt-spacing-4: var(--kendo-spacing-4, 16px);
    --wdt-spacing-5: var(--kendo-spacing-5, 20px);

    /* ── Transitions (WDT-eigene, kein Kendo-Äquivalent) ── */
    --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 (WDT-eigene, zusätzlich zu Elevation) ── */
    --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(--wdt-color-primary-emphasis);

    /* ── 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(--wdt-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(--wdt-color-primary-hover, #ff7368);
}

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

.wdt-hover-base:hover:not(:disabled):not(.wdt-disabled) {
    background-color: var(--wdt-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(--wdt-color-border, #e0e0e0);
}

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

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

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

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

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

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

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

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

.wdt-rounded-md {
    border-radius: var(--wdt-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(--wdt-color-primary, #ff6358);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.wdt-bg-surface-alt {
    background-color: var(--wdt-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(--wdt-color-border, #cacaca);
    border-radius: 3px;
}

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

/* Firefox */
.wdt-scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--wdt-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;
    }
}

/* --- End of WDTCommon.css ---
 * Component-specific styles have been extracted to separate files:
 *   css/wdt-splitter.css        - Multi-Splitter component
 *   css/wdt-tilelayout.css      - Tile Layout component
 *   css/wdt-button.css          - Button styles, spinner, ripple, elevation, animations
 *   css/wdt-toggle-icon-button.css - Toggle Icon Button styles
 *   css/wdt-scheduler.css       - Scheduler component
 * All loaded automatically via lib.module.js
 */