/* Touch-Mode Styles für FM-HV */
/* Aktiviert größere Touch-Targets und angepasste Abstände */

/* === Base Touch Mode === */
body.touch-mode {
    --touch-target-min: 44px;
    --touch-spacing: 12px;
    --touch-font-size: 1.1rem;
}

/* === Buttons === */
body.touch-mode .k-button {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: 12px 20px;
    font-size: var(--touch-font-size);
}

body.touch-mode .k-button-icon {
    min-width: var(--touch-target-min);
    padding: 12px;
}

body.touch-mode .k-button .k-icon,
body.touch-mode .k-button .k-svg-icon {
    font-size: 1.5rem;
    width: 24px;
    height: 24px;
}

/* === Form Controls === */
body.touch-mode .k-input,
body.touch-mode .k-textbox,
body.touch-mode .k-textarea,
body.touch-mode .k-dropdown,
body.touch-mode .k-combobox,
body.touch-mode .k-datepicker,
body.touch-mode .k-numerictextbox {
    min-height: var(--touch-target-min);
    font-size: var(--touch-font-size);
}

body.touch-mode .k-input-inner {
    padding: 12px;
}

body.touch-mode .k-checkbox,
body.touch-mode .k-radio {
    width: 24px;
    height: 24px;
}

/* === Grid === */
body.touch-mode .k-grid {
    font-size: var(--touch-font-size);
}

body.touch-mode .k-grid td,
body.touch-mode .k-grid th {
    padding: var(--touch-spacing);
}

body.touch-mode .k-grid-header th {
    min-height: var(--touch-target-min);
}

body.touch-mode .k-grid tbody tr {
    min-height: 50px;
}

body.touch-mode .k-grid .k-command-cell .k-button {
    margin: 4px;
}

/* === Toolbar === */
body.touch-mode .k-toolbar {
    padding: var(--touch-spacing);
    gap: var(--touch-spacing);
}

body.touch-mode .k-toolbar-button,
body.touch-mode .k-toolbar .k-button {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
}

/* === Menu & Navigation === */
body.touch-mode .k-menu-item {
    min-height: var(--touch-target-min);
    padding: var(--touch-spacing) 16px;
}

body.touch-mode .k-drawer-item {
    min-height: 50px;
    padding: var(--touch-spacing) 16px;
}

body.touch-mode .k-panelbar-item > .k-link {
    min-height: var(--touch-target-min);
    padding: var(--touch-spacing) 16px;
}

/* === Tabs === */
body.touch-mode .k-tabstrip-item {
    min-height: var(--touch-target-min);
    padding: var(--touch-spacing) 20px;
}

/* === Dialog & Window === */
body.touch-mode .k-dialog .k-dialog-buttongroup .k-button {
    min-height: 50px;
    flex: 1;
}

body.touch-mode .k-window-titlebar {
    min-height: 50px;
}

/* === Dropdown/Popup Items === */
body.touch-mode .k-list-item,
body.touch-mode .k-popup .k-item {
    min-height: var(--touch-target-min);
    padding: var(--touch-spacing) 16px;
}

/* === Splitter === */
body.touch-mode .k-splitbar {
    width: 12px;
}

body.touch-mode .k-splitbar-horizontal {
    height: 12px;
}

/* === Badge === */
body.touch-mode .k-badge {
    padding: 6px 12px;
    font-size: 0.9rem;
}

/* === Notification === */
body.touch-mode .k-notification {
    padding: var(--touch-spacing);
    font-size: var(--touch-font-size);
}

/* === Tooltip === */
body.touch-mode .k-tooltip {
    padding: var(--touch-spacing);
    font-size: var(--touch-font-size);
}

/* === Custom FM-HV Components === */
body.touch-mode .redner-item,
body.touch-mode .frage-item {
    padding: var(--touch-spacing);
    min-height: 60px;
}

body.touch-mode .statistik-box {
    gap: var(--touch-spacing);
}

body.touch-mode .statistik-box .k-badge {
    padding: 8px 16px;
}

/* === Keyboard Helper for Touch === */
body.touch-mode .keyboard-helper {
    display: block !important;
}

body.desktop-mode .keyboard-helper {
    display: none !important;
}

/* === Mobile Mode (zusätzlich zu Touch) === */
body.mobile-mode {
    --touch-target-min: 48px;
    --touch-spacing: 16px;
    --touch-font-size: 1rem;
}

/* Mobile: Stack horizontal layouts */
body.mobile-mode .hauptmaske-telerik > .k-splitter {
    flex-direction: column !important;
}

body.mobile-mode .redner-fragen-bereich {
    flex-direction: column;
}

/* Mobile: Full-width panels */
body.mobile-mode .k-splitter-pane {
    width: 100% !important;
    max-width: 100% !important;
}

/* Mobile: Simplified toolbar */
body.mobile-mode .k-toolbar {
    flex-wrap: wrap;
}

body.mobile-mode .statistik-box {
    display: none;
}

body.mobile-mode .toolbar-search {
    order: 10;
    width: 100%;
    margin-top: 8px;
}

/* Mobile: Hide non-essential elements */
body.mobile-mode .desktop-only {
    display: none !important;
}

/* Mobile: Show mobile-specific elements */
body.mobile-mode .mobile-only {
    display: block !important;
}

body:not(.mobile-mode) .mobile-only {
    display: none !important;
}

/* === Media Queries for Auto-Detection === */
@media (hover: none) and (pointer: coarse) {
    /* Touch device detected */
    body:not(.force-desktop) {
        --touch-target-min: 44px;
        --touch-spacing: 12px;
    }

    body:not(.force-desktop) .k-button {
        min-height: 44px;
    }
}

@media (max-width: 768px) {
    /* Mobile viewport */
    body:not(.force-desktop) {
        --touch-target-min: 48px;
    }

    body:not(.force-desktop) .statistik-box {
        display: none;
    }

    body:not(.force-desktop) .k-splitter {
        flex-direction: column !important;
    }
}

@media (max-width: 480px) {
    /* Small mobile */
    body:not(.force-desktop) .chat-panel.expanded {
        width: 100% !important;
    }

    body:not(.force-desktop) .k-toolbar > *:not(.k-toolbar-button):not(.k-button) {
        display: none;
    }
}

/* === Bühnenansicht Touch-Optimierung === */
.buehnen-ansicht.touch-mode {
    font-size: 1.5rem;
}

.buehnen-ansicht.touch-mode .frage-text {
    font-size: 2rem;
    line-height: 1.4;
}

.buehnen-ansicht.touch-mode .antwort-text {
    font-size: 1.8rem;
    line-height: 1.5;
}

.buehnen-ansicht.touch-mode .k-button {
    min-height: 60px;
    font-size: 1.3rem;
}

/* === Drag & Drop Touch Support === */
body.touch-mode [draggable="true"] {
    cursor: grab;
    touch-action: none;
}

body.touch-mode [draggable="true"]:active {
    cursor: grabbing;
}

body.touch-mode .drag-handle {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}