/* ============================================================
   XRechnungen – Responsive: all @media breakpoints
   ============================================================ */

/* ── Tablet (≤ 900px) ────────────────────────────────────── */
@media (max-width: 900px) {
    .topbar-controls .font-sz-ctrl { display: none; }
    .summary { grid-template-columns: 1fr 1fr; }
    .interval-btn { padding: 9px 20px; font-size: .9rem; min-height: 44px; }
}

/* ── Mobile: dashboard sidebar → top nav bar (≤ 780px) ─────*/
@media (max-width: 768px) {
    /* Layout: sidebar above content instead of beside it */
    #db-layout-wrap {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    #db-sidebar {
        display: block !important;   /* override dashboard.css ≤600px display:none */
        width: 100% !important;
        height: auto !important;
        min-height: unset !important;
        position: static !important;
        top: auto !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
        overflow: visible !important;
    }
    #db-content-area { padding: 8px !important; } /* override dashboard.css 10px */
    #db-sidebar-inner { min-height: 0 !important; }
    .db-sbar-toggle { display: none !important; }

    /* Nav becomes horizontal scrollable tab strip.
       NOTE: nav#db-sidebar itself IS .db-nav and gets display:block from the
       #db-sidebar rule above (ID beats class) — the actual flex row must be
       the inner wrapper #db-sidebar-inner, which holds the .db-nav-item links. */
    #db-sidebar-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-radius: 0;
        padding: 0; gap: 0; border-bottom: none; white-space: nowrap;
    }
    #db-sidebar-inner::-webkit-scrollbar { display: none; }
    .db-prof { display: none !important; }
    .db-nav-item {
        flex-shrink: 0;
        border-left: none !important;
        border-bottom: 3px solid transparent;
        padding: 11px 14px; font-size: .82rem;
    }
    .db-nav-item.act {
        border-left-color: transparent !important;
        border-bottom-color: var(--primary);
    }
    .db-nav-sep { width: 1px; height: auto; align-self: stretch; margin: 8px 0; flex-shrink: 0; }
}

/* ── Touch targets: checkboxes/radios always ≥ 18px ──────── */
input[type="checkbox"],
input[type="radio"] {
    width: 18px; height: 18px; cursor: pointer; flex-shrink: 0;
}

/* ── Mobile: hamburger menu (≤ 768px) ───────────────────── */
@media (max-width: 768px) {
    .topbar { gap: 8px; padding: 10px 14px; flex-wrap: nowrap; }
    .topbar .tag { display: none; }
    .topbar-controls { gap: 4px; }
    .topbar-controls .scheme-picker,
    .topbar-controls .lang-picker { display: none; }

    .nav-hamburger { display: inline-flex; align-items: center; }

    .topbar .nav {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--topbar-bg);
        flex-direction: column;
        padding: 8px 14px 14px;
        border-top: 1px solid rgba(255,255,255,.1);
        box-shadow: 0 8px 24px rgba(0,0,0,.25);
        z-index: 200;
    }
    .topbar .nav.nav-open { display: flex; }
    .topbar { position: relative; }
    .topbar .nav .nav-link {
        padding: 12px 8px; border-radius: 6px;
        font-size: 1rem; min-height: 44px;
        display: flex; align-items: center;
    }
    .topbar .nav .nav-link:hover { background: rgba(255,255,255,.08); }

    main.container { margin: 14px auto; padding: 0 12px; }
    .summary { grid-template-columns: 1fr; gap: 2px 0; }
    .summary dt { margin-top: 8px; }

    .cards    { grid-template-columns: 1fr; }
    .info-grid { grid-template-columns: 1fr; }
    .grid     { grid-template-columns: 1fr; }

    .table-scroll,
    .db-section-body table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-scroll { display: block; }
    .db-section-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 540px; }

    .form-grid,
    .form-row { grid-template-columns: 1fr !important; }

    .btn-row { flex-direction: column; align-items: stretch; }
    .btn-row .btn { width: 100%; text-align: center; }

    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

    .admin-layout,
    .admin-cols,
    .two-col,
    .split-layout { flex-direction: column !important; }

    .prof-dropdown { min-width: unset; width: calc(100vw - 28px); right: -14px; }

    .interval-switcher { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
    .interval-btn { flex: 1; min-width: 120px; min-height: 44px; }

    .service-card .btn { min-height: 48px; font-size: .95rem; }

    .set-row { flex-direction: column; padding: 10px 0; gap: .5rem; }
    /* !important needed: dashboard.html <style>-in-body overrides external CSS */
    .set-row-lbl { flex: none !important; width: 100%; }
    .set-row-val { min-width: 0 !important; width: 100%; }
    /* Reduce settings tab body padding on mobile */
    .set-tab-body.act { padding: 14px !important; }
    /* Fix settings sub-tab bar: first tab cut off due to padding + overflow:hidden on parent */
    .set-tab-bar { padding: 0 4px !important; }
    /* Compact set-tab touch targets */
    .set-tab { min-height: 44px; padding: 10px 10px; }
    /* Section body padding: less wasteful on mobile */
    .db-section-body { padding: 14px; }
    /* Admin card: remove sticky on mobile, it blocks scrolling */
    .adm-card { position: static !important; top: auto !important; }
}

/* ── Mobile: line-items as card view (≤ 640px) ────────────── */
@media (max-width: 640px) {
    /* Table + tbody must leave table layout, otherwise the element
       shrink-wraps to ~55% width and the cards get squeezed */
    #line-items, #line-items tbody { display: block; width: 100%; }
    #line-items thead { display: none; }
    #line-items .line-row {
        display: grid; grid-template-columns: 1fr 1fr;
        gap: 6px 10px; padding: 10px;
        border: 1px solid var(--border); border-radius: 8px;
        margin-bottom: 8px; background: var(--surface); position: relative;
    }
    #line-items .line-row td {
        border: none; padding: 0;
        display: flex; flex-direction: column; gap: 2px;
    }
    #line-items .line-row td:first-child { grid-column: 1 / -1; }
    #line-items .line-row td:last-child {
        position: absolute; top: 8px; right: 8px; grid-column: unset;
    }
    #line-items td[data-label]::before {
        content: attr(data-label);
        font-size: .68rem; font-weight: 700;
        letter-spacing: .04em; color: var(--muted); text-transform: uppercase;
    }
    #live-totals { flex-direction: column; align-items: flex-start; gap: .3rem; }
    #live-totals > span:last-child { margin-left: 0; font-size: 1rem; }

    #zahlungen table { min-width: 400px; }
    .service-card { padding: 18px 16px; }
}

/* ── Admin itab-bar: compact on mobile ───────────────────── */
@media (max-width: 768px) {
    /* Hide group labels and separators — save space */
    .itab-group-lbl { display: none; }
    .itab-sep { display: none; }
    /* Compact tab buttons */
    .itab-btn { padding: 7px 10px !important; font-size: .78rem !important; }
    .itab-btn .tab-icon { font-size: .85rem; }
    /* Compliance Radar: 3 Spalten → gestapelt auf Mobile */
    .cr-table { display: block; width: 100%; }
    .cr-table tbody, .cr-table tr { display: block; width: 100%; }
    .cr-td { display: block; width: auto !important; margin-bottom: 6px; }
    .cr-td-empty { display: none; }
}

/* ── Profile dropdown: bottom-sheet on mobile ───────────────────── */
@media (max-width: 768px) {
    .prof-dropdown {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -8px 32px rgba(0,0,0,.25) !important;
        animation: prof-slide-up .22s ease !important;
        max-height: 88vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;     /* prevent pull-to-refresh fighting swipe-close */
        will-change: transform;           /* GPU-layer for smooth translateY */
    }
    @keyframes prof-slide-up {
        from { transform: translateY(30px); opacity: 0; }
        to   { transform: none; opacity: 1; }
    }
    /* Logout button: full width, more prominent */
    .prof-footer {
        flex-direction: column;
        gap: 8px;
        padding: 12px 16px 28px;
    }
    .prof-logout {
        width: 100%;
        text-align: center;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-color: var(--error) !important;
    }
}

/* ── Dashboard: hide section-header action buttons on mobile (≤ 640px) ────── */
@media (max-width: 640px) {
    /* Keep headers lean — action btns are reachable inside the section body */
    .db-section-hd > a.btn,
    .db-section-hd > button.btn { display: none !important; }
}

/* ── Small phone (≤ 480px) ───────────────────────────────── */
@media (max-width: 480px) {
    .topbar .brand span:last-child { display: none; }
    main.container { padding: 0 10px; }
    .card { padding: 14px; }
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.15rem; }
    .profile-cards { grid-template-columns: 1fr; }
    .sim-toggle-btn .sim-badge { display: none; }
    .db-nav-item { font-size: .76rem; padding: 10px 10px; gap: 5px; }
    .price .amount { font-size: 1.6rem; }
    #pricing-cards { gap: 14px; }
    /* Toast: prevent overflow on narrow phones (375px) */
    #toast-container { left: 10px; right: 10px; max-width: none; width: auto; }
    /* Settings sub-tabs even more compact */
    .set-tab { padding: 8px 8px; font-size: .76rem; }
    /* Admin itab even more compact */
    .itab-btn { padding: 6px 8px !important; font-size: .75rem !important; }
}