/* =============================================================
   MOBILE-OPTIMIERUNG — Siqment
   =============================================================
   WICHTIG / DESKTOP-GARANTIE:
   Diese Datei enthält AUSSCHLIESSLICH Regeln, die entweder
     (a) innerhalb von @media (max-width: 1024px) stehen, oder
     (b) neue, nur für Mobile gedachte Elemente auf Desktop
         per display:none verstecken.
   Es wird keine einzige bestehende Desktop-Regel überschrieben.
   Ab 1025px Breite verhält sich die App exakt wie vorher.

   Der Breakpoint 1024px ist bewusst gewählt: ab dieser Breite
   schiebt die bestehende Regel in style.css die Sidebar aus dem
   Bild (translateX(-100%)). Genau dort muss der Menü-Button
   erscheinen, sonst gibt es gar keine Navigation mehr.
   ============================================================= */

/* -------------------------------------------------------------
   1) Neue Mobile-Elemente: auf Desktop unsichtbar
   ------------------------------------------------------------- */
.mobile-nav-toggle,
.mobile-nav-overlay {
    display: none;
}

/* =============================================================
   AB HIER: ausschließlich Mobile / schmale Viewports
   ============================================================= */
@media (max-width: 1024px) {

    /* ---------------------------------------------------------
       PAKET 1 — Navigation (der eigentliche Blocker)
       Die Sidebar ist hier bereits aus dem Bild geschoben; wir
       liefern den Button, der sie wieder hereinholt.
       --------------------------------------------------------- */
    .mobile-nav-toggle {
        display: flex;
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 1200; /* über der Sidebar (1000) */
        width: 44px;   /* Apple HIG: min. 44px Touch-Target */
        height: 44px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0;
        border: 1px solid var(--border, #e5e7eb);
        border-radius: 10px;
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-nav-toggle span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: var(--gray-700, #374151);
        transition: transform 0.25s ease, opacity 0.2s ease;
    }

    /* Burger wird zum X, solange das Menü offen ist */
    .mobile-nav-toggle.is-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .mobile-nav-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }
    .mobile-nav-toggle.is-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .mobile-nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1050; /* über dem Seiteninhalt (z-index 1000), unter der Sidebar */
        background: rgba(15, 23, 42, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    /* Der Seiteninhalt arbeitet mit z-index: 1000 (Container, Karten,
       Header). Die Sidebar muss im Drawer darüber liegen, sonst
       scheint der Inhalt durch. */
    .sidebar {
        z-index: 1100;
    }

    .mobile-nav-overlay.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* Die Sidebar darf im Drawer nie "collapsed" sein — sonst
       stünden dort nur 60px Icons ohne Beschriftung. */
    .sidebar.collapsed {
        width: 260px;
    }
    .sidebar.collapsed .nav a span:not(.icon),
    .sidebar.collapsed .user-details,
    .sidebar.collapsed .logo-text,
    .sidebar.collapsed .logo-text-wrapper {
        display: initial;
    }
    .sidebar.collapsed .user-details {
        display: block;
    }

    /* Der Collapse-Button der Sidebar ergibt im Drawer keinen Sinn */
    .sidebar-toggle {
        display: none !important;
    }

    /* Platz für den Burger-Button schaffen, damit er keine
       Überschrift überdeckt */
    .page-header,
    .page-header-with-actions,
    .page-header-content,
    .main-header,
    .spaces-editor-title-container {
        padding-left: 60px;
    }

    /* Lange Report-Titel dürfen nicht unter dem Button kleben */
    .spaces-editor-title {
        font-size: 24px;
        line-height: 1.25;
        word-break: break-word;
    }

    /* ---------------------------------------------------------
       PAKET 2 — Quick-Wins
       --------------------------------------------------------- */

    /* Login: Logo füllte die Karte bis an den Rand */
    .login-container .login-logo-icon,
    .login-header .login-logo-icon {
        max-width: 240px;
        height: auto;
    }

    .login-container .login-logo {
        justify-content: center;
        max-width: 100%;
    }

    /* Reporting: Block-Kopf und Toolbar überlappten sich */
    .model-table-block-header,
    .editor-block-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .model-table-block-header > *,
    .editor-block-header > * {
        min-width: 0;
    }

    /* Datenquellen-Liste (CSS-Grid, keine echte <table>):
       Auf dem Handy wird jede Zeile zu einer Karte mit "Label: Wert".
       Die Kopfzeile entfällt, weil die Labels in den Zeilen stehen. */
    .tables-list .table-list-header {
        display: none;
    }

    .tables-list .table-list-row {
        display: block;
        margin-bottom: 12px;
        padding: 12px 14px;
        border: 1px solid var(--border, #e5e7eb);
        border-radius: 12px;
        background: #ffffff;
    }

    .tables-list .table-list-row .table-list-cell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        padding: 7px 0;
        text-align: right;
    }

    /* Erste Zelle (Tabellenname) ist die Karten-Überschrift */
    .tables-list .table-list-row .table-list-cell:first-child {
        margin-bottom: 4px;
        padding-top: 0;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border, #e5e7eb);
        font-weight: 600;
        text-align: left;
    }

    /* data-label wird zur Laufzeit gesetzt (src/utils/mobileNav.js) */
    .tables-list .table-list-row .table-list-cell[data-label]:not(:first-child)::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: 11px;
        font-weight: 600;
        color: var(--gray-500, #6b7280);
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    /* Aktions-Zelle: Buttons nebeneinander, gut treffbar */
    .tables-list .table-list-row .table-list-cell:last-child {
        justify-content: flex-end;
        padding-top: 10px;
    }

    /* Buttons/Aktionsleisten: volle Breite statt Umbruch-Chaos */
    .table-actions,
    .upload-actions,
    .page-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    .table-actions .btn,
    .page-actions .btn {
        flex: 1 1 auto;
        min-height: 44px;
    }

    /* ---------------------------------------------------------
       PAKET 3 — Berechnungen & breite Tabellen
       --------------------------------------------------------- */

    /* Berechnungen: Die Bezeichnungsspalte ist auf Desktop ~500px breit
       und würde auf dem Handy den kompletten Bildschirm füllen — dann
       wären die Monatswerte nie sichtbar, egal wie weit man scrollt.
       Auf Mobile begrenzen wir sie, damit Werte danebenpassen.
       (Die Spalte ist bereits position:sticky, bleibt also stehen.) */
    .models-table th.col-designation,
    .models-table td:first-child {
        max-width: 168px;
        min-width: 168px;
        width: 168px;
    }

    .models-table td:first-child .variable-name-cell,
    .models-table th.col-designation {
        overflow: hidden;
        font-size: 13px;
        line-height: 1.3;
        text-overflow: ellipsis;
    }

    /* Die Aktions-Icons (Kategorien / Formel / Löschen) fressen auf dem
       Handy den Platz für den Variablennamen und sind mit dem Finger
       kaum zu treffen. Sie bleiben im DOM (Funktion unverändert), sind
       aber in der schmalen Ansicht ausgeblendet — Bearbeiten erfolgt
       am Desktop. */
    .models-table td:first-child .btn-icon.add-category-btn,
    .models-table td:first-child .btn-icon.edit-formula-btn,
    .models-table td:first-child .btn-icon.delete-variable-btn {
        display: none;
    }

    /* "Sektion hinzufügen" überlagerte die Spaltenüberschrift */
    .models-table th.col-designation .add-section-btn,
    .models-table th.col-designation button {
        display: none;
    }

    /* Sticky-Spalte braucht einen deckenden Hintergrund, sonst
       scheinen die durchlaufenden Werte darunter durch. */
    .models-table th.col-designation,
    .models-table td:first-child {
        background: #ffffff;
        box-shadow: 1px 0 0 var(--border, #e5e7eb);
    }

    /* Monatsspalten kompakter, damit mehrere gleichzeitig sichtbar sind */
    .models-table th:not(.col-designation),
    .models-table td:not(:first-child) {
        min-width: 78px;
        padding-right: 8px;
        padding-left: 8px;
        font-size: 13px;
    }

    /* Weitere waagerecht scrollbare Tabellen (Reporting-Blöcke) */
    .model-table th:first-child,
    .model-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #ffffff;
        box-shadow: 1px 0 0 var(--border, #e5e7eb);
    }

    /* Sanftes Scrollen auf Touch-Geräten */
    .table-scroll-container,
    .model-table-wrapper,
    .models-table-wrapper {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    /* Modals als Vollbild — auf kleinen Screens sind zentrierte
       Dialoge mit fester Breite unbedienbar. */
    .modal-content,
    .modal-container,
    .category-modal,
    .formula-modal {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .modal-footer,
    .modal-actions {
        position: sticky;
        bottom: 0;
        z-index: 3;
        gap: 8px;
        padding: 12px;
        border-top: 1px solid var(--border, #e5e7eb);
        background: #ffffff;
    }
    .modal-footer .btn,
    .modal-actions .btn {
        flex: 1 1 auto;
        min-height: 44px;
    }

    /* Touch-Targets generell auf Mindestgröße bringen */
    .nav-link {
        min-height: 48px;
    }
}

/* -------------------------------------------------------------
   Sehr schmale Geräte (iPhone SE & Co.)
   ------------------------------------------------------------- */
@media (max-width: 420px) {
    .page-header h1,
    .page-title {
        font-size: 22px;
        line-height: 1.25;
    }

    .page-content {
        padding: 12px;
    }
}