/**
 * Mobile Layout Fixes
 * Opravy mobilniho layoutu na zaklade Playwright testu
 * Datum: 2024-12-15
 */

/* ============================================
   1. NAV TOGGLE - zvetseni touch targetu na 44px
   ============================================ */
@media (max-width: 768px) {
    .nav-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================
   2. BADGES - zabraneni zalamovani
   ============================================ */
.badge,
.credits-badge,
.premium-nav-badge,
.trust-badge,
.pricing-badge,
.company-type-badge,
.company-employees-badge,
.osvc-badge-small,
.report-type-badge,
.report-owned-badge,
.stat-badge,
.timeline-badge,
[class*="-badge"] {
    white-space: nowrap;
    max-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badge kontejnery - flex wrap */
.trust-badges,
.report-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ============================================
   3. TABULKY - responsive wrapper
   ============================================ */
/* Desktop: tabulky na plnou sirku */
.data-table {
    width: 100%;
}

/* Table wrapper pro scroll - pouzivat jen kde je potreba */
.table-responsive,
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive table,
.table-container table {
    width: 100%;
}

@media (max-width: 768px) {
    /* Na mobilu - tabulky scrollovatelne */
    .container table,
    .content table,
    main table,
    .data-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Tabulky na mobilu */
    table {
        font-size: 14px;
    }

    table th,
    table td {
        padding: 8px 10px;
    }

    /* Kompaktnejsi bunky */
    .data-table th,
    .data-table td {
        padding: 6px 8px;
        font-size: 13px;
    }
}

/* ============================================
   4. FORM BUTTONS - plna sirka na mobilu
   ============================================ */
@media (max-width: 480px) {
    /* Vsechna hlavni tlacitka na plnou sirku */
    .btn-primary,
    .btn-submit,
    button[type="submit"],
    .hero-search .btn-search,
    .search-form button,
    form .btn {
        width: 100%;
        min-height: 44px;
    }

    /* Form input group - stack vertically */
    .search-input-group,
    .form-input-group,
    .input-group {
        flex-direction: column;
    }

    .search-input-group input,
    .form-input-group input,
    .input-group input {
        width: 100%;
    }
}

@media (max-width: 768px) {
    /* Tlacitka v radku - wrap */
    .btn-group,
    .button-group,
    .actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .btn-group .btn,
    .button-group .btn,
    .actions .btn {
        flex: 1 1 auto;
        min-width: 120px;
    }
}

/* ============================================
   5. CHARTS/GRAPHS - max 100% sirka
   ============================================ */
.chart,
.chart-container,
.brands-chart,
.age-chart,
.fuel-chart,
.ev-brands-chart,
canvas,
svg:not(.icon) {
    max-width: 100%;
    overflow-x: auto;
}

/* Registration charts on brand/model pages */
.registration-chart,
.year-chart,
[class*="registrac"],
[class*="chart"] {
    max-width: 100%;
    overflow-x: auto;
}

@media (max-width: 768px) {
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    .chart-bar-wrapper {
        min-width: 0;
        flex: 1;
    }
}

/* ============================================
   6. BRAND/MODEL PAGES - prevence overflow
   ============================================ */
@media (max-width: 768px) {
    /* Zabraneni preteceni obsahu */
    body {
        overflow-x: hidden;
    }

    .container,
    .content,
    main {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Long text truncation */
    .brand-name,
    .model-name,
    .company-name,
    h1, h2, h3 {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Statistiky - mensi font */
    .stat-value,
    .stat-number {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }

    /* Grid cards - single column */
    .brand-grid,
    .model-grid,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* Karty - plna sirka */
    .brand-card,
    .model-card,
    .stat-card {
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================
   6. OBECNE MOBILE FIXES
   ============================================ */
@media (max-width: 768px) {
    /* Images responsive */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Pre/code blocks scrollable */
    pre, code {
        max-width: 100%;
        overflow-x: auto;
        word-wrap: break-word;
    }

    /* Flexbox items wrap */
    .flex-row,
    [style*="display: flex"],
    [style*="display:flex"] {
        flex-wrap: wrap;
    }

    /* Long URLs/text break */
    a, p, span, td, th {
        word-break: break-word;
    }
}

/* ============================================
   7. TOUCH TARGETS - minimalni velikost 44px
   ============================================ */
@media (max-width: 768px) {
    /* Vsechny interaktivni prvky */
    a.btn,
    button,
    input[type="submit"],
    input[type="button"],
    .clickable,
    [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Odkazy v navigaci */
    nav a,
    .nav-menu a,
    .footer-links a {
        padding: 12px 16px;
        display: inline-block;
    }

    /* Form inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
        min-height: 44px;
        font-size: 16px; /* Prevent iOS zoom */
    }
}

/* ============================================
   8. HORIZONTAL SCROLL PREVENTION
   ============================================ */
html, body {
    max-width: 100%;
}

@media (max-width: 768px) {
    /* Hide any overflow causing elements */
    .hero-bg,
    .decorative,
    [class*="decoration"],
    [class*="pattern"] {
        display: none;
    }

    /* Ensure container doesn't overflow */
    .container {
        padding-left: 16px;
        padding-right: 16px;
        width: 100%;
        max-width: 100%;
    }
}