/* Mobile clean-up (02.11.2026, Yuriy's iPhone screenshots). Loaded last, phone and small tablet widths only.
   1. Status bar: iOS paints it in the page ground colour (crm-liquid.js also writes it into theme-color). The top bar
      was glass over the coloured gradient with a light line at its top edge, so it stood off from the bar. On the
      phone it is now the same flat ground without that line: status bar and top bar read as one surface. The drawer
      keeps clear of status bar and home indicator should the page ever run under them (env() is 0 otherwise).
   2. Top bar: "Filter & Übersicht" becomes a 44px icon button next to the page title instead of its own row.
   3. E-Mails: folders as a text tab row with labels, "Schreiben" as a floating button.
   4. Pipelines: the toolbar in two clean rows, nothing runs over the right edge. */

@media (max-width: 768px) {
    /* 1. Status bar */
    html.liquid .topbar {
        background: var(--lq-grund) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
        box-shadow: none !important; border-top: 0 !important;
    }
    body #sidebar, body .sidebar {
        top: calc(10px + env(safe-area-inset-top)) !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }

    /* 2. Top bar: filter button in the title row */
    body .topbar { position: sticky !important; }
    body .topbar-left h1 { padding-right: 52px !important; }
    body .topbar-filters { position: absolute !important; top: calc(10px + env(safe-area-inset-top)); right: max(var(--app-gutter), env(safe-area-inset-right)); width: auto !important; z-index: 2; }
    body .topbar-filters summary {
        width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important;
        justify-content: center; font-size: 0 !important; gap: 0 !important;
    }
    body .topbar-filters summary .shell-icon { width: 18px; height: 18px; flex: 0 0 18px; }
    body .topbar-filters .topbar-right {
        position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important; margin-top: 0 !important;
        width: calc(100vw - 2 * var(--app-gutter)) !important; max-height: 70vh; overflow-y: auto;
        box-shadow: 0 12px 40px rgba(0, 0, 0, .25) !important;
    }
    html.liquid body .topbar-filters .topbar-right { background: var(--lq-pop, var(--card)) !important; border-color: var(--lq-kante, var(--border)) !important; }
}

/* 3. E-Mails (crm-mails.css switches to one column at 820px) */
@media (max-width: 820px) {
    #view-mails .pfm-ordner {
        gap: 0; padding: 0 max(var(--app-gutter, 12px), env(safe-area-inset-left)); min-height: 46px; align-items: stretch;
        background: transparent !important; border-bottom: 1px solid var(--pfm-linie);
    }
    #view-mails .pfm-ordner-liste { gap: 4px; align-items: stretch; }
    #view-mails .pfm-ordner [data-ordner] {
        position: relative; width: auto; height: auto; padding: 0 10px; gap: 6px; border-radius: 0;
        color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap; background: transparent !important;
    }
    #view-mails .pfm-ordner [data-ordner]:first-child { padding-left: 0; }
    #view-mails .pfm-ordner [data-ordner] .pfm-i { display: none; }
    #view-mails .pfm-ordner .pfm-ordner-name { display: inline; flex: 0 0 auto; overflow: visible; }
    #view-mails .pfm-ordner [data-ordner][aria-current="true"] { color: var(--text); font-weight: 600; }
    #view-mails .pfm-ordner [data-ordner][aria-current="true"]::after {
        content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--primary);
    }
    #view-mails .pfm-ordner [data-ordner]:first-child[aria-current="true"]::after { left: 0; }
    #view-mails .pfm-ordner .pfm-zahl { position: static; font-size: 12px; font-weight: 500; color: var(--muted); }
    #view-mails .pfm-ordner .pfm-zahl:empty { display: none; }
    /* "Schreiben": floating button, the id selector in crm-mails.css (all:unset) had cancelled position:fixed */
    :is(#view-mails, body) .pfm-neu {
        position: fixed; z-index: 50; right: max(16px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom));
        width: auto; height: 52px; margin: 0; padding: 0 20px 0 18px; gap: 8px; border-radius: 14px; justify-content: center;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
    }
    :is(#view-mails, body) .pfm-neu span { display: inline; }
    :is(#view-mails, body) .pfm.pfm-offen .pfm-neu { display: none; }
}

/* 4. Pipelines toolbar (pipelines.js pfNavZeichnen) */
@media (max-width: 767px) {
    .pf-navzeile { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
    .pf-navzeile > .pf-segmente { grid-column: 1 / -1; }
    #pf-leiste { padding-left: 0 !important; padding-right: 0 !important; }
    .pf-navzeile > .pf-ddknopf { min-width: 0; height: 44px; min-height: 44px; justify-content: flex-start; }
    .pf-navzeile > .pf-ddknopf .fa-chevron-down { margin-left: auto; }
    .pf-navzeile > .pf-ddknopf:only-of-type { grid-column: 1 / -1; }
    .pf-navzeile .pf-navrechts { grid-column: 1 / -1; display: flex !important; width: 100%; gap: 8px; margin: 0; }
    .pf-navrechts > * { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
    .pf-navrechts .pf-btn-primaer { order: -1; flex: 1 1 auto; width: auto; padding: 0 14px; gap: 8px; }
    .pf-navrechts .pf-iconbtn { width: 44px; height: 44px; }
    /* Icon-only on the phone, the label stays for screen readers through title/aria-label */
    .pf-navrechts .pf-abgeschlossen, .pf-navrechts #pf-dd-filter { font-size: 0 !important; gap: 0; position: relative; }
    .pf-navrechts .pf-abgeschlossen i, .pf-navrechts #pf-dd-filter i { font-size: 15px !important; }
    .pf-navrechts #pf-dd-filter .pf-ddzahl { position: absolute; top: 4px; right: 4px; font-size: 10px; }
}

/* 5. Top bar without its own bar (Yuriy 02.11.2026: "die Leiste im Hintergrund ist unnötig"). Title, search and the
   theme button stand directly on the page background, without a surface, blur or lines. On the desktop the bar no
   longer sticks, so no content scrolls behind transparent controls; on the phone it stays fixed in the flat ground
   colour (status bar match, section 1), now also without the line underneath. */
html.liquid .topbar {
    background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border: 0 !important; box-shadow: none !important;
}
@media (min-width: 769px) {
    html.liquid body .topbar { position: relative !important; top: auto !important; }
}
@media (max-width: 768px) {
    html.liquid body .topbar { background: var(--lq-grund) !important; }
}

/* 6. Sidebar foot (Yuriy 02.11.2026, dark mode): no box behind the profile picture and no line above it. The pop-up
   fill from crm-liquid.css also caught the <details> account menu itself; only its opened menu keeps a surface. */
html.liquid #sidebar .account-menu { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html.liquid #sidebar .sidebar-account { border-top: 0 !important; }
html.liquid #sidebar .account-menu .account-avatar { border: 0 !important; }