/* Travian SS — out-of-game (auth) chrome: header nav strip and the login card.
 *
 * Loaded last from Templates/head_assets.tpl, so it is the final word over
 * gpack compact.css (which sizes div.login at a fixed 502px with 113px inputs)
 * and over travian-rtl.css.
 *
 * SCOPE RULE
 * Everything here is scoped to .tss-auth-header, .tss-auth-nav, .tss-login or
 * .tss-auth-stats. Nothing may leak into the in-game pages.
 */

/* ==========================================================================
   1. Header nav strip
   Auth pages render #header empty (no resource bar), which left a bare band
   under the banner. It now carries the four outgame links, centred.
   ========================================================================== */

div#header.tss-auth-header {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0;
}

.tss-auth-nav {
    width: 100%;
    padding: 0 10px;
    text-align: center;
}

.tss-auth-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tss-auth-nav li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tss-auth-nav a {
    display: block;
    padding: 10px 18px;
    color: #333 !important;
    font: bold 13px/20px "Tajawal", Tahoma, Arial, sans-serif;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}

.tss-auth-nav a:hover,
.tss-auth-nav a:focus {
    color: #00841e !important;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.55);
}

.tss-auth-nav a.on {
    color: #c1272d !important;
    border-bottom-color: #c1272d;
}

/* ==========================================================================
   2. Login card
   compact.css pins div.login to 502px and its inputs to 113px, which is what
   made the three fields sit at three different widths. The card is centred in
   the content column and the fields share one width.
   ========================================================================== */

div#content.login {
    width: auto !important;
    max-width: 100% !important;
    padding: 12px 0 24px !important;
}

.tss-login {
    width: 100%;
    max-width: 470px;
    margin: 0 auto;
    text-align: center;
}

.tss-login-title {
    margin: 0 0 4px;
    color: #2f2a20 !important;
    font: bold 26px/1.35 "Tajawal", Tahoma, Arial, sans-serif !important;
    text-align: center;
}

/* Speed badge riding the headline, like the world number on the reference. */
.tss-login-title .tss-login-world {
    display: inline-block;
    margin-inline-start: 6px;
    color: var(--color-tss-stone-label, #5b6169);
    font-size: 14px;
    font-weight: bold;
    vertical-align: super;
}

.tss-login-intro {
    margin: 0 auto 14px;
    max-width: 430px;
    color: var(--color-tss-stone-label, #5b6169);
    font-size: 12px;
    line-height: 1.7;
    text-align: center;
}

.tss-login-notice {
    margin: 18px 0;
    color: #c1272d;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.tss-login form {
    margin: 0;
}

/* ---------- Form ---------- */

.tss-login table#login_form {
    width: 100%;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--color-tss-stone-line, #3c414733);
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    table-layout: fixed;
}

.tss-login table#login_form th,
.tss-login table#login_form td {
    padding: 9px 12px !important;
    width: auto;
    font: 13px/22px "Tajawal", Tahoma, Arial, sans-serif;
    vertical-align: middle;
}

.tss-login table#login_form th {
    width: 40%;
    color: var(--color-tss-stone-ink, #3c4147);
    font-weight: normal;
    text-align: start;
    white-space: nowrap;
}

.tss-login table#login_form td {
    width: 60%;
    text-align: start;
}

/* Row separators only between rows, so the card keeps a clean outer edge. */
.tss-login table#login_form tr + tr th,
.tss-login table#login_form tr + tr td {
    border-top: 1px solid var(--color-tss-stone-line-soft, #3c414721);
}

/* One width for every field — the captcha box used to be visibly narrower. */
.tss-login table#login_form input.text {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 32px;
    padding: 4px 8px;
    box-sizing: border-box;
    background: #fff;
    /*
     * A field is a field. These carried a green border inherited from the
     * graphic pack's `input.text { border-color: #71d000 }`, softened but
     * never actually replaced, so the login form was the one place in the
     * game where an input did not look like an input. The green stays where
     * it means something — the primary call to action below, which matches
     * the registration wizard's button — and the field takes the same
     * hairline every other form in the game uses.
     */
    border: 1px solid var(--color-tss-stone-line, #3c414733);
    border-radius: 6px;
    font: 14px/22px "Tajawal", Tahoma, Arial, sans-serif;
    direction: ltr;
    text-align: start;
}

/* Focus is the brass ring the rest of the game uses (see section 5 of
   css/tailwind-ui.src.css), not a green one. outline rather than only a
   shadow: a box-shadow disappears under forced-colours mode, and this is the
   ring a keyboard user navigates the login form by. */
.tss-login table#login_form input.text:focus-visible {
    border-color: var(--tssui-ring, #d9a441);
    outline: 2px solid var(--tssui-ring, #d9a441);
    outline-offset: 1px;
}

/* Challenge digits sit next to their label, as on the reference. */
.tss-login .tss-captcha-code {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 2px 10px;
    background: var(--color-tss-stone-100, #ececeb);
    border: 1px solid var(--color-tss-stone-line, #3c414733);
    border-radius: 2px;
    color: var(--color-tss-stone-ink, #3c4147);
    font: bold 14px/20px Tahoma, Arial, sans-serif;
    letter-spacing: 3px;
    direction: ltr;
    vertical-align: middle;
    user-select: none;
}

.tss-login .error {
    display: block;
    color: #c1272d;
    font-size: 11px;
    line-height: 16px;
}

.tss-login .error:empty {
    display: none;
}

/* ---------- Submit ---------- */

.tss-login p.btn {
    margin: 14px 0 0;
    text-align: center;
}

.tss-login p.btn button,
.tss-login button#btn_login {
    display: inline-block;
    min-width: 150px;
    padding: 9px 26px;
    background: linear-gradient(180deg, #8ec63f 0%, #6ba32a 100%);
    border: 1px solid #5d8f22;
    border-radius: 3px;
    color: #fff !important;
    font: bold 14px/20px "Tajawal", Tahoma, Arial, sans-serif;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.tss-login p.btn button:hover,
.tss-login button#btn_login:hover {
    background: linear-gradient(180deg, #9ad24b 0%, #75b02f 100%);
}

/* ---------- Feedback boxes ---------- */

.tss-login p.error_box {
    margin: 14px 0 0;
    padding: 10px 12px;
    background: #fff6f6;
    border: 1px solid #e2b6b6 !important;
    border-radius: 3px;
    color: #5c4141;
    font-size: 12px;
    line-height: 1.7;
    text-align: start;
}

/* ---------- Server stats ---------- */

/* compact.css styles every table under div.login with a dashed grey border, so
   these need the id/class pairing to win. */
div#content.login table.tss-auth-stats {
    width: 100%;
    margin: 18px auto 0;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff !important;
    border: 1px solid var(--color-tss-stone-line, #3c414733) !important;
    border-radius: 3px;
    table-layout: fixed;
}

div#content.login table.tss-auth-stats th,
div#content.login table.tss-auth-stats td {
    padding: 7px 12px !important;
    font: 13px/20px "Tajawal", Tahoma, Arial, sans-serif;
}

div#content.login table.tss-auth-stats th {
    width: 58%;
    color: var(--color-tss-stone-ink, #3c4147);
    font-weight: normal;
    text-align: start;
}

div#content.login table.tss-auth-stats td {
    width: 42%;
    color: #1f6b12;
    font-weight: bold;
    text-align: center;
}

div#content.login table.tss-auth-stats tr + tr th,
div#content.login table.tss-auth-stats tr + tr td {
    border-top: 1px solid var(--color-tss-stone-line-soft, #3c414721);
}

/* travian-ss-layout.css zebra-stripes in-game tables; the auth cards are
   plain white and must opt out of it. */
div#content.login table.tss-auth-stats tbody tr:nth-child(even) td,
div#content.login table.tss-auth-stats tbody tr:nth-child(even) th,
div#content.login table#login_form tbody tr:nth-child(even) td,
div#content.login table#login_form tbody tr:nth-child(even) th {
    background-color: transparent !important;
}

/* ==========================================================================
   3. Column placement
   #mid is a 130 / 552 / 250 grid. With no newsbox sidebar to fill it, the
   third column stayed empty and the card read as off-centre; login.php marks
   that case with .tss-no-side so the content can span both columns.
   ========================================================================== */

@media (min-width: 980px) {
    div#content.login.tss-no-side {
        grid-column: 2 / span 2 !important;
        width: auto !important;
        max-width: none !important;
    }
}

@media (max-width: 979px) {
    /*
     * Below the grid breakpoint #side_navi unfolds into a full-width stack of
     * link buttons directly under the header. On auth pages that is the same
     * four links the strip above already shows, and it pushed the form a full
     * screen down on a phone. The strip is the mobile nav here.
     */
    body.tss-auth-page div#side_navi {
        display: none !important;
    }

    /* The gamepack tiles header_background.jpg across .wrapper. Above 980px
       #mid paints white over it; below that it struck a grey band straight
       through the page title. Auth pages get the same white ground here. */
    body.tss-auth-page div#mid {
        background: #fff;
    }

    .tss-auth-nav a {
        padding: 9px 12px;
        font-size: 13px;
    }

    .tss-login {
        max-width: 100%;
        padding: 0 10px;
    }

    .tss-login-title {
        font-size: 22px !important;
    }
}

@media (max-width: 480px) {
    .tss-auth-nav a {
        padding: 8px 9px;
        font-size: 12px;
    }

    .tss-login table#login_form th,
    .tss-login table#login_form td {
        padding: 7px 8px !important;
        font-size: 12px;
    }

    .tss-login table#login_form th {
        width: 44%;
        white-space: normal;
    }

    .tss-login table#login_form td {
        width: 56%;
    }

    /* 16px keeps iOS from zooming the viewport on focus. */
    .tss-login table#login_form input.text {
        min-height: 38px;
        font-size: 16px !important;
    }

    .tss-login .tss-captcha-code {
        display: block;
        width: fit-content;
        margin: 3px 0 0;
        padding: 1px 8px;
        letter-spacing: 2px;
    }
}