.offcanvas:focus {
    outline: none;
}

.offcanvas-header {
    height: 90px;
}

.offcanvas-header>button {
    width: 90px;
}

.offcanvas i {
    font-size: 1rem !important;
    margin-right: 10px !important;
    line-height: 3rem !important;
}

.offcanvas i:hover {
    color: var(--mkpi-text-primary-dark);
}

.text-bg-dark {
    background-color: var(--mkpi-bg-dark) !important;
    color: var(--mkpi-text-primary-dark);
}

.sidebar-navigation {
    display: none;
}

.social-media i {
    padding: 10px;
    margin-right: 20px;
    background-color: var(--mkpi-bg-primary);
    font-size: 1.5rem;
    color: var(--mkpi-bg-dark);
}

@media (max-width: 1400px) {
    .offcanvas-header {
        height: 80px;
    }
    
    .offcanvas-header>button {
        width: 80px;
    }
}

@media (max-width: 1200px) {
    .sidebar-navigation {
        display: block;
    }

    .sidebar-contact {
        display: none;
    }

    .offcanvas-header {
        height: 50px;
    }
    
    .offcanvas-header>button {
        width: 50px;
    }
}

@media (max-width: 576px) {
    .offcanvas {
        width: 300px !important;
    }
}

/* ===== SIDEBAR KONTAKTFORMULAR ===== */

/* KONSOLIDIERT: Sidebar verwendet jetzt universelle modal-input CSS-Klassen 
   aus css/modals.css für einheitliche Darstellung auf allen Seiten */

.sidebar-contact .invalid-feedback {
    display: block;
    width: 100%;
    margin-top: var(--space-xs);
    font-size: var(--mkpi-text-small);
    color: var(--mkpi-error);
}

/* ===== VISUELLE VALIDIERUNG FÜR SIDEBAR-FORMULARE ===== */

.form-control.sidebar-input.field-valid {
    border-color: var(--mkpi-success) !important;
    background-color: var(--mkpi-success-muted) !important;
    box-shadow: 0 0 0 0.1rem rgba(25, 135, 84, 0.25) !important;
}

.form-control.sidebar-input.field-invalid {
    border-color: var(--mkpi-error) !important;
    background-color: var(--mkpi-bg-primary) !important;
    box-shadow: 0 0 0 0.1rem rgba(255, 59, 48, 0.25) !important;
}

.form-control.sidebar-input.field-empty {
    border-color: var(--mkpi-border-light) !important;
    background-color: var(--mkpi-bg-primary) !important;
}

.form-control.sidebar-input:focus {
    border-color: var(--mkpi-accent) !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 114, 227, 0.15) !important;
    background-color: var(--mkpi-bg-primary) !important;
}

.form-control.sidebar-input:-webkit-autofill,
.form-control.sidebar-input:-webkit-autofill:hover,
.form-control.sidebar-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--mkpi-bg-primary) inset !important;
    -webkit-text-fill-color: var(--mkpi-text-primary) !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.form-control.sidebar-input.field-valid:-webkit-autofill,
.form-control.sidebar-input.field-valid:-webkit-autofill:hover,
.form-control.sidebar-input.field-valid:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--mkpi-success-muted) inset !important;
    -webkit-text-fill-color: var(--mkpi-text-primary) !important;
    border-color: var(--mkpi-success) !important;
}

.sidebar-contact .text-danger {
    font-size: 0.9em;
}