/*
========================================================
 POLSKAELITA.PL | Green Dark | MyBB 1.8.41
 pe_forum_threadlist.css | wersja 2.0

 Lista watkow we wszystkich dzialach forumdisplay.php.
 Selektory dopasowane do szablonu forumdisplay_threadlist.
 Nie zmienia kafelkow poddzialow, czatu, Team Online,
 strony glownej ani kolorow rang.
========================================================
*/

/* A. CALA SEKCJA LISTY WATKOW
   .tl-container + .stable jest unikatowym ukladem
   szablonu forumdisplay_threadlist w Green Dark. */
.tl-container + .stable {
    width: 100%;
    max-width: 100%;
    margin: 16px 0 20px !important;
    padding: 0 0 8px;
    box-sizing: border-box;
    overflow: hidden;
    background: #11191b !important;
    border: 1px solid #31483d;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    color: #dce8e1;
}

/* B. NAGLOWEK DZIALU */
.tl-container + .stable > .headline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    height: auto !important;
    min-height: 54px;
    margin: 0 !important;
    padding: 13px 18px !important;
    box-sizing: border-box;
    background: linear-gradient(115deg,#1c292a 0%,#172327 75%,#162b22 100%) !important;
    border: 0;
    border-bottom: 1px solid #365748;
    border-radius: 9px 9px 0 0;
    color: #f2f8f3;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
}

.tl-container + .stable > .headline::before {
    content: "\f07c";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    color: #84cf44;
    font-family: "Font Awesome 5 Free", FontAwesome, sans-serif;
    font-size: 16px;
    font-weight: 900;
}

.tl-container + .stable > .headline > span {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #f2f8f3;
}

.tl-container + .stable > .headline > .right {
    float: none !important;
    width: auto;
    margin: 0 0 0 auto;
    text-align: right;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
}

.tl-container + .stable > .headline > .right a {
    color: #bfd2c5;
    text-decoration: none;
    font-size: 11px;
}

.tl-container + .stable > .headline > .right a:hover {
    color: #a1eab5;
}

/* C. WNETRZE PANELU */
.tl-container + .stable > .container {
    width: 100%;
    max-width: 100%;
    padding: 5px 8px 0;
    box-sizing: border-box;
    background: #11191b !important;
}

/* Wiersze techniczne (moderacja, formularz sortowania) */
.tl-container + .stable > .container > .row.clearfix:not(.thread) {
    margin: 5px 0;
    padding: 9px 11px;
    box-sizing: border-box;
    background: #182428;
    border: 1px solid #2e433a;
    border-radius: 7px;
    color: #c5d5cb;
}

/* D. KAFELKI TEMATOW */
.tl-container + .stable > .container .row.thread {
    display: grid !important;
    grid-template-columns: 22px 24px minmax(0,1fr) 125px 230px 24px;
    align-items: center;
    column-gap: 9px;
    row-gap: 5px;
    width: 100%;
    min-width: 0;
    min-height: 84px;
    margin: 8px 0 !important;
    padding: 12px 14px !important;
    box-sizing: border-box;
    background: linear-gradient(135deg,#202c30,#1b292c) !important;
    border: 1px solid #31473f;
    border-radius: 9px;
    box-shadow: 0 2px 9px rgba(0,0,0,.1);
    color: #dce8e1;
    word-break: normal;
    transition: background-color .18s ease, border-color .18s ease;
}

.tl-container + .stable > .container .row.thread:hover {
    background: #24353a !important;
    border-color: #518264;
}

.tl-container + .stable > .container .row.thread > div {
    display: block;
    position: relative;
    min-width: 0;
    max-width: 100%;
    width: auto !important;
    box-sizing: border-box;
    vertical-align: middle;
}

/* Stan tematu i ikonka */
.tl-container + .stable .row.thread > .status {
    grid-column: 1;
    text-align: center;
}

.tl-container + .stable .row.thread > .icon {
    grid-column: 2;
    text-align: center;
}

/* E. NAZWA I AUTOR TEMATU */
.tl-container + .stable .row.thread > .thread-info {
    grid-column: 3;
    min-width: 0;
    text-align: left;
}

/* Zostawiamy miejsce na avatar dodawany przez plugin. */
.tl-container + .stable .row.thread .thread-info .avatar {
    left: 0;
    right: auto;
}

.tl-container + .stable .row.thread .thread-info .info:not(.avatar-none) {
    padding-left: 55px;
    min-width: 0;
}

.tl-container + .stable .row.thread .thread-info .thread-name {
    margin: 0 0 5px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.tl-container + .stable .row.thread .thread-info .thread-name a {
    color: #f1f8f3;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    text-decoration: none;
}

.tl-container + .stable .row.thread .thread-info .thread-name a:hover {
    color: #a4eabb;
}

.tl-container + .stable .row.thread .thread-info .author {
    color: #bdcdc3;
    font-size: 11px;
    line-height: 1.45;
}

/* F. ODPOWIEDZI I WYSWIETLENIA */
.tl-container + .stable .row.thread > .stats {
    grid-column: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 0 7px;
    text-align: center;
    border-right: 1px solid #344d43;
}

.tl-container + .stable .row.thread > .stats .replies,
.tl-container + .stable .row.thread > .stats .views {
    color: #e7f1eb;
    font-size: 11px;
    line-height: 1.4;
}

.tl-container + .stable .row.thread > .stats span {
    color: #a5baac;
    font-size: 10px;
}

.tl-container + .stable .row.thread > .stats a {
    color: #f0faf2;
    font-size: 11px;
    font-weight: 700;
}

/* G. OSTATNI POST - WYROWNANY AWATAR / NICK / DATA */
.tl-container + .stable .row.thread > .last-post {
    grid-column: 5;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 0 0 8px;
    min-width: 0;
    text-align: left;
}

.tl-container + .stable .row.thread .last-post > .avatar {
    position: static;
    order: -1;
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    margin: 0;
    transform: none;
}

.tl-container + .stable .row.thread .last-post > .avatar img {
    display: block;
    width: 34px;
    height: 34px;
    max-width: 34px;
    max-height: 34px;
    object-fit: cover;
    border-radius: 50%;
}

.tl-container + .stable .row.thread .last-post > .info {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
    text-align: left;
    font-size: 11px;
    line-height: 1.45;
}

.tl-container + .stable .row.thread .last-post .author,
.tl-container + .stable .row.thread .last-post .date {
    margin: 0;
    color: #b5c8bc;
    font-size: 11px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.tl-container + .stable .row.thread .last-post a {
    color: #a7e5b7;
    text-decoration: none;
}

/* H. MODERACJA */
.tl-container + .stable .row.thread > .modbit {
    grid-column: 6;
    justify-self: end;
    text-align: right;
}

.tl-container + .stable input[type="checkbox"] {
    accent-color: #6ac787;
}

/* I. PUSTY DZIAL ORAZ NAGLOWKI RODZAJOW TEMATOW */
.tl-container + .stable > .container > .row:not(.thread):not(.sticky):not(.normal):not(.toch):not(.clearfix) {
    margin: 7px 0 !important;
    padding: 13px 15px !important;
    background: #202c30;
    border: 1px solid #31473f;
    border-radius: 8px;
    color: #bfcdc4;
    font-size: 12px;
    line-height: 1.55;
    word-break: normal;
}

.tl-container + .stable > .container > .row.sticky,
.tl-container + .stable > .container > .row.normal,
.tl-container + .stable > .container > .row.toch {
    margin: 7px 0 !important;
    padding: 9px 13px !important;
    background: #1d352a !important;
    border: 1px solid #375f49;
    border-radius: 7px;
    color: #d1f0d8;
    font-size: 12px;
}

/* J. SORTOWANIE I KONTROLKI TYLKO WEWNATRZ LISTY */
.tl-container + .stable > .container > .row.clearfix .right {
    max-width: 100%;
    text-align: right;
}

.tl-container + .stable > .container > .row form {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
    max-width: 100%;
    margin: 0;
}

.tl-container + .stable > .container select,
.tl-container + .stable > .container input.textbox {
    min-height: 36px;
    max-width: 100%;
    padding: 7px 10px;
    box-sizing: border-box;
    background: #1b292b !important;
    border: 1px solid #375344 !important;
    border-radius: 6px;
    color: #e0eee2 !important;
    font-size: 11px;
}

.tl-container + .stable > .container input[type="submit"] {
    min-height: 36px;
    padding: 7px 13px;
    border: 1px solid #4b9860;
    border-radius: 6px;
    background: linear-gradient(#316a41,#244e34);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

/* Gorny i dolny panel z przyciskiem Napisz watek */
.tl-container {
    box-sizing: border-box;
    margin: 12px 0;
}

.tl-container a.button,
.tl-container .button {
    border-radius: 7px;
}

/* K. TABLET */
@media (max-width: 1100px) {
    .tl-container + .stable .row.thread {
        grid-template-columns: 22px minmax(0,1fr) 105px minmax(155px,205px) 22px;
        column-gap: 7px;
        padding: 11px !important;
    }

    .tl-container + .stable .row.thread > .icon { display: none; }
    .tl-container + .stable .row.thread > .status { grid-column: 1; }
    .tl-container + .stable .row.thread > .thread-info { grid-column: 2; }
    .tl-container + .stable .row.thread > .stats { grid-column: 3; }
    .tl-container + .stable .row.thread > .last-post { grid-column: 4; }
    .tl-container + .stable .row.thread > .modbit { grid-column: 5; }
}

/* L. TELEFON */
@media (max-width: 780px) {
    .tl-container + .stable > .headline {
        padding: 11px 13px !important;
        min-height: 48px;
    }

    .tl-container + .stable > .headline > .right {
        flex: 0 0 100%;
        margin: 0;
        text-align: left;
    }

    .tl-container + .stable > .container { padding: 4px 6px 0; }

    .tl-container + .stable .row.thread {
        grid-template-columns: minmax(0,1fr) 24px;
        gap: 7px;
        min-height: 0;
        padding: 11px !important;
    }

    .tl-container + .stable .row.thread > .status,
    .tl-container + .stable .row.thread > .icon { display: none; }

    .tl-container + .stable .row.thread > .thread-info {
        grid-column: 1;
        grid-row: 1;
    }

    .tl-container + .stable .row.thread > .modbit {
        grid-column: 2;
        grid-row: 1;
    }

    .tl-container + .stable .row.thread > .stats {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        border: 0;
        padding: 3px 0 0 55px;
    }

    .tl-container + .stable .row.thread > .last-post {
        grid-column: 1 / -1;
        grid-row: 3;
        padding: 7px 0 0 55px;
        border-top: 1px solid #31483d;
        gap: 8px;
    }

    .tl-container + .stable > .container > .row form {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tl-container + .stable .row.thread { transition: none; }
}