/* ==========================================================
   MOBILNÍ ZOBRAZENÍ
   Breakpoint: pod 768 px (Bootstrap md)
   ========================================================== */

/* ---------- Sidebar jako offcanvas ---------- */

/* Na mobilu má vysouvací panel pevnou šířku a barvu dle tématu */
@media (max-width: 767.98px) {

    .app-sidebar.offcanvas-md {
        width: 280px;
        background-color: var(--app-sidebar-bg);
        min-height: auto;          /* přebíjí desktopové 100vh */
        border-right: none;
    }

    /* Hlavička offcanvasu */
    .app-sidebar .offcanvas-header {
        border-bottom: 1px solid var(--bs-border-color);
    }

    .app-sidebar .offcanvas-title {
        color: var(--app-sidebar-text);
    }

    /* Logo v menu na mobilu skryjeme – název je už v hlavičce offcanvasu */
    .app-sidebar .sidebar-header {
        display: none;
    }
}

/* ---------- Obsah aplikace na mobilu ---------- */

@media (max-width: 767.98px) {

    /* Kontejner bez okrajů a stínu – využijeme celou šířku */
    .app-container {
        margin: 0;
        min-height: 100vh;
        box-shadow: none;
    }

    /* Menší odsazení obsahu */
    .app-content .p-4 {
        padding: 1rem !important;
    }

    .app-content header {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Hlavička se může zalomit do dvou řádků */
    .app-content header {
        flex-wrap: wrap;
        gap: .5rem;
    }

    /* Nadpis stránky menší */
    .app-content header h1 {
        font-size: 1.1rem;
    }
}

/* ---------- Tabulky a výpisy na mobilu ---------- */

@media (max-width: 767.98px) {

    /* Metadata úkonu zarovnat vlevo (vpravo se na úzkém displeji tříští) */
    .krok-meta {
        text-align: left;
    }

    /* Popis úkolu ve výpisu bez omezení šířky */
    .zaznam-popis {
        max-width: 100%;
    }

    /* Menší písmo v tabulkách */
    .table {
        font-size: .9rem;
    }

    /* Záložky detailu úkolu – menší odsazení */
    .nav-tabs .nav-link {
        padding: .5rem .75rem;
        font-size: .9rem;
    }
}