/*
 * Mobilní úpravy administrace (motiv dashtreme-master).
 * Načítá se jako poslední styl v app/AdminModule/templates/@layout.latte a v přihlašovací
 * šabloně app/AdminModule/SignModule/templates/@layout.latte, takže přepisuje motiv.
 *
 * Motiv je psaný pro velký displej - na telefonu ubírají místo odsazení, která se sčítají
 * (obsah 10px + kontejner 15px + sloupec 15px + karta 20px + buňka tabulky 24px z každé
 * strany), takže na obsah zbude sotva polovina šířky. Pravidla níž jsou proto až na pár
 * drobností v media dotazech a na desktopu vzhled administrace nemění.
 * Chování (posuvné tabulky, zavírání menu, hlášky) doplňuje www/js/admin-mobile.js.
 */

/* ---------------------------------------------------------------- Globální */

/* Podklad pod vysunutým menu - motiv ho stylizuje jen ve stavu #wrapper.toggled */
.overlay {
    display: none;
}

/* Přihlašovací karta má v motivu pevných 24rem, na užším displeji přetékala ze stránky */
.card-authentication1 {
    width: 100%;
    max-width: 24rem;
}

/* Nápovědu k posouvání tabulky vkládá admin-mobile.js, zobrazí se jen na mobilu */
.table-scroll-hint {
    display: none;
    padding: 4px 2px 0;
    font-size: 11px;
    opacity: .65;
}

/* ---------------------------------------- Telefon a tablet (do 1024 px) ---
   Hranice 1024 px odpovídá motivu - od ní je boční menu vysouvací.           */

@media only screen and (max-width: 1024px) {

    body {
        overflow-x: hidden;
        /* Motiv rozpaluje písmo o 0,5px, na úzké tabulce je to znát */
        letter-spacing: 0;
    }

    /* --- Rozvržení stránky - obsah co nejblíž k okrajům displeje --- */

    .content-wrapper {
        padding-top: 64px;
        padding-right: 6px;
        padding-bottom: 30px;
        padding-left: 6px;
    }

    .content-wrapper .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }

    .content-wrapper .row {
        margin-right: -5px;
        margin-left: -5px;
    }

    .content-wrapper [class*="col-"] {
        padding-right: 5px;
        padding-left: 5px;
    }

    /* --- Karty --- */

    .card {
        margin-bottom: 12px;
    }

    .card-body {
        padding: .6rem;
    }

    .card-header {
        flex-wrap: wrap;
        padding: .6rem .7rem;
    }

    .card-header .card-title {
        margin-bottom: 0;
        font-size: 15px;
    }

    /* Tlačítka v hlavičce karty se zalomí pod nadpis a roztáhnou na celou šířku */
    .card-header .card-tools {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-top: .5rem;
    }

    .card-header .card-tools > .btn,
    .card-header .card-tools > a.btn {
        display: inline-flex;
        flex: 1 1 140px;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 36px;
        margin: 2px;
        /* Dlouhý popisek se raději zalomí, než aby tlačítko vyjelo ze stránky */
        white-space: normal;
    }

    /* --- Tabulky --- */

    /* Motiv dává buňkám v kartě 1.5rem odsazení z každé strany - to je na telefonu
       u šestisloupcové tabulky skoro 300px zabrané jen mezerami */
    .card .table td,
    .card .table th {
        padding-right: .4rem;
        padding-left: .4rem;
    }

    .table td,
    .table th {
        padding-top: .35rem;
        padding-bottom: .35rem;
        font-size: 13px;
        vertical-align: middle;
    }

    .table thead th {
        padding-top: .5rem;
        padding-bottom: .5rem;
        font-size: 11px;
        letter-spacing: .3px;
    }

    /* Fotky v tabulkách mají v šablonách pevné rozměry v atributu style */
    .card .table img {
        max-width: 44px !important;
        max-height: 44px !important;
        height: auto !important;
    }

    /* Ikonová tlačítka ve sloupci akcí - malá, ale prstem ještě trefitelná */
    .table .btn-sm,
    .table .btn-xs {
        min-width: 32px;
        min-height: 32px;
        margin-bottom: 2px;
        padding: .3rem .45rem;
    }

    /* --- Formuláře --- */

    /* Písmo 16px zabrání tomu, aby iOS při kliknutí do pole přiblížil celou stránku */
    .form-control,
    .form-control-sm,
    .custom-select,
    select,
    textarea,
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"] {
        font-size: 16px;
    }

    .form-control-sm {
        height: auto;
        padding: .35rem .5rem;
    }

    .form-group {
        margin-bottom: .75rem;
    }

    /* Select2 si šířku počítá při vykreslení, ve skryté záložce vyjde nesmyslně malá */
    .select2-container {
        width: 100% !important;
    }

    /* --- Záložky --- */

    /* V šablonách mají odkazy pevných 300px, zalomily se do osmi řádků pod sebou.
       Místo toho se lišta posouvá do stran. */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs .nav-item {
        flex: 0 0 auto;
    }

    .nav-tabs .nav-link {
        width: auto !important;
        padding: .5rem .7rem;
        font-size: 13px;
        white-space: nowrap;
    }

    .tab-content.p-3 {
        padding: .5rem !important;
    }

    /* --- Horní lišta a vysouvací menu --- */

    .topbar-nav .navbar {
        height: 56px;
        padding: 0 6px;
    }

    .toggle-menu i {
        padding: 0 10px;
        font-size: 20px;
        line-height: 56px;
    }

    .sidebar-menu > li > a {
        padding: 13px 10px 13px 15px;
        font-size: 16px;
    }

    .sidebar-menu .sidebar-submenu > li > a,
    #sidebar-wrapper .nav-link {
        padding: 9px 10px 9px 22px;
        font-size: 15px;
    }

    /* Klepnutím vedle menu se menu zavře (podklad má v šabloně třídu toggle-menu) */
    #wrapper.toggled .overlay {
        display: block;
        z-index: 999;
    }

    /* Pod vysunutým menu se stránka nesmí posouvat */
    body.sidebar-open {
        overflow: hidden;
    }

    /* --- Hlášky --- */

    /* Hlášky sedí v horní liště, kde se na telefon nevejdou. admin-mobile.js je přesune
       nad obsah stránky a přidá jim třídu níž. */
    .admin-flashes-inline {
        display: block;
        margin: 0 0 10px;
        padding: 10px 12px;
        border-left: 3px solid #ffc107;
        border-radius: 8px;
        background: rgba(0, 0, 0, .35);
        list-style: none;
    }

    .admin-flashes-inline .flash strong {
        font-size: 14px;
        line-height: 1.3;
    }

    /* --- Modální okna --- */

    .modal-dialog {
        max-width: none;
        margin: .5rem;
    }

    .modal-content {
        padding: 8px;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: .75rem;
    }

    .modal-title {
        font-size: 16px;
    }

    .modal-footer .btn {
        flex: 1 1 auto;
    }

    /* --- Stránkování (app/AdminModule/components/paginator) --- */

    .content-wrapper .bg-gray-light > div {
        margin-bottom: 4px;
        text-align: center !important;
    }

    .content-wrapper .bg-gray-light .btn {
        min-height: 30px;
        margin: 2px !important;
        padding: .2rem .45rem;
    }

    /* --- Ostatní --- */

    /* Nic nesmí roztáhnout stránku do stran */
    .card img,
    .tox-tinymce {
        max-width: 100%;
    }

    .table-scroll-hint {
        display: block;
    }
}

/* ------------------------------- Tabulky použité jako rozvržení formuláře ---
   Dvousloupcové tabulky (popisek + pole) se rozloží pod sebe, jinak z pole se
   zapnutým nezalamováním zbude na telefonu proužek. Třídu přidává
   www/js/admin-mobile.js podle struktury tabulky.                             */

@media only screen and (max-width: 767.98px) {

    .admin-stack-table,
    .admin-stack-table tbody,
    .admin-stack-table tr,
    .admin-stack-table td,
    .admin-stack-table th {
        display: block;
        width: 100% !important;
    }

    .admin-stack-table thead {
        display: none;
    }

    .admin-stack-table tr {
        padding: .3rem 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .admin-stack-table tr:first-child {
        border-top: 0;
    }

    .card .admin-stack-table td,
    .card .admin-stack-table th {
        padding: .15rem .35rem !important;
        border-top: 0;
        white-space: normal;
    }

    .admin-stack-table .td-title {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .3px;
        text-transform: uppercase;
        opacity: .8;
    }

    /* Řádek s tlačítkem Uložit apod. má v šablonách vlastní odsazení v atributu style */
    .admin-stack-table .btn {
        min-height: 38px;
    }
}

/* --------------------------------------------- Malý telefon (do 576 px) --- */

@media only screen and (max-width: 575.98px) {

    .card .table td,
    .card .table th {
        padding-right: .3rem;
        padding-left: .3rem;
    }

    .table td,
    .table th {
        font-size: 12px;
    }

    .table thead th {
        font-size: 10px;
    }

    .card .table img {
        max-width: 36px !important;
        max-height: 36px !important;
    }

    .card-title,
    h5.card-title,
    h6.card-title {
        font-size: 14px;
    }

    /* Sekce fotografií hráče - app/AdminModule/SubjectModule/templates/Default/@photos.latte */
    .photo-preview {
        min-height: 150px;
    }

    .photo-preview img {
        max-height: 190px;
    }
}