/* ====================================================================
   login.css - the sign-in screen
   ====================================================================

   The whole look of login.php lives here. The page used to carry
   roughly 280 lines of inline <style>, most of it for a "problem /
   solution" panel whose markup had already been removed.

   login.php loads theme.css first, so the tokens below are the same
   ones the application shell uses.
   ==================================================================== */

/* This page does not load Bootstrap, so it does not inherit the
   border-box reset the rest of the application gets from it. Without
   this the card's padding is added to its width and the layout
   overflows sideways. Scoped to the login body so the application
   shell is untouched. */
body.sk-login,
body.sk-login *,
body.sk-login *::before,
body.sk-login *::after {
    box-sizing: border-box;
}

html,
body.sk-login {
    height: 100%;
}

body.sk-login {
    background-color: var(--sk-bg);
    font-family: var(--sk-font);
    margin: 0;
    padding: 0;
}

.sk-login-split {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* --------------------------------------------------------------------
   Left - brand panel
   -------------------------------------------------------------------- */

.sk-login-brand {
    background: linear-gradient(150deg, #0F172A 0%, #17253F 55%, #0B3A47 100%);
    color: var(--sk-text-invert);
    flex: 0 0 50%;
    max-width: 50%;
    padding: 56px 60px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Industrial accents: a large soft ring and a fine grid, both drawn in
   CSS so the panel needs no extra image. */
.sk-login-brand::before {
    content: "";
    position: absolute;
    top: -160px;
    right: -140px;
    width: 460px;
    height: 460px;
    border: 1px solid rgba(2, 132, 199, 0.28);
    border-radius: 50%;
    box-shadow: inset 0 0 0 40px rgba(15, 118, 110, 0.10);
}

.sk-login-brand::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
    background-size: 46px 46px;
    pointer-events: none;
}

.sk-login-brand > * {
    position: relative;
    z-index: 1;
}

.sk-login-brand .sk-mark {
    align-items: center;
    display: flex;
    gap: 14px;
}

.sk-login-brand .sk-mark img {
    background: #FFFFFF;
    border-radius: 12px;
    height: 54px;
    padding: 5px;
    width: auto;
}

.sk-login-brand .sk-mark-name {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.sk-login-brand .sk-mark-sub {
    color: #94A3B8;
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sk-login-brand h1 {
    color: #FFFFFF;
    font-size: 2.35rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.18;
    margin: 0 0 18px 0;
    max-width: 15ch;
}

.sk-login-brand .sk-tagline {
    color: #CBD5E1;
    font-size: 1.02rem;
    line-height: 1.6;
    margin: 0;
    max-width: 44ch;
}

.sk-login-brand .sk-capabilities {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 30px 0 0 0;
    padding: 0;
}

.sk-login-brand .sk-capabilities li {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    color: #E2E8F0;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 6px 14px;
}

.sk-login-brand .sk-brand-foot {
    color: #64748B;
    font-size: 0.74rem;
}

/* --------------------------------------------------------------------
   Right - form panel
   -------------------------------------------------------------------- */

.sk-login-form {
    align-items: center;
    display: flex;
    flex: 0 0 50%;
    max-width: 50%;
    justify-content: center;
    padding: 40px 32px;
}

.sk-login-card {
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: 16px;
    box-shadow: 0 10px 34px rgba(15, 23, 42, 0.07);
    max-width: 420px;
    padding: 40px 38px;
    width: 100%;
}

.sk-login-card h2 {
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    margin: 0 0 6px 0;
}

.sk-login-card .sk-sub {
    color: var(--sk-text-muted);
    font-size: 0.9rem;
    margin-bottom: 26px;
}

.sk-login-card .sk-field {
    margin-bottom: 18px;
}

.sk-login-card label {
    color: var(--sk-text);
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 6px;
}

.sk-login-card .form-control {
    border: 1px solid var(--sk-border-strong);
    border-radius: 8px;
    font-size: 0.92rem;
    height: 46px;
    padding: 0 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
}

.sk-login-card .form-control:focus {
    border-color: var(--sk-blue);
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.14);
    outline: none;
}

/* Password field with the visibility toggle inside it */
.sk-password-wrap {
    position: relative;
}

.sk-password-wrap .form-control {
    padding-right: 44px;
}

.sk-password-toggle {
    background: none;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    height: 46px;
    line-height: 46px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 42px;
}

.sk-password-toggle:hover {
    color: var(--sk-text-muted);
}

.sk-password-toggle:focus {
    color: var(--sk-blue);
    outline: none;
}

/* Submit */
.sk-login-card .sk-submit {
    background-color: var(--sk-blue);
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 0.95rem;
    font-weight: 600;
    height: 46px;
    transition: background-color 0.15s ease;
    width: 100%;
}

.sk-login-card .sk-submit:hover {
    background-color: var(--sk-blue-dark);
}

.sk-login-card .sk-submit:focus {
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.22);
    outline: none;
}

.sk-login-card .sk-submit:disabled {
    opacity: 0.7;
}

/* Parsley's messages */
.sk-login-card .parsley-errors-list {
    color: var(--sk-alert-fg);
    font-size: 0.78rem;
    list-style: none;
    margin: 6px 0 0 0;
    padding: 0;
}

.sk-login-card .form-control.parsley-error {
    border-color: #FCA5A5;
}

/* The failed-login message. Auth.js injects Bootstrap's dismissible
   alert markup into #dvResponse, and this page does not load the
   AdminLTE sheet, so the few rules that markup needs live here. */
.sk-login-card .alert {
    border-radius: 8px;
    font-size: 0.86rem;
    margin-bottom: 18px;
    padding: 0.7rem 0.9rem;
    position: relative;
}

.sk-login-card .alert-dismissible {
    padding-right: 2.6rem;
}

.sk-login-card .alert-dismissible .close {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    opacity: 0.6;
    padding: 0.7rem 0.85rem;
    position: absolute;
    right: 0;
    top: 0;
}

.sk-login-card .alert-dismissible .close:hover {
    opacity: 1;
}

.sk-login-foot {
    border-top: 1px solid var(--sk-border);
    color: var(--sk-text-muted);
    font-size: 0.74rem;
    margin-top: 28px;
    padding-top: 18px;
    text-align: center;
}

.sk-login-foot a {
    color: var(--sk-text-muted);
    text-decoration: underline;
}

/* --------------------------------------------------------------------
   Narrow screens - the brand panel becomes a header band
   -------------------------------------------------------------------- */

@media (max-width: 991.98px) {

    .sk-login-split {
        display: block;
    }

    .sk-login-brand,
    .sk-login-form {
        flex: none;
        max-width: 100%;
    }

    .sk-login-brand {
        padding: 34px 28px 38px 28px;
        min-height: auto;
    }

    .sk-login-brand h1 {
        font-size: 1.7rem;
        max-width: none;
    }

    .sk-login-brand .sk-brand-foot,
    .sk-login-brand .sk-capabilities {
        display: none;
    }

    .sk-login-form {
        padding: 28px 20px 40px 20px;
    }

    .sk-login-card {
        box-shadow: none;
        padding: 30px 24px;
    }
}