/* ============================================================
   Mobile & Responsive – alle Breakpoints
   Lädt NACH den Desktop-Stilen; überschreibt gezielt was für
   kleine Bildschirme anders sein muss.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   Touch-Geräte (pointer: coarse = Finger/Stylus).
   Tooltip als feste Leiste am unteren Bildschirmrand,
   ausgelöst per Tap statt Hover.
   Kein (hover:none)-Check – Samsung Internet meldet teils hover:hover.
   ──────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
    /* Sofortige Tap-Reaktion; kein 300-ms-Delay, kein Scrollen innerhalb der Karte */
    .map-container {
        touch-action: manipulation;
    }

    /* Kein Text-Select auf Long-Tap */
    .map-container svg,
    .map-container svg * {
        user-select: none;
        -webkit-user-select: none;
    }

    /* Länderpfade: sicher touch-bar machen */
    .continent {
        touch-action: manipulation;
        cursor: default;
    }

    .country-attacked { cursor: default; }

    /* Tooltip-Leiste am unteren Bildschirmrand.
       padding-bottom mit safe-area-inset: berücksichtigt Andoids Gesten-Leiste (S25). */
    .tooltip {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        max-width: none;
        width: 100%;
        border-radius: 8px 8px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        padding: 0.8rem 1.2rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
        font-size: 0.86rem;
        z-index: 300;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.6);
    }

    /* Tabellen horizontal scrollbar */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Touch-Targets: Schaltflächen mind. 44 × 44 px (Apple HIG / Android) */
    .date-nav__btn {
        min-width: 44px;
        min-height: 44px;
    }

    .btn-expand,
    .theme-toggle {
        min-height: 44px;
    }

    .source-filter__select {
        min-height: 44px;
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
    }
}

/* ────────────────────────────────────────────────────────────
   Tablet / kleines Laptop  ≤ 900 px
   ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .attacks-row {
        flex-direction: column;
    }

    .attacks-section,
    .top-countries-section {
        flex: none;
        width: 100%;
        max-width: none;
        min-width: 0;
    }
}

/* ────────────────────────────────────────────────────────────
   Tablet  ≤ 720 px
   ──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem 1.25rem;
        gap: 0.75rem;
    }

    .dashboard-title-group {
        width: 100%;
        justify-content: space-between;
    }

    .dashboard-title {
        font-size: 1.3rem;
        letter-spacing: 0.2em;
    }

    .dashboard-stats {
        width: 100%;
        justify-content: flex-start;
        gap: 0.75rem;
    }

    .stat-box {
        min-width: 0;
        flex: 1 1 8rem;
    }

    .dashboard-main {
        padding: 1rem 1rem 2rem;
    }

    .tarpit-stats {
        gap: 0.75rem;
    }

    .tarpit-stat {
        flex: 1 1 12rem;
        min-width: 0;
        padding: 0.65rem 1rem;
    }

    .tarpit-stat__value           { font-size: 1.5rem; }
    .tarpit-stat__value--duration { font-size: 1rem; }

    .attacks-table th,
    .attacks-table td {
        padding: 0.45rem 0.6rem;
        font-size: 0.78rem;
    }

    .date-nav__btn {
        width: 2.8rem;
        height: 2.8rem;
        font-size: 1.1rem;
    }

    .section-title { font-size: 0.88rem; }

    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ────────────────────────────────────────────────────────────
   Smartphone  ≤ 540 px
   ──────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
    .dashboard-header { padding: 0.75rem 1rem; }
    .dashboard-main   { padding: 0.75rem 0.75rem 2rem; }

    .dashboard-title {
        font-size: 1.05rem;
        letter-spacing: 0.12em;
    }

    .dashboard-stats { gap: 0.5rem; }

    .stat-box {
        flex: 1 1 6rem;
        padding: 0.5rem 0.75rem;
    }

    .stat-label { font-size: 0.62rem; }
    .stat-value { font-size: 1.1rem; }

    /* Tarpit-Kacheln untereinander */
    .tarpit-stats {
        flex-direction: column;
        gap: 0.5rem;
    }

    .tarpit-stat {
        flex: none;
        width: 100%;
        padding: 0.6rem 1rem;
        min-width: 0;
    }

    .tarpit-stat__value           { font-size: 1.35rem; }
    .tarpit-stat__value--duration { font-size: 0.95rem; }

    /* Karte nicht zu hoch werden lassen */
    .map-container {
        max-height: 56vw;
    }

    /* Live-Tabelle: Port-Spalte ausblenden */
    .live-table th:nth-child(4),
    .live-table td:nth-child(4) { display: none; }

    /* Angreifer-Tabelle: Verweildauer-Spalte ausblenden */
    .attacks-section .attacks-table th:nth-child(6),
    .attacks-section .attacks-table td:nth-child(6) { display: none; }

    /* Top-10: IPs-Spalte ausblenden */
    .top-countries-section .attacks-table th:nth-child(3),
    .top-countries-section .attacks-table td:nth-child(3) { display: none; }

    .attacks-table th,
    .attacks-table td {
        padding: 0.38rem 0.45rem;
        font-size: 0.74rem;
    }

    /* IP-Adressen umbrechen statt zu scrollen */
    .attacks-table .ip-cell {
        white-space: normal;
        word-break: break-all;
    }

    .section-title__hint { display: none; }

    .date-nav { justify-content: center; }

    .date-nav__btn {
        width: 3rem;
        height: 3rem;
    }

    .date-nav__label {
        min-width: 6rem;
        font-size: 0.85rem;
    }

    .table-container {
        max-height: 20rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .source-filter__select {
        font-size: 0.72rem;
        padding: 0.3rem 0.5rem;
    }

    .btn-expand {
        font-size: 0.74rem;
        padding: 0.65rem;
    }
}

/* ────────────────────────────────────────────────────────────
   Sehr kleines Smartphone  ≤ 360 px
   ──────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
    .dashboard-title {
        font-size: 0.95rem;
        letter-spacing: 0.08em;
    }

    .stat-box {
        flex: 1 1 5rem;
        padding: 0.4rem 0.55rem;
    }

    .stat-value { font-size: 1rem; }

    .attacks-table th,
    .attacks-table td {
        padding: 0.3rem 0.38rem;
        font-size: 0.7rem;
    }

    /* Land-Spalte: Text kürzen, Flagge bleibt */
    .attacks-section .attacks-table th:nth-child(2),
    .attacks-section .attacks-table td:nth-child(2) {
        max-width: 5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Quelle-Spalte bei Angreifer-Tabelle ausblenden */
    .attacks-section .attacks-table th:nth-child(4),
    .attacks-section .attacks-table td:nth-child(4) { display: none; }

    /* Karte nochmals kompakter */
    .map-container { max-height: 46vw; }
}

/* ────────────────────────────────────────────────────────────
   Reduzierte Bewegung
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .live-indicator             { animation: none; }
    .continent.country-tarpit  { animation: none; }
}