/**
 * DL AccountingAI – Mobile / Smartphone Layout
 * Breakpoint: max-width 768px ODER Querformat mit geringer Höhe (Smartphone)
 */

:root {
    --app-height: 100dvh;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --mdl-mobile-topbar: 2.75rem;
}

@supports not (height: 100dvh) {
    :root {
        --app-height: 100vh;
    }
}

@media (max-width: 768px), (max-height: 520px) and (max-width: 1024px) {

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        height: var(--app-height);
        min-height: var(--app-height);
        max-height: var(--app-height);
        overflow: hidden;
        padding-top: var(--safe-top);
        padding-bottom: var(--safe-bottom);
    }

    #login-screen {
        padding: max(1rem, var(--safe-top)) 0.75rem max(1rem, var(--safe-bottom));
        align-items: flex-start;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #login-screen > div {
        margin-top: 0.5rem;
        margin-bottom: 1rem;
        gap: 1.25rem;
    }

    #app-screen {
        width: 100%;
        max-width: 100vw;
        min-height: 0;
        height: calc(var(--app-height) - var(--safe-top) - var(--safe-bottom));
        flex: 1 1 auto;
        overflow: hidden;
        position: relative;
    }

    /* Ein Scroll-Container: main – kein Flex-Shrink auf Kind-Views */
    #app-screen > main.mdl-main-content {
        display: block !important;
        width: 100%;
        min-width: 0;
        max-width: 100vw;
        min-height: 0;
        flex: 1 1 auto;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
        padding-top: calc(var(--mdl-mobile-topbar) + var(--safe-top));
    }

    /* Leerer Desktop-Header – auf Mobile Platz sparen (v. a. Querformat) */
    #app-screen > main.mdl-main-content > header.h-16 {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    /*
     * Views: display:block schlägt switchView inline display:flex
     * (Mandanten scrollt, weil flache Struktur; OP/Bearbeitung hat tiefe flex-1-Ketten)
     */
    #app-screen > main.mdl-main-content > [id^="view-"]:not(.hidden),
    #app-screen > main.mdl-main-content > .view-section:not(.hidden) {
        display: block !important;
        overflow: visible !important;
        flex: none !important;
        min-height: auto !important;
        max-height: none !important;
        height: auto !important;
    }

    /* Reports v2: Journal / Offene Posten / Historie */
    main.mdl-main-content #view-reports-v2:not(.hidden) {
        display: block !important;
    }

    main.mdl-main-content #view-reports-v2 [id^="tab-reports-"]:not(.hidden) {
        display: block !important;
        overflow: visible !important;
        flex: none !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }

    main.mdl-main-content #tab-reports-op:not(.hidden) > .flex-1.overflow-auto,
    main.mdl-main-content #tab-reports-journal:not(.hidden) > .flex-1.overflow-auto,
    main.mdl-main-content #tab-reports-history:not(.hidden) > .flex-1.overflow-auto,
    main.mdl-main-content #tab-reports-maintenance:not(.hidden) .flex-1.overflow-auto {
        display: block !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        flex: none !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }

    /* Bearbeitungstabelle & ähnliche verschachtelte Layouts */
    #view-standard:not(.hidden) {
        display: block !important;
        overflow: visible !important;
    }

    #view-standard:not(.hidden) .flex-1.overflow-hidden,
    #view-standard:not(.hidden) .min-h-0.overflow-hidden,
    #view-standard > .flex.gap-4.flex-1,
    #view-standard > .flex.gap-4.flex-1.overflow-hidden {
        display: block !important;
        overflow: visible !important;
        flex: none !important;
        min-height: auto !important;
        height: auto !important;
        max-height: none !important;
    }

  /* Bank, EU, Regeln: innere flex-1-Scroll-Fallen */
    main.mdl-main-content #view-bank:not(.hidden) .min-h-0.overflow-hidden,
    main.mdl-main-content #view-bank:not(.hidden) .flex-1.overflow-hidden,
    main.mdl-main-content #view-eu:not(.hidden) .flex-1.overflow-hidden,
    main.mdl-main-content #view-rules:not(.hidden) .flex-1.overflow-hidden,
    main.mdl-main-content #view-kontenblatt:not(.hidden) .flex-1.overflow-hidden {
        display: block !important;
        overflow: visible !important;
        flex: none !important;
        height: auto !important;
        max-height: none !important;
    }

    main.mdl-main-content #view-bank:not(.hidden) .flex-1.overflow-auto {
        overflow-x: auto !important;
        overflow-y: visible !important;
        flex: none !important;
        height: auto !important;
        max-height: none !important;
    }

    /* Nur bei offenem Drawer: Hauptinhalt nicht bedienbar */
    #app-screen.mobile-sidebar-open > main.mdl-main-content {
        overflow: hidden !important;
        pointer-events: none;
    }

    #app-screen:not(.mobile-sidebar-open) > main.mdl-main-content {
        pointer-events: auto;
    }

    /* Festes Sandwich-Menü – immer über Inhalt und Overlay */
    #mdl-mobile-menu-fab.mdl-mobile-menu-fab {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: calc(var(--safe-top) + 0.35rem);
        left: calc(var(--safe-left) + 0.35rem);
        z-index: 10050;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.5rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
        padding: 0;
        pointer-events: auto;
        touch-action: manipulation;
    }

    #mdl-mobile-menu-fab:active {
        background: #f1f5f9;
    }

    /* Doppelte Menü-/Logout-Buttons in Views – kein Leerraum mehr */
    #app-screen > main button[onclick*="toggleMobileSidebar"]:not(#mdl-mobile-menu-fab),
    #app-screen > main button[onclick="logout()"].lg\:hidden {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: none !important;
    }

    #sidebar {
        width: min(88vw, 300px) !important;
        max-width: 300px;
        padding-bottom: var(--safe-bottom);
        z-index: 10002;
        max-height: var(--app-height);
    }

    .sidebar-overlay {
        left: var(--mdl-sidebar-width, min(88vw, 300px)) !important;
        right: 0 !important;
        width: auto !important;
        top: 0;
        bottom: 0;
        z-index: 10001;
    }

    .sidebar-overlay.hidden {
        display: none !important;
        pointer-events: none !important;
    }

    #client-selector-container .relative {
        z-index: 1;
    }

    #client-dropdown-list:not(.hidden) {
        z-index: 10003;
        box-sizing: border-box;
    }

    .toolbar.mdl-toolbar-scroll {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 0.35rem !important;
    }

    .toolbar.mdl-toolbar-scroll > * {
        flex-shrink: 0;
    }

    .mdl-filter-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        max-width: 100%;
        padding-bottom: 0.25rem;
        scrollbar-width: thin;
    }

    .mdl-filter-scroll > * {
        flex-shrink: 0;
    }

    .toolbar button,
    .toolbar label,
    .mdl-filter-scroll button,
    .mdl-filter-scroll label {
        min-width: unset;
        min-height: 36px;
    }

    aside nav button {
        min-height: 44px;
    }

    .mdl-table-scroll,
    #table-container-std,
    #view-eu .overflow-auto,
    #rules-view-content .overflow-y-auto,
    .view-section .overflow-auto,
    main.mdl-main-content #tab-reports-op:not(.hidden) .flex-1.overflow-auto,
    main.mdl-main-content #tab-reports-journal:not(.hidden) .flex-1.overflow-auto {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        touch-action: pan-x pan-y;
    }

    #table-std-el,
    #view-eu table,
    main.mdl-main-content #tab-reports-op:not(.hidden) table,
    main.mdl-main-content #tab-reports-journal:not(.hidden) table {
        min-width: 640px;
    }

    #view-standard > .flex.gap-4.flex-1 {
        flex-direction: column !important;
    }

    /* Tabelle: nur horizontal wischen; vertikal scrollt die Seite (main) */
    #table-container-std {
        flex: none !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    #preview-std:not(.hidden) {
        flex: 0 0 auto;
        min-height: 140px;
        max-height: none !important;
        width: 100% !important;
    }

    /* ===== Modals: scrollbarer Host (schlägt Tailwind h-[95vh] / overflow-hidden) ===== */

    body.mdl-modal-body-locked {
        overflow: hidden !important;
    }

    body.mdl-modal-body-locked #mdl-mobile-menu-fab,
    body.mdl-modal-body-locked #sidebar-overlay {
        display: none !important;
        pointer-events: none !important;
    }

    /* Overlay scrollt NICHT (sonst iOS: keine Button-Taps) – nur der weiße Kasten */
    .mdl-modal-scroll-host,
    body > #datev-export-modal,
    body > #datev-settings-modal,
    [id^="modal-"].fixed.inset-0:not(.hidden),
    .mdl-modal-overlay:not(.hidden) {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        overflow: hidden !important;
        touch-action: auto !important;
        pointer-events: auto !important;
        overscroll-behavior: contain;
        z-index: 10060 !important;
        padding: calc(var(--mdl-mobile-topbar) + var(--safe-top) + 0.25rem) 0.5rem calc(var(--safe-bottom) + 0.5rem) !important;
        background: rgba(15, 23, 42, 0.55) !important;
    }

    .mdl-modal-scroll-host > .mdl-modal-panel,
    .mdl-modal-scroll-host > div,
    body > #datev-export-modal > div,
    body > #datev-settings-modal > div,
    [id^="modal-"].fixed.inset-0:not(.hidden) > .mdl-modal-panel,
    [id^="modal-"].fixed.inset-0:not(.hidden) > div,
    .mdl-modal-overlay:not(.hidden) > .mdl-modal-panel,
    .mdl-modal-overlay:not(.hidden) > div {
        display: flex !important;
        flex-direction: column !important;
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        height: auto !important;
        max-height: calc(var(--app-height) - var(--mdl-mobile-topbar) - var(--safe-top) - var(--safe-bottom) - 1.25rem) !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: auto !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 2 !important;
        flex: none !important;
        background: #fff;
    }

    .mdl-modal-scroll-host .mdl-modal-flow-child {
        overflow: visible !important;
        max-height: none !important;
    }

    .mdl-modal-scroll-host [class*="max-h-["],
    .mdl-modal-scroll-host [class*="h-[95vh]"],
    .mdl-modal-scroll-host [class*="h-[80vh]"],
    .mdl-modal-scroll-host [class*="h-[90vh]"] {
        height: auto !important;
        max-height: none !important;
    }

    .mdl-modal-scroll-host button,
    .mdl-modal-scroll-host a,
    .mdl-modal-scroll-host input,
    .mdl-modal-scroll-host select,
    .mdl-modal-scroll-host textarea,
    .mdl-modal-scroll-host label,
    [id^="modal-"].fixed.inset-0:not(.hidden) button,
    [id^="modal-"].fixed.inset-0:not(.hidden) a,
    [id^="modal-"].fixed.inset-0:not(.hidden) input,
    [id^="modal-"].fixed.inset-0:not(.hidden) select,
    [id^="modal-"].fixed.inset-0:not(.hidden) textarea,
    #datev-export-modal button,
    #datev-export-modal input,
    #datev-export-modal label {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        cursor: pointer;
    }

    body > div.fixed.inset-0.hidden,
    [id^="modal-"].fixed.inset-0.hidden {
        display: none !important;
    }

    /* Detailansicht Buchung */
    #modal-edit-booking:not(.hidden) > div,
    #stack-edit-modal:not(.hidden) > div {
        display: flex !important;
        flex-direction: column !important;
    }

    #modal-edit-booking:not(.hidden) > div > .flex.justify-between.items-center,
    #stack-edit-modal:not(.hidden) > div > .flex.justify-between.items-center {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        padding: 0.65rem 0.75rem !important;
    }

    #modal-edit-booking:not(.hidden) > div > .flex.justify-between h3,
    #stack-edit-modal:not(.hidden) > div > .flex.justify-between h3 {
        font-size: 1rem !important;
    }

    #modal-edit-booking:not(.hidden) .flex.flex-1.overflow-hidden,
    #stack-edit-modal:not(.hidden) .flex.flex-1.overflow-hidden {
        display: block !important;
        overflow: visible !important;
        flex: none !important;
        height: auto !important;
    }

    /* Detailansicht: PDF aus – iframe fängt sonst Touch-Events ab */
    #modal-edit-booking:not(.hidden) .w-2\/5 {
        display: none !important;
    }

    #stack-edit-modal:not(.hidden) .w-2\/5 {
        width: 100% !important;
        height: 36vh !important;
        min-height: 160px !important;
        max-height: 280px !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0;
    }

    #modal-edit-booking:not(.hidden) > .mdl-modal-panel,
    #modal-edit-booking:not(.hidden) > div {
        padding-bottom: calc(4.5rem + var(--safe-bottom)) !important;
    }

    #modal-edit-booking:not(.hidden) .w-3\/5,
    #stack-edit-modal:not(.hidden) .w-3\/5 {
        width: 100% !important;
        min-height: 0 !important;
    }

    /* Speichern/Abbrechen: fest am unteren Bildschirmrand (immer tappbar) */
    #modal-edit-booking:not(.hidden) .mdl-modal-footer-bar,
    #modal-edit-booking:not(.hidden) .w-3\/5 > .absolute.bottom-0,
    #stack-edit-modal:not(.hidden) .w-3\/5 > .absolute.bottom-0,
    #stack-edit-modal:not(.hidden) .absolute.bottom-0.left-0 {
        position: fixed !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
        max-width: calc(100vw - 1rem) !important;
        bottom: calc(var(--safe-bottom) + 0.35rem) !important;
        z-index: 10070 !important;
        background: rgba(248, 250, 252, 0.98) !important;
        padding: 0.65rem 0.75rem calc(0.65rem + var(--safe-bottom)) !important;
        box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.12);
        border-radius: 0.75rem 0.75rem 0 0;
        border: 1px solid #e2e8f0;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    #modal-edit-booking:not(.hidden) .mdl-modal-footer-bar button,
    #modal-edit-booking:not(.hidden) .w-3\/5 > .absolute.bottom-0 button {
        min-height: 2.75rem !important;
        touch-action: manipulation !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent;
    }

    #stack-edit-modal:not(.hidden) .w-3\/5 > .absolute.bottom-0,
    #stack-edit-modal:not(.hidden) .absolute.bottom-0.left-0 {
        position: sticky !important;
        bottom: 0 !important;
        left: auto !important;
        width: 100% !important;
        z-index: 20 !important;
    }

    #modal-edit-booking #booking-tab-content-booking,
    #modal-edit-booking #booking-tab-content-account,
    #modal-edit-booking #booking-tab-content-partner,
    #stack-edit-modal [id^="stack-tab-content-"],
    #stack-edit-modal [id^="booking-tab-content-"] {
        overflow: visible !important;
        flex: none !important;
        height: auto !important;
        max-height: none !important;
        padding-bottom: 0.5rem !important;
    }

    #modal-edit-booking:not(.hidden) .flex.bg-slate-100.rounded-lg,
    #stack-edit-modal:not(.hidden) .flex.bg-slate-100.rounded-lg {
        flex-wrap: wrap !important;
    }

    /* DATEV OP-Import */
    #modal-datev-op-import:not(.hidden) > div {
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
    }

    #modal-datev-op-import:not(.hidden) .flex-1.overflow-auto {
        flex: none !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        max-height: none !important;
        min-height: 120px !important;
    }

    #modal-datev-op-import:not(.hidden) .mt-4.flex.justify-between {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        position: sticky !important;
        bottom: 0 !important;
        background: #fff !important;
        padding-top: 0.5rem !important;
        padding-bottom: var(--safe-bottom) !important;
    }

    /* DATEV Export (dynamisch) + Einstellungen */
    #datev-export-modal > div,
    #datev-settings-modal > div {
        margin-bottom: 2rem !important;
    }

    #datev-export-modal .flex.gap-2.mt-4,
    #datev-settings-modal .space-y-6 {
        padding-bottom: 0.5rem;
    }

    /* Mandant-Modal, Bulk-Edit, Stats … */
    #modal-client:not(.hidden) > div,
    #bulk-edit-modal:not(.hidden) > div,
    #modal-stats:not(.hidden) > div {
        max-height: none !important;
        overflow: visible !important;
    }

    #modal-client:not(.hidden) > div {
        padding: 0.75rem !important;
    }

    /* Bank-/OP-Untermodals mit Panel */
    #modal-bank-bearbeitungsliste-edit:not(.hidden),
    #modal-bank-rule:not(.hidden),
    #modal-bank-booking:not(.hidden),
    #modal-op-zahlung-bearbeiten:not(.hidden) {
        overflow-y: auto !important;
        align-items: flex-start !important;
    }

    [id$="-panel"] {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }

  #modal-inbox:not(.hidden) {
        align-items: flex-start !important;
        overflow-y: auto !important;
        padding: 0.5rem !important;
    }

    #modal-inbox:not(.hidden) > div {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: calc(var(--app-height) - 1rem) !important;
        margin: 0.5rem auto 1.5rem !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #modal-stack:not(.hidden) {
        overflow-y: auto !important;
        align-items: flex-start !important;
    }

    #modal-stack:not(.hidden) > div {
        max-height: none !important;
        height: auto !important;
    }

    .mdl-tabs-scroll {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }

    .mdl-tabs-scroll > * {
        flex-shrink: 0;
    }

    .header-modern {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .header-modern::after {
        width: 40px;
        height: 3px;
        margin-top: 4px;
    }

    th.hide-mobile,
    td.hide-mobile {
        display: none !important;
    }

    #processing-badge {
        bottom: calc(0.75rem + var(--safe-bottom));
        right: 0.75rem;
        transform: scale(0.85);
        transform-origin: bottom right;
    }

    /* ===== Kompaktes Seitenlayout (nur Mobile) – Inhalt oben, Seite scrollt ganz ===== */

    #app-screen > main.mdl-main-content {
        padding-top: calc(var(--mdl-mobile-topbar) + 0.2rem);
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }

    /* View-Padding aus index.html reduzieren */
    #view-standard:not(.hidden),
    main.mdl-main-content [id^="view-"]:not(.hidden),
    main.mdl-main-content .view-section:not(.hidden) {
        padding: 0.35rem 0.25rem 0.75rem !important;
    }

    /* Seitenkopf: keine Platzhalter für versteckte Burger/Logout – Titel links unter FAB */
    main.mdl-main-content [id^="view-"]:not(.hidden) > .mb-2.flex.flex-col,
    main.mdl-main-content [id^="view-"]:not(.hidden) > .mb-4.flex.flex-col,
    main.mdl-main-content .view-section:not(.hidden) > .mb-2.flex.flex-col,
    main.mdl-main-content .view-section:not(.hidden) > .mb-4.flex.flex-col {
        margin-bottom: 0.35rem !important;
        align-items: stretch !important;
    }

    main.mdl-main-content [id^="view-"]:not(.hidden) .flex.items-center.justify-between.w-full,
    main.mdl-main-content .view-section:not(.hidden) .flex.items-center.justify-between.w-full {
        display: block !important;
        padding-left: 2.65rem;
        padding-right: 0.25rem;
        min-height: 0 !important;
    }

    main.mdl-main-content .header-modern {
        margin: 0 !important;
        text-align: left !important;
        font-size: 1rem !important;
        line-height: 1.25 !important;
    }

    main.mdl-main-content .header-modern::after {
        display: none !important;
    }

    /* Buchen: große Scan-Zeile schlank, Dropzone aus */
    #view-standard:not(.hidden) > .sm\:hidden.mb-2 {
        margin-bottom: 0.35rem !important;
    }

    #view-standard:not(.hidden) > .sm\:hidden.mb-2 button {
        flex-direction: row !important;
        justify-content: center;
        padding: 0.45rem 0.65rem !important;
        gap: 0.5rem !important;
    }

    #view-standard:not(.hidden) > .sm\:hidden.mb-2 .fa-camera {
        font-size: 1.1rem !important;
    }

    #view-standard:not(.hidden) > .sm\:hidden.mb-2 p {
        display: none !important;
    }

    #view-standard:not(.hidden) > .mobile-hide-heavy {
        display: none !important;
    }

    /* ER/AR/CASH-Tabs + Toolbar kompakter */
    #view-standard:not(.hidden) .flex.border-b.border-slate-100 button {
        padding: 0.3rem 0.2rem !important;
        font-size: 0.65rem !important;
        gap: 0.2rem !important;
    }

    #view-standard:not(.hidden) .toolbar.mdl-toolbar-scroll {
        padding: 0.35rem !important;
        margin-bottom: 0 !important;
    }

    #view-standard:not(.hidden) > .mb-2.bg-white.rounded-xl,
    #view-standard:not(.hidden) > div.shrink-0.mb-2 {
        margin-bottom: 0.35rem !important;
    }

    /* Bearbeitungsblock: kein vertikaler Innen-Scroll – nur main scrollt */
    #view-standard:not(.hidden) #table-container-std {
        overflow: visible !important;
        max-height: none !important;
        min-height: 0 !important;
        height: auto !important;
        flex: none !important;
    }

    #view-standard:not(.hidden) #table-container-std thead {
        position: sticky !important;
        top: calc(var(--mdl-mobile-topbar) + var(--safe-top));
        z-index: 8;
    }

    #view-standard:not(.hidden) h3.text-xs.font-bold.uppercase {
        margin-bottom: 0.25rem !important;
        font-size: 0.65rem !important;
    }

    #view-standard:not(.hidden) #filter-panel-container {
        margin-bottom: 0.35rem !important;
    }

    /* Reports / Offene Posten: Kopf kompakt */
    main.mdl-main-content #view-reports-v2:not(.hidden) > .mb-6 {
        margin-bottom: 0.4rem !important;
        gap: 0.35rem !important;
        padding-top: 0 !important;
    }

    main.mdl-main-content #view-reports-v2:not(.hidden) #reports-view-title {
        padding-left: 2.65rem;
        width: 100%;
        text-align: left;
        font-size: 1rem !important;
    }

    main.mdl-main-content #tab-reports-op:not(.hidden) > .p-4.border-b,
    main.mdl-main-content #tab-reports-journal:not(.hidden) > .p-4.border-b {
        padding: 0.4rem 0.5rem !important;
    }

    main.mdl-main-content #tab-reports-op:not(.hidden) > .flex-1.overflow-auto,
    main.mdl-main-content #tab-reports-journal:not(.hidden) > .flex-1.overflow-auto {
        overflow: visible !important;
    }

    main.mdl-main-content #tab-reports-op:not(.hidden) thead,
    main.mdl-main-content #tab-reports-journal:not(.hidden) thead {
        position: sticky !important;
        top: calc(var(--mdl-mobile-topbar) + var(--safe-top));
        z-index: 8;
    }
}

/* Querformat: schmalere Sidebar, kompaktere Mindesthöhen */
@media (max-height: 520px) and (max-width: 1024px) {
    :root {
        --mdl-mobile-topbar: 2.35rem;
    }

    #sidebar {
        width: min(42vw, 260px) !important;
        max-width: 260px;
    }

    #table-container-std {
        min-height: 120px;
        max-height: none !important;
    }

    #preview-std:not(.hidden) {
        min-height: 100px;
        max-height: none !important;
    }

    #table-std-el,
    #view-eu table {
        min-width: 520px;
    }
}

@media (max-width: 480px) {
    #table-std-el {
        min-width: 580px;
        font-size: 0.7rem;
    }

    #table-std-el th,
    #table-std-el td {
        padding: 0.35rem 0.25rem !important;
    }

    .toolbar.mdl-toolbar-scroll button span.hidden.sm\:inline {
        display: none !important;
    }
}