/* ═══ 22. MOBILE FIXED LAYOUT ═══ */

/* ═══════════════════════════════════════════════════════════════════
   Mobile Fixed Layout  (≤768px)
   ═══════════════════════════════════════════════════════════════════ */

#mob-dash          { display: none; }
#mob-transactions  { display: none; }
#page-mob-details  { display: none; }
.nav-item-details  { display: none; }

@media (max-width: 768px) {
    /* UX-028: Onboarding-Ghost-Preview — span-Werte ignorieren, volle Breite erzwingen */
    .ob-preview-wrap .widget-card { grid-column: 1 / -1 !important; }

    #page-dashboard #dashboardGrid { display: none !important; }
    #page-dashboard .page-header   { display: none !important; }

    #mob-dash {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 12px 0 24px;
    }

    /* Mobile Topbar: Filter + Transaktion-Button in einer Zeile */
    .mob-topbar-right { display: flex; align-items: center; gap: 6px; }
    .mob-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    .mob-filter-group { gap: 4px; }
    /* Kompakte Filter-Buttons — gleiche Höhe wie btn-primary */
    .mob-filter-group .asset-filter-btn {
        padding: 9px 10px;
        font-size: 13px;
        border-radius: 8px;
    }

    /* mob-dash-toolbar: Flex-Row statt volle Breite */
    .mob-dash-toolbar {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    /* Value Card */
    .mob-value-card {
        background: var(--surface);
        border-radius: 12px;
        border: 1px solid var(--border);
        overflow: hidden;
    }
    #mob-value {
        padding: 12px 8px;
    }
    .mob-total-value {
        font-size: 30px;
        font-weight: 700;
        font-family: var(--font-mono);
        color: var(--text);
        line-height: 1.1;
        letter-spacing: -0.5px;
    }
    .mob-pl-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
    }
    .mob-pl-amt { font-size: 14px; font-weight: 600; font-family: var(--font-mono); }
    .mob-pl-amt.positive { color: var(--green); }
    .mob-pl-amt.negative { color: var(--red); }
    .mob-pl-pct { font-size: 12px; font-weight: 700; font-family: var(--font-mono); padding: 2px 8px; border-radius: 6px; }
    .mob-pl-pct.positive { background: var(--green-bg); color: var(--green); }
    .mob-pl-pct.negative { background: var(--red-bg);   color: var(--red); }
    .mob-meta { font-size: 11px; color: var(--text-secondary); margin-top: 8px; }

    /* Chart Card */
    .mob-chart-card {
        background: var(--surface);
        border-radius: 12px;
        border: 1px solid var(--border);
        overflow: hidden;
    }
    #mob-chart-area { display: block; width: 100%; height: 240px; overflow: hidden; flex-shrink: 0; position: relative; }
    #mob-chart-area svg { display: block; width: 100%; height: 100%; }
    #mob-chart-area .loading-placeholder {
        height: 100%; display: flex; align-items: center; justify-content: center;
        font-size: 12px; color: var(--text-secondary);
    }
    .mob-chart-ranges {
        display: flex;
        justify-content: space-around;
        padding: 8px 8px 10px;
        border-top: 1px solid var(--border);
    }
    .mob-range-btn {
        background: none; border: none;
        padding: 5px 8px; font-size: 11px; font-weight: 600;
        font-family: var(--font-mono); color: var(--text-secondary);
        cursor: pointer; border-radius: 6px; min-width: 36px; text-align: center;
        transition: color 0.15s, background 0.15s;
    }
    .mob-range-btn:hover { color: var(--text); }
    .mob-range-btn.active { color: var(--accent); background: var(--accent-bg); }

    /* Shared card header (all 3 mobile cards) */
    .mob-card-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 10px 8px; border-bottom: 1px solid var(--border);
    }
    .mob-card-title-group { display: flex; align-items: center; gap: 4px; }
    .mob-card-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); }
    .mob-card-header .wgt-info-btn { width: 20px; height: 20px; font-size: 11px; }
    .mob-holdings-count { font-size: 11px; color: var(--text-secondary); }

    /* Header-Buttons Gruppe (Gesamtwert-Karte) */
    .mob-header-btns {
        display: flex; align-items: center; gap: 2px;
    }
    .mob-hdr-btn {
        width: 24px; height: 24px; padding: 0;
        display: flex; align-items: center; justify-content: center;
        border-radius: 6px; background: none; border: none; cursor: pointer;
        color: var(--text-secondary); opacity: 0.55;
        transition: opacity 0.15s, color 0.15s, background 0.15s;
    }
    .mob-hdr-btn:hover { opacity: 1; color: var(--text); background: var(--surface-hover); }

    /* + Transaktion Toolbar — gleich in Dashboard und Transactions */
    .mob-dash-toolbar { padding: 0 0 4px; }

    /* Holdings Card */
    .mob-holdings-card { background: var(--surface); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }
    .mob-holdings-list { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .mob-holding-row {
        display: grid;
        grid-template-columns: 36px 1fr auto;
        gap: 8px; align-items: center;
        padding: 10px 8px;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        border-bottom: 1px solid var(--border);
        cursor: pointer; transition: background 0.1s;
    }
    .mob-holding-row:last-child { border-bottom: none; }
    .mob-holding-row:active { background: var(--surface-hover); }
    .mob-h-icon { width: 36px; height: 36px; flex-shrink: 0; }
    .mob-h-icon img, .mob-h-icon-fb {
        width: 36px; height: 36px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 11px; font-weight: 700;
    }
    .mob-h-icon img { object-fit: contain; background: #fff; }
    .mob-h-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow: hidden; }
    .mob-h-sym  { font-size: 13px; font-weight: 600; color: var(--text); }
    .mob-h-full { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Right column: value + cost + G/V% stacked */
    .mob-h-right { display: flex; flex-direction: column; gap: 0; align-items: flex-end; }
    .mob-h-value { font-size: 12px; font-family: var(--font-mono); color: var(--text); white-space: nowrap; line-height: 1.2; }
    .mob-h-cost  { font-size: 10px; font-family: var(--font-mono); color: var(--text-secondary); white-space: nowrap; line-height: 1.2; }
    .mob-h-pl    { font-size: 12px; font-family: var(--font-mono); font-weight: 600; text-align: right; white-space: nowrap; line-height: 1.3; margin-top: 1px; }
    /* Amount sub-line inside name column */
    .mob-h-sub   { font-size: 10px; font-family: var(--font-mono); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mob-h-x     { font-size: 10px; color: var(--text-secondary); margin: 0 1px; }
    .mob-h-pl.positive { color: var(--green); }
    .mob-h-pl.negative { color: var(--red); }
    .mob-holdings-card .holdings-pagination { padding: 8px 12px; border-top: 1px solid var(--border); }
    /* Chart header: title left, updated-tag + info-btn right */
    .mob-chart-header-right { display: flex; align-items: center; gap: 6px; }
    .mob-updated-tag { font-size: 10px; color: var(--text-secondary); font-family: var(--font-mono); white-space: nowrap; }
    /* Crosshair tooltip */
    .mob-cx-tip {
        position: absolute; top: 4px;
        background: var(--surface); border: 1px solid var(--border);
        border-radius: 6px; padding: 2px 8px;
        font-size: 11px; font-family: var(--font-mono); color: var(--text);
        pointer-events: none; white-space: nowrap; opacity: 0;
        transition: opacity 0.1s; z-index: 10;
    }
    .mob-cx-tip--buy  { color: var(--green); border-color: var(--green); }
    .mob-cx-tip--sell { color: var(--red);   border-color: var(--red); }

    /* Details Page */
    .mob-details-list { display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 24px; }
    .mob-detail-card { background: var(--surface); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }
    /* Header reuses .widget-header — hide drag handle, remove button */
    .mob-detail-header .widget-drag-handle { display: none; }
    .mob-detail-header .widget-remove      { display: none; }
    .mob-detail-card-body { min-height: 60px; overflow: visible; }

    /* ── Admin Mobile ───────────────────────────────────────── */
    /* User list: collapse 6-col grid to card-like flex rows */
    #page-admin .admin-table { overflow-x: visible; }
    #page-admin .admin-table-head { display: none; }
    #page-admin .admin-table-row {
        display: flex; flex-wrap: wrap; align-items: center;
        min-width: 0; gap: 4px 8px; padding: 12px 16px;
    }
    #page-admin .admin-user-info { flex: 1 1 auto; min-width: 0; }
    #page-admin .admin-cell-badge { flex: 0 0 auto; }
    /* hide MFA cols (4th + 5th badge spans) */
    #page-admin .admin-table-row > span.admin-cell-badge:nth-child(4),
    #page-admin .admin-table-row > span.admin-cell-badge:nth-child(5) { display: none; }
    #page-admin .admin-cell-actions { flex: 0 0 auto; margin-left: auto; }

    /* Coin mappings: hide Name column, tighten grid */
    .coin-map-list .coin-map-row {
        grid-template-columns: 52px minmax(0, 1fr) 68px 56px;
    }
    .coin-map-list .coin-map-row > span:nth-child(3) { display: none; }
    .coin-map-list-header .coin-map-row > span:nth-child(3) { display: none; }

    /* Admin page header stays visible, stacks on very small screens */
    #page-admin .page-header { flex-wrap: wrap; gap: 8px; }

    /* SMTP form: stack side-by-side fields */
    #page-admin .form-row { flex-direction: column; }

    /* ── Transactions Page Mobile ──────────────────────────────────── */
    /* GridStack ausblenden, eigenen Mobile-Container zeigen */
    #page-transactions #transactionsGrid { display: none !important; }
    #mob-transactions {
        display: block;
        padding: 0 0 24px;
    }
    #mob-transactions > .mob-topbar {
        margin-bottom: 12px;
        padding-top: 12px;
    }
    /* Transactions Mobile: page-header komplett ausblenden — mob-topbar in #mob-transactions ersetzt es */
    #page-transactions .page-header { display: none !important; }

    /* Filter Mobile: Rows werden echte Flex-Zeilen, linksbündig */
    .tx-filter-bar  { flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 10px; }
    .tx-filter-row1 { display: flex; align-items: center; gap: 6px; }
    .tx-filter-row1 .tx-filter-select { flex: 1; min-width: 0; max-width: none; }
    .tx-filter-row1 .tx-filter-clear  { display: none; } /* Auf Mobile in row2 als .tx-filter-reset-mob */
    .tx-filter-row2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
    /* Kauf/Verkauf btn-group: kein internes Wrap auf Mobile */
    .tx-filter-row2 .btn-group { flex-wrap: nowrap; flex-shrink: 0; }
    .tx-filter-row2 .btn-sm    { padding: 7px 8px; font-size: 11px; }
    /* Zeitraum + Reset: neben den Buttons */
    .tx-preset-select { display: block; margin-left: auto; flex: 1 1 auto; min-width: 90px; max-width: none; font-size: 11px; }
    .tx-filter-reset-mob { display: inline-flex; flex-shrink: 0; padding: 6px 8px; }
    /* Datumsfelder: eigene Zeile bei Benutzerdefiniert */
    .tx-filter-row2 .tx-date-range { flex-basis: 100%; }
    .tx-filter-row2 .tx-date-input { flex: 1; width: auto; min-width: 0; font-size: 12px; height: 30px; padding: 4px 6px; }
    .tx-preset-btns   { display: none; }

    /* Coin-Chart Card auf Mobile */
    .card-header--col { flex-direction: column; align-items: flex-start; gap: 8px; }
    .card-header--col .tx-filter-select { width: 100%; }
    .chart-container--mob { height: 240px; }
    /* Preis-Leiste über dem Chart */
    .coin-chart-price-bar {
        display: flex; justify-content: space-between; align-items: center;
        padding: 4px 6px 2px; font-size: 10px; font-family: var(--font-mono);
        color: var(--text-secondary);
    }
    .ccpb-item { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
    .ccpb-mid  { color: var(--text-secondary); opacity: 0.7; }
    .ccpb-lbl  { font-size: 9px; text-transform: uppercase; letter-spacing: 0.3px; opacity: 0.6; }

    /* TX-Liste: kompaktere Zeilen — min-width:0 überschreibt das 620px-Minimum */
    .tx-list-row { padding: 5px 0; font-size: 11px; gap: 4px; min-width: 0; }
    .tx-list { overflow-x: hidden; margin: 0; padding: 0; }
    /* Header-Labels nicht umbrechen */
    .tx-col-sortable, .tx-sort-header span { white-space: nowrap; overflow: hidden; }

    /* Merged Asset+Menge Zelle auf Mobile */
    .tx-asset-amt-cell { flex-direction: column; align-items: flex-start; gap: 0; }
    .tx-merged-amt { display: block; font-size: 10px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    /* Kleineres Icon + engerer Gap im Asset-Select auf Mobile */
    .tx-asset-icon, .tx-asset-icon-fallback { width: 14px !important; height: 14px !important; }
    .tx-asset-icon-fallback { font-size: 6px !important; }
    .tx-asset-select { gap: 4px; }

    /* Edit/Delete vertikal gestapelt auf Mobile */
    .tx-actions { flex-direction: column; gap: 0; justify-content: center; }
    .tx-edit, .tx-delete { padding: 1px 3px; }

    /* + Transaktion: volle Breite auf Mobile (Dashboard-Toolbar + TX-Header) */
    .mob-tx-add-btn { width: 100%; justify-content: center; }

    /* TX-Liste Card auf Mobile */
    .mob-tx-card {
        overflow: hidden;
        margin-top: 12px;
        padding: 0;
    }
    .mob-tx-card > * {
        margin-left: 6px;
        margin-right: 6px;
    }
    .mob-tx-card .tx-filter-bar {
        padding: 8px 0;
        margin-bottom: 0;
        min-width: 0;
    }
    .mob-tx-card .tx-list-header { padding: 0; }
    .mob-tx-card .tx-list-row    {
        padding: 4px 0;
        align-items: start;
        min-width: 0;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
    /* G/V-Spalte auf Mobile: kein Zeilenumbruch innerhalb der Werte (+€1.223,54) */
    .mob-tx-card .tx-list-row .mono { white-space: nowrap; }
    .mob-tx-card .tx-list-row .gv-label { white-space: nowrap; }
    .mob-tx-card .tx-pagination  { padding: 6px 0; }

    /* Coin-Detail Cards auf Mobile: einheitliche Seitenabstände + Lücken */
    #mob-transactionsList .card { padding-left: 8px; padding-right: 8px; margin-bottom: 12px; }
    #mob-transactionsList .card.coin-stats-header { padding: 12px 8px; }
    #mob-transactionsList .card.mob-tx-card { padding: 0; } /* TX-Card nutzt child margins statt padding */

    /* Top Performer stat-label: kein Umbruch des Pfeils */
    #mob-transactionsList .stat-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: 0;
    }

}

/* Sehr schmale Geräte: Filter und neue Transaktion untereinander statt überzulaufen */
@media (max-width: 360px) {
    #mob-transactions > .mob-topbar { flex-wrap: wrap; }
    #mob-transactions > .mob-topbar .mob-topbar-right {
        flex: 1 0 100%;
        width: 100%;
        justify-content: stretch;
    }
    #mob-transactions > .mob-topbar .mob-topbar-right .btn-primary {
        flex: 1;
        width: 100%;
        justify-content: center;
    }

    /* Lange Eurobeträge dürfen die zweite Stat-Spalte nicht verbreitern. */
    #mob-transactionsList .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #mob-transactionsList .stats-grid .stat-box,
    #mob-transactionsList .stats-grid .stat-value {
        min-width: 0;
    }
    #mob-transactionsList .stats-grid .stat-value > span {
        max-width: 100%;
        flex-wrap: wrap;
    }
    #mob-transactionsList .stats-grid .stat-value > span .fw-500 {
        white-space: nowrap;
    }
}