/* ===================================================================
   SQUARE DISPLAY FIX
   Optimierungen für quadratische/fast-quadratische Displays
   (Samsung Fold Außendisplay, Unihertz Jelly/Titan/Elite etc.)

   Greift NUR bei Aspect Ratio <= 5:4 UND kleinem Screen.
   Auf normalen Displays passiert hier NICHTS.

   Zum Deaktivieren: Einfach die <link>-Zeile im _Layout.cshtml auskommentieren.
   =================================================================== */

/* ===== GRUNDREGEL: Nur quadratische kleine Screens ===== */

@media (max-aspect-ratio: 5/4) and (max-width: 700px) {

    /* --- Kompaktere Schrift --- */
    html {
        font-size: 0.82em;
    }

    /* ===== HAUPTMENÜ MODAL (#MenuModal) ===== */

    /* Modal nicht zentrieren — oben starten, damit mehr Platz bleibt */
    #MenuModal .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        align-items: flex-start !important;
    }

    /* Modal-Body scrollbar machen */
    #MenuModal .modal-body {
        overflow-y: auto;
        max-height: calc(100dvh - 50px); /* Platz für Close-Button */
        -webkit-overflow-scrolling: touch;
    }

    /* Menü-Sektionen kompakter */
    #MenuModal .mb-4 {
        margin-bottom: 0.75rem !important;
    }

    /* Sektions-Badges kleiner */
    #MenuModal .menu-section-badge {
        font-size: 1rem !important;
    }

    #MenuModal .menu-section-badge.fs-4 {
        font-size: 1rem !important;
    }

    /* Menü-Cards kleiner */
    .card-modal-menu {
        width: 110px !important;
        height: 95px !important;
        margin: 0.3rem !important;
    }

    .card-modal-menu .card-body {
        padding: 0.3rem !important;
    }

    .card-modal-menu h2 {
        padding-top: 0.15rem !important;
        font-size: 1.3rem !important;
    }

    .card-modal-menu .fs-5 {
        font-size: 0.8rem !important;
        padding-top: 0.1rem !important;
    }

    /* Menü-Footer kompakter */
    #MenuModal .modal-footer {
        padding: 0.3rem !important;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    #MenuModal .modal-footer .btn {
        width: 120px !important;
        font-size: 0.78rem;
        padding: 0.25rem 0.4rem;
    }

    /* Close-Button kompakter */
    #MenuModal .modal-header {
        padding: 0.25rem 0.5rem !important;
    }

    /* ===== ALLGEMEINE MODAL FIXES ===== */

    /* Modal-Höhe begrenzen */
    .modal-content-scrollable {
        max-height: 90dvh;
    }

    .modal-body-scrollable {
        max-height: 70dvh;
    }

    /* Modal-Header/Footer kompakter */
    .modal-header {
        padding: 0.5rem 0.75rem;
    }

    .modal-footer {
        padding: 0.4rem 0.75rem;
    }

    .modal-title {
        font-size: 1rem;
    }

    /* ===== ALLGEMEINE ELEMENT FIXES ===== */

    /* Cards kompakter */
    .card-header {
        padding: 0.4rem 0.75rem;
    }

    .card-body {
        padding: 0.5rem 0.75rem;
    }

    /* Tabellen kompakter */
    .table td, .table th {
        padding: 0.3rem 0.5rem;
    }

    /* Buttons etwas kleiner */
    .btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.875rem;
    }

    .btn-sm {
        padding: 0.2rem 0.4rem;
        font-size: 0.8rem;
    }

    /* Container weniger Padding */
    .container-fluid {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Listen mit Scroll statt Overflow */
    .list-group {
        max-height: 65dvh;
        overflow-y: auto;
    }

    /* Formular-Inputs kompakter */
    .form-control, .form-select {
        padding: 0.3rem 0.5rem;
        font-size: 0.875rem;
    }

    /* Weniger Margins bei Überschriften */
    h5, .h5 {
        font-size: 1.1rem !important;
        margin-bottom: 0.3rem;
    }

    /* DataTables kompakter */
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        margin-bottom: 0.3rem;
    }
}

/* ===== EXTREM quadratisch (< 1:1, z.B. manche Fold-Positionen) ===== */

@media (max-aspect-ratio: 1/1) and (max-width: 600px) {

    /* Menü-Cards noch kleiner */
    .card-modal-menu {
        width: 95px !important;
        height: 82px !important;
        margin: 0.2rem !important;
    }

    .card-modal-menu h2 {
        font-size: 1.1rem !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .card-modal-menu .fs-5 {
        font-size: 0.7rem !important;
    }

    /* Menü-Footer Buttons noch schmaler */
    #MenuModal .modal-footer .btn {
        width: 100px !important;
        font-size: 0.72rem;
    }

    .modal-body-scrollable {
        max-height: 60dvh;
    }

    .list-group {
        max-height: 55dvh;
    }
}