/*
 * mobile-index.css
 * Wyłącznie dla strony głównej indexmain.html.
 * Ładowany po stylesheet.css i mobile.css.
 */

/* ============================================================
   NAGŁÓWEK — UKŁAD MOBILNY
   Logo na pełną szerokość, tekst pod logo.
   Rozwiązanie przeniesione z mobilex.css.
   ============================================================ */

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

    #top_logo {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: 8px !important;
        box-sizing: border-box !important;
    }

    #top_logo > table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    #top_logo > table > tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    #top_logo > table > tbody > tr {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    #top_logo > table td {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 5px 0 !important;
        text-align: center !important;
        vertical-align: top !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    #top_logo > table td:nth-child(3) {
        display: none !important;
    }

    /* Logo */
    #top_logo > table td:first-child,
    #top_logo > table td:first-child a {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #top_logo > table td:first-child img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    /* Nazwa forum i opis pod logo */
    #top_logo > table td:nth-child(2) {
        width: 100% !important;
        padding-top: 5px !important;
        padding-bottom: 8px !important;
        text-align: center !important;
    }

    #top_logo h1 {
        margin: 0 0 5px 0 !important;
        font-size: 1.8em !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    #top_logo h1 img {
        display: inline-block !important;
        width: 400px !important;
        max-width: 100% !important;
        height: 14px !important;
        vertical-align: middle !important;
    }

    #top_logo .gen {
        display: block !important;
        font-size: 1.1em !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}



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

/* Nazwa działu i opis pozostają obok obrazka,
   zamiast przechodzić pod niego. */

#wrapcentre table.tablebg
td.row1:has(> div[style*="float:left"]) > a.forumlink,
#wrapcentre table.tablebg
td.row1:has(> div[style*="float:left"]) > p.forumdesc {
    display: block !important;
    overflow: hidden;
    min-width: 0;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

}


/* ============================================================
   INDEX — PANEL LOGOWANIA
   Nazwa użytkownika i hasło w osobnych wierszach.
   ============================================================ */

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

    #wrapcentre table.tablebg td.row1:has(> span.genmed) {
        text-align: left !important;
        white-space: normal !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    /* Etykiety pól */
    #wrapcentre table.tablebg td.row1 > span.genmed {
        display: inline-block !important;
        width: 132px !important;
        max-width: 132px !important;
        text-align: left !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    /* Nowy wiersz przed etykietą Hasło */
    #wrapcentre table.tablebg td.row1 > span.genmed:nth-of-type(2)::before {
        content: "";
        display: block;
    }

    /* Pola użytkownika i hasła */
    #wrapcentre table.tablebg td.row1 > input.post {
        display: inline-block !important;
        width: 125px !important;
        max-width: calc(100% - 138px) !important;
        box-sizing: border-box !important;
        vertical-align: middle !important;
    }

    /* Opcja automatycznego logowania w kolejnym wierszu */
    #wrapcentre table.tablebg td.row1 > span.gensmall::before {
        content: "";
        display: block;
    }

    #wrapcentre table.tablebg td.row1 > span.gensmall {
        display: inline-block;
        margin-top: 8px;
        white-space: normal !important;
        vertical-align: middle;
    }

    #wrapcentre table.tablebg td.row1 > input[name="autologin"] {
        vertical-align: middle;
    }

    #wrapcentre table.tablebg td.row1 > input.btnmain {
        margin-top: 5px;
        vertical-align: middle;
    }
}