/**
 * Copyright (c) SupportSystem s.r.o. Všechna práva vyhrazena.
 * Autoři: Petr Marek, Jan Kučera
 */

/**
 * @uses-design-tokens-v2
 *
 * Virtual Keyboard v2 — skin sdílené KeyboardManager klávesnice (simple-keyboard)
 * čistě přes --ui-* design tokeny.
 *
 * Nahrazuje legacy `dashboard/virtual-keyboard.css`, který čerpal z V1 scheme
 * proměnných (`--control-button-bg`, `--button-start-*`, `--modal-info-compact-*`)
 * injektovaných partialem `dashboard-colors` (CssGenerator). Tím odpadá závislost
 * v2 stránek na V1 color systému — klávesnice se automaticky přizpůsobí všem
 * 6 v2 schématům včetně tmavých.
 *
 * Selektory `.hg-*` jsou 3rd-party třídy knihovny simple-keyboard (A12 výjimka).
 * A14: font-size/weight + padding/margin/gap přes tokeny; height/border/radius
 * v px jsou v core-v2 CSS povolené.
 */

/* Kontejner (KeyboardManager.createContainer → .virtual-keyboard-container). */
.virtual-keyboard-container {
    margin-top: var(--ui-spacing-sm);
    margin-bottom: var(--ui-spacing-sm);
    border-radius: var(--ui-radius-large);
    overflow: hidden;
}

/* Plocha klávesnice — přebíjí výchozí šedý theme simple-keyboard. */
.hg-theme-default {
    background-color: var(--ui-surface-card-bg) !important;
    border: 1px solid var(--ui-border-default) !important;
    border-radius: var(--ui-radius-large);
    padding: var(--ui-spacing-md);
    font-family: inherit;
}

/* Běžná klávesa */
.hg-theme-default .hg-button {
    background-color: var(--ui-surface-base-bg) !important;
    color: var(--ui-text-primary) !important;
    border: 1px solid var(--ui-border-default) !important;
    border-radius: var(--ui-radius-medium);
    font-size: var(--ui-text-size-label);
    font-weight: var(--ui-text-weight-medium);
    height: 45px;
    margin: var(--ui-spacing-3xs);
    transition: all 0.2s ease;
}

.hg-theme-default .hg-button:hover {
    background-color: var(--ui-overlay-hover-bg) !important;
    color: var(--ui-text-primary) !important;
    border-color: var(--ui-border-strong) !important;
    transform: translateY(-1px);
}

.hg-theme-default .hg-button:active {
    background-color: var(--ui-overlay-hover-bg) !important;
    transform: translateY(0);
}

/* Funkční klávesy (tab/shift/.com/@ …) — sekundární akcent */
.hg-theme-default .hg-button.hg-functionBtn {
    background-color: var(--ui-action-secondary-bg) !important;
    color: var(--ui-action-secondary-text) !important;
    border-color: var(--ui-action-secondary-bg) !important;
    font-size: var(--ui-text-size-label);
}

.hg-theme-default .hg-button.hg-functionBtn:hover {
    background-color: var(--ui-action-secondary-bg) !important;
    border-color: var(--ui-border-strong) !important;
    transform: translateY(-1px);
}

/* Backspace (red) — sekundární akcent (žádný v2 danger token v této vrstvě) */
.hg-theme-default .hg-button.hg-red {
    background-color: var(--ui-action-secondary-bg) !important;
    color: var(--ui-action-secondary-text) !important;
    border-color: var(--ui-action-secondary-bg) !important;
}

.hg-theme-default .hg-button.hg-red:hover {
    background-color: var(--ui-action-secondary-bg) !important;
    border-color: var(--ui-border-strong) !important;
}

/* Enter (highlight) — primární akcent */
.hg-theme-default .hg-button.hg-highlight {
    background-color: var(--ui-action-primary-bg) !important;
    color: var(--ui-action-primary-text) !important;
    border-color: var(--ui-action-primary-bg) !important;
}

.hg-theme-default .hg-button.hg-highlight:hover {
    background-color: var(--ui-action-primary-bg-hover) !important;
    border-color: var(--ui-action-primary-bg-hover) !important;
}

/* Mezerník */
.hg-theme-default .hg-button.hg-button-space {
    min-width: 200px;
}

/* Řady */
.hg-theme-default .hg-row {
    display: flex;
    justify-content: center;
    margin-bottom: var(--ui-spacing-2xs);
}

.hg-theme-default .hg-row:last-child {
    margin-bottom: 0;
}

/* Responsivní zmenšení */
@media (max-width: 768px) {
    .hg-theme-default .hg-button {
        height: 40px;
        font-size: var(--ui-text-size-micro);
        margin: var(--ui-spacing-3xs);
    }

    .hg-theme-default .hg-button.hg-button-space {
        min-width: 150px;
    }
}

@media (max-width: 480px) {
    .hg-theme-default .hg-button {
        height: 35px;
        font-size: var(--ui-text-size-micro);
        margin: var(--ui-spacing-3xs);
    }

    .hg-theme-default .hg-button.hg-button-space {
        min-width: 100px;
    }

    .hg-theme-default {
        padding: var(--ui-spacing-sm);
    }
}