/* ========================================================================
   PPP - Virtual Keyboard Styling (simple-keyboard)
   ======================================================================== */

/* Keyboard container */
.virtual-keyboard-container {
    margin-top: 12px;
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
}

/* Override simple-keyboard default theme */
.hg-theme-default {
    background-color: var(--modal-info-compact-bg) !important;
    border: 1px solid var(--modal-info-compact-border) !important;
    border-radius: 8px;
    padding: 12px;
    font-family: inherit;
}

/* Keyboard buttons */
.hg-theme-default .hg-button {
    background-color: var(--control-button-bg) !important;
    color: var(--control-button-text) !important;
    border: 1px solid var(--control-button-border) !important;
    border-bottom: 1px solid var(--control-button-border) !important;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    height: 45px;
    margin: 3px;
    transition: all 0.2s ease;
}

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

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

/* Special keys styling */
.hg-theme-default .hg-button.hg-functionBtn {
    background-color: var(--button-start-bg) !important;
    color: var(--button-start-text) !important;
    border-color: var(--button-start-bg) !important;
    font-size: 14px;
}

.hg-theme-default .hg-button.hg-functionBtn:hover {
    background-color: var(--button-start-hover) !important;
    border-color: var(--button-start-hover) !important;
}

/* Backspace button (red) */
.hg-theme-default .hg-button.hg-red {
    background-color: var(--button-stop-bg) !important;
    color: var(--button-stop-text) !important;
    border-color: var(--button-stop-bg) !important;
}

.hg-theme-default .hg-button.hg-red:hover {
    background-color: var(--button-stop-hover) !important;
    border-color: var(--button-stop-hover) !important;
}

/* Enter button (highlighted) */
.hg-theme-default .hg-button.hg-highlight {
    background-color: var(--button-completed-bg) !important;
    color: var(--button-completed-text) !important;
    border-color: var(--button-completed-bg) !important;
}

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

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

/* Rows */
.hg-theme-default .hg-row {
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
    .hg-theme-default .hg-button {
        height: 40px;
        font-size: 14px;
        margin: 2px;
    }

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

@media (max-width: 480px) {
    .hg-theme-default .hg-button {
        height: 35px;
        font-size: 12px;
        margin: 1px;
    }

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

    .hg-theme-default {
        padding: 8px;
    }
}