/* ---------------------------------------------------------
   responsive.css — Mobile First Anpassungen
   Breakpoints:  ≤ 1024px  Tablet
                 ≤ 768px   Großes Handy
                 ≤ 480px   Handy
--------------------------------------------------------- */

/* ======================  TABLET  ====================== */
@media (max-width: 1024px) {

    .main { padding: 16px 18px 60px; }

    /* Detail-Grid: 2 Spalten */
    .overview-grid {
        grid-template-columns: 1fr 1fr;
    }
    .overview-grid .card.span-machine {
        grid-row: auto;
        grid-column: span 2;
    }
    .machine-info .image { height: 200px; }

    /* Top-Nav etwas enger */
    .nav { gap: 24px; }
    .nav-link { font-size: 12px; }
}

/* ======================  TABLET / GROSSES HANDY  ====================== */
@media (max-width: 900px) {

    .nav-link span { display: none; }     /* Nur Icons in der Nav */
    .nav { gap: 18px; }
    .logo { margin-right: 24px; }
}

/* ======================  HANDY  ====================== */
@media (max-width: 768px) {

    :root {
        --topbar-h: 56px;
        --sidebar-w: 240px;
    }

    /* Topbar: Hamburger sichtbar */
    .topbar { padding: 0 14px; }
    .hamburger { display: inline-flex; }
    .logo { font-size: 20px; margin-right: auto; }

    /* Off-canvas Drawer für Hauptnav */
    .nav {
        position: fixed;
        top: 0; left: 0;
        height: 100vh;
        width: 280px;
        max-width: 80vw;
        background: var(--surface);
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 64px 12px 24px;
        gap: 4px;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: var(--shadow-md);
        z-index: 40;
        overflow-y: auto;
        -webkit-mask-image: none;
                mask-image: none;
    }
    .nav.open { transform: translateX(0); }
    /* Slider-Track auf Mobile deaktivieren */
    .nav-track {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 0;
        transform: none !important;
        transition: none !important;
        align-items: stretch;
        height: auto;
        width: 100%;
    }
    .nav-link {
        height: auto;
        padding: 14px 14px;
        border-bottom: 1px solid var(--border-soft);
        border-radius: 0;
        gap: 12px;
    }
    .nav-link span { display: inline; font-size: 13px; }
    .nav-link.active {
        border-bottom-color: var(--border-soft);
        background: #FFFBE6;
    }
    .nav-link.active::before {
        content: '';
        position: absolute;
        left: 0;
        width: 3px;
        height: 24px;
        background: var(--brand);
        border-radius: 0 3px 3px 0;
    }
    .nav-link { position: relative; }

    .nav-close {
        display: inline-flex;
        position: absolute;
        top: 12px; right: 12px;
        width: 36px; height: 36px;
        border-radius: 8px;
        color: var(--text-soft);
        align-items: center;
        justify-content: center;
    }
    .nav-close:hover { background: var(--surface-alt); }
    .nav-backdrop.open { display: block; }

    .topbar-right { gap: 4px; }
    .hide-sm { display: none; }
    .icon-btn { width: 36px; height: 36px; }
    .logout-btn { width: 36px; height: 36px; }

    /* Sidebar wird zum Bottom-Tab-Bar oder ausgeblendet */
    .sidebar {
        position: fixed;
        bottom: 0; left: 0;
        width: 100%;
        height: 56px;
        flex-direction: row;
        justify-content: center;
        padding: 0;
        border-top: 1px solid rgba(255,255,255,.08);
        z-index: 25;
    }
    .sidebar-icon { width: 44px; height: 44px; }

    .main {
        padding: 14px 14px 80px;
        width: 100%;
    }
    .layout { flex-direction: column; }

    /* Breadcrumb dünner */
    .breadcrumb { font-size: 12px; flex-wrap: wrap; gap: 8px; }
    .breadcrumb .right { display: none; }

    /* Seitentitel */
    .page-title h1 { font-size: 18px; }
    .page-title .count { font-size: 15px; }

    /* Filter-Leiste: scrollbar */
    .filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 10px 12px;
        gap: 8px;
        scrollbar-width: thin;
    }
    .filters::-webkit-scrollbar { height: 4px; }
    .filter-btn { flex-shrink: 0; padding: 6px 12px; font-size: 12px; }
    .clear-all { margin-left: 4px; flex-shrink: 0; }
    .refresh-icon { flex-shrink: 0; }

    /* Tabelle: horizontal scrollbar */
    .table-wrap { overflow-x: auto; }
    table { min-width: 720px; }
    thead th, tbody td { padding: 10px 12px; font-size: 12px; }
    .m-name .text strong { font-size: 12.5px; }
    .m-name .text small  { font-size: 11px; }

    .pagination {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;
    }

    /* Tabs scrollbar */
    .tabs {
        overflow-x: auto;
        gap: 18px;
        padding-bottom: 0;
        scrollbar-width: thin;
        white-space: nowrap;
    }
    .tabs::-webkit-scrollbar { height: 0; }
    .tab { padding: 12px 0; font-size: 13px; flex-shrink: 0; }

    /* Detail-Header */
    .detail-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .detail-title .text h1 { font-size: 18px; }
    .btn-actions { align-self: flex-end; }

    /* Detail-Grid: 1 Spalte */
    .overview-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .overview-grid .card.span-machine {
        grid-column: span 1;
    }
    .overview-grid .card { padding: 16px; }
    .machine-info .image { height: 180px; }

    .dual { gap: 16px; }
    .kpi .val { font-size: 20px; }
    .stock-card .pct-big { font-size: 22px; }

    /* FAB tiefer wegen Bottom-Bar */
    .fab { bottom: 76px; right: 16px; width: 46px; height: 46px; }
    .assistance {
        top: auto;
        bottom: 140px;
        font-size: 10px;
        padding: 10px 4px;
    }
}

/* ======================  KLEINES HANDY  ====================== */
@media (max-width: 480px) {

    .main { padding: 12px 10px 80px; }
    .filters { padding: 8px 10px; }
    .filter-btn { padding: 5px 10px; font-size: 11.5px; }
    .filter-btn .badge { font-size: 10px; padding: 1px 5px; }

    .page-title { gap: 8px; }
    .page-title h1 { font-size: 17px; }

    .topbar { padding: 0 10px; }
    .logo { font-size: 18px; }
    .icon-btn { width: 34px; height: 34px; }

    .breadcrumb { font-size: 11.5px; }
    .bc-back { padding: 2px; }

    /* Tabs noch kompakter */
    .tabs { gap: 14px; }

    /* Cards Padding kleiner */
    .overview-grid .card { padding: 14px; }
    .card-head .titles { gap: 16px; }
    .machine-info .image { height: 160px; }
    .machine-info .image::before { font-size: 64px; }

    /* Property-Liste schmaler */
    .machine-info .props { grid-template-columns: 80px 1fr; }

    /* Alerts-Zeile vertikal stacken */
    .alerts-list .alert-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    .alerts-list .amt { margin-left: 40px; }

    /* Last-TX: untereinander */
    .last-tx { grid-template-columns: 1fr; gap: 12px; }
    .kpi-row { gap: 16px; }
    .kpi .val { font-size: 18px; }

    /* Status Detail-Header */
    .detail-title { flex-wrap: wrap; }
    .detail-title .icon-box {
        width: 34px; height: 34px;
        padding-left: 4px;
    }
}

/* ======================  Mini-Handy  ====================== */
@media (max-width: 360px) {
    .topbar-right .icon-btn:not(:first-child) { display: none; }
    .nav { width: 100%; max-width: 100%; }
    .page-title h1 { font-size: 16px; }
    .detail-title .text h1 { font-size: 16px; }
}