/* Mobile UI: Buttons, Filter, Layout – bessere Sichtbarkeit und Anordnung */

/* Page-Actions: ZURÜCK, NEU, ABBRECHEN, SPEICHERN – größere Touch-Targets, klarer Kontrast */
@media (max-width: 600px) {
    .page-actions-row {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }

    .page-actions-row .mud-button-root {
        min-height: 44px;
        padding: 0.5rem 1rem;
        font-weight: 600;
    }

    .page-actions-row .mud-button-filled {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }

    .page-actions-row .mud-button-outlined {
        border-width: 2px;
    }

    /* Edit-Page: Action-Buttons rechts stapeln statt abschneiden */
    .page-edit-header {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }

    .page-edit-header .page-edit-actions {
        flex: 1 1 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .page-edit-header .page-edit-actions .mud-button-root {
        min-height: 44px;
        font-weight: 600;
    }
}

/* Filter-Bereich: Suchfeld + Status als einheitlicher Block */
.page-filters-wrapper {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid #e9ecef;
}

@media (max-width: 600px) {
    .page-filters-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }

    .page-filters-row .mud-input-root,
    .page-filters-row .mud-select {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .page-filters-row .mud-input-slot {
        font-size: 1rem;
    }

    .page-filters-row .mud-select .mud-input-slot {
        min-height: 48px;
    }

    .page-filters-row .mud-input-outlined,
    .page-filters-row .mud-input-outlined .mud-input-slot {
        border-radius: 10px !important;
    }

    .page-filters-row .mud-input-outlined {
        border-width: 2px;
        background: white;
    }

    .page-filters-row .mud-input-outlined:focus-within {
        border-color: var(--vbv-red);
        box-shadow: 0 0 0 3px rgba(190, 26, 26, 0.12);
    }

    .page-filter-status .mud-input-label {
        font-weight: 600;
        color: #495057;
    }

    .page-filter-status .mud-input-outlined {
        background: white;
    }
}

/* Filter-Wrapper auch auf Desktop für einheitliches Erscheinungsbild */
@media (min-width: 601px) {
    .page-filters-wrapper {
        padding: 1rem 1.25rem;
    }
}

/* BackButton: auf mobil deutlicher */
@media (max-width: 600px) {
    .back-button-mobile {
        min-height: 44px !important;
        padding: 0.5rem 1rem !important;
        font-weight: 600 !important;
        border-width: 2px !important;
    }
}

/* NEU-Button: primär hervorgehoben */
@media (max-width: 600px) {
    .btn-new-mobile {
        min-height: 44px !important;
        padding: 0.5rem 1.25rem !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 6px rgba(190, 26, 26, 0.35) !important;
    }
}

/* Logout-Button: mobil sichtbarer */
@media (max-width: 600px) {
    .btn-header-logout {
        min-height: 44px;
        padding: 0.6rem 1rem;
        font-size: 0.95rem;
        font-weight: 700;
        border-width: 2px !important;
    }
}

/* Bottom-Nav: Tabs größer und besser klickbar */
@media (max-width: 600px) {
    .bottom-nav-tab {
        min-height: 44px;
        padding: 0.5rem 1rem !important;
        font-size: 0.9rem !important;
        font-weight: 600;
    }

    .bottom-nav-tab.active {
        box-shadow: 0 -2px 8px rgba(190, 26, 26, 0.3);
    }
}

/* MudTable: mobil lesbarer */
@media (max-width: 600px) {
    .mud-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mud-table .mud-table-cell {
        padding: 0.75rem 0.5rem;
        font-size: 0.9rem;
    }

    .mud-table .mud-table-head .mud-table-cell {
        font-weight: 600;
    }
}

/* MudPaper/Formular: mobil mehr Abstand */
@media (max-width: 600px) {
    .mud-paper.pa-4 {
        padding: 1rem !important;
    }
}

/* Header: mobil kompakter */
@media (max-width: 600px) {
    .header-bar {
        padding: 0.5rem 0.75rem !important;
    }

    .header-logo {
        max-height: 44px !important;
    }

    .header-center {
        padding: 0 0.5rem;
    }
}