@media (max-width: 768px) {

    /* ===== Globální pojistka proti horizontálnímu scrollu ===== */
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* ===================== HEADER ===================== */
    .header-inner {
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        overflow: hidden;
        transition: height 0.3s ease;
        box-sizing: border-box; /* všechny paddingy se počítají do šířky */
    }

    /* collapsed – jen logo */
    .header-inner.collapsed {
        height: 60px;  /* výška loga */
        overflow: hidden;
    }

    /* expanded – auto + scroll, max 100vh */
    .header-inner.expanded {
        height: auto; 
        max-height: 100vh;
        overflow-y: auto;
    }

    /* skrytí/rozbalení topmenu a userbox */
    .header-inner.collapsed .topmenu,
    .header-inner.collapsed .userbox {
        display: none;
    }

    .header-inner.expanded .topmenu,
    .header-inner.expanded .userbox {
        display: flex;
    }

    /* logo */
    .header-inner .logo {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        margin: 4px 0;
    }

    .header-inner .logo img {
        height: 50px;
        width: auto;
        max-width: 100%; /* nikdy nepřetéká */
    }

    /* topmenu – položky pod sebou */
    .topmenu {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap; /* pokud je víc položek, přejdou dolů */
        gap: 6px;
        width: 100%;
        margin: 4px 0;
    }

    .topmenu .item a {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        width: 100%;
        box-sizing: border-box;
        white-space: normal; /* povolí zalamování textu */
        text-align: left;
    }

    .topmenu .icon {
        height: 24px;
        width: 24px;
        flex-shrink: 0;
    }

    .topmenu .icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* userbox – centrovaný */
    .userbox {
        margin: 0 auto;
        align-items: center;
        width: 100%;
        max-width: 100%; /* nikdy nepřetéká */
    }

    .userbox .logined {
        width: 100%;
        max-width: 250px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* ===================== CONTENT ===================== */
    .content {
        flex-direction: column;
        margin-top: calc(var(--header-height-minimalized) + var(--page-border-width));
    }

    .content-right {
        order: 0;
        width: 100%;
        margin: 0 0 16px 0;
    }
    
    .content-right .fixed {
        position: relative !important; /* zrušení fixed */
        top: auto;
        right: auto;
        width: 100%;
    }

    .content-left {
        order: 1;
        width: 100%;
        margin: 0;
    }

    /* ===================== FILTRY POPUP ===================== */
    #filter-popup {
        width: auto;
        margin: 0;
        height: 100%;
        border-radius: 0;
        overflow-y: auto;
    }

    .form-row {
        flex-direction: column;
    }

    .actions {
        position: sticky;
        bottom: 0;
        background: #fff;
        padding-top: 10px;
    }

    /* ===================== AJAX BOX ===================== */
    .ajax-box {
        max-width: 100%;
    }
    
    .pages {
        display: flex;
        flex-wrap: wrap;       /* zalamování řádků */
        gap: 8px;              /* mezera mezi prvky */
        width: 100%;
        box-sizing: border-box;
    }

    /* tlačítka na první řádek */
    .pages .filter-button {
        flex: 1 1 auto;        /* roztáhnout rovnoměrně */
        min-width: 120px;      /* aby se moc nezmenšila */
        order: 1;
    }

    /* čísla stránek na druhý řádek */
    #pages {
        flex-basis: 100%;      /* zabere celý řádek */
        order: 2;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
        margin-top: 4px;
    }

    /* label + select na třetí řádek, vedle sebe */
    label[for="per-page"],
    #per-page {
        order: 3;
    }

    label[for="per-page"] + #per-page {
        display: inline-flex;  /* label a select vedle sebe */
        align-items: center;
        gap: 6px;
        margin-top: 4px;
    }
}