/* ============================================================
   PNUT MAP
   AUTHENTICATION + ADMIN STYLES
   ============================================================ */


/* ============================================================
   GLOBAL
   ============================================================ */

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    min-height: 100%;
}


body {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #ffffff;

    background: #111111;
}


/* ============================================================
   LOGIN PAGE
   ============================================================ */

.login-page {
    min-height: 100vh;

    position: relative;

    overflow: hidden;
}


/* ============================================================
   WURM BACKGROUND
   ============================================================ */

.login-background {
    position: fixed;

    inset: 0;

    z-index: 0;

    background-image:
        url("../images/pnut-map-background.png");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;
}


/* ============================================================
   BACKGROUND OVERLAY
   ============================================================ */

.login-background-overlay {
    position: fixed;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(3, 8, 10, 0.10) 0%,
            rgba(3, 8, 10, 0.20) 45%,
            rgba(3, 8, 10, 0.42) 100%
        );
}


/* ============================================================
   LOGIN LAYOUT
   ============================================================ */

.login-layout {
    position: relative;

    z-index: 2;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    padding:
        80px 20px 30px 20px;
}


/* ============================================================
   LOGIN PANEL
   ============================================================ */

.login-panel {
    position: relative;

    width: 100%;

    max-width: 500px;

    padding:
        100px 42px 28px 42px;

    background:
        linear-gradient(
            180deg,
            rgba(10, 16, 17, 0.86),
            rgba(4, 8, 9, 0.91)
        );

    border:
        1px solid
        rgba(201, 153, 71, 0.95);

    border-radius: 16px;

    box-shadow:
        0 18px 60px
        rgba(0, 0, 0, 0.60);

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);
}


/* ============================================================
   PNUT LOGO
   ============================================================ */

.login-logo-frame {
    position: absolute;

    left: 50%;

    top: -72px;

    transform:
        translateX(-50%);

    width: 145px;

    height: 145px;

    padding: 6px;

    border-radius: 50%;

    background: #0c1112;

    border:
        3px solid #c99947;

    box-shadow:
        0 7px 24px
        rgba(0, 0, 0, 0.60);
}


.login-logo {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    border-radius: 50%;

    background: #ffffff;
}


/* ============================================================
   BRAND
   ============================================================ */

.login-brand {
    text-align: center;

    margin-bottom: 24px;
}


.login-brand-title {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        52px;

    line-height: 1;

    font-weight: normal;

    letter-spacing: 0.5px;

    color: #ecd39d;

    text-shadow:
        0 2px 6px
        rgba(0, 0, 0, 0.75);
}


/* ============================================================
   TITLE DIVIDER
   ============================================================ */

.login-divider {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    margin-top: 22px;
}


.login-divider span {
    display: block;

    height: 1px;

    width: 38%;

    max-width: 145px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #a97c35
        );
}


.login-divider span:last-child {
    background:
        linear-gradient(
            90deg,
            #a97c35,
            transparent
        );
}


.login-divider-diamond {
    width: 8px;

    height: 8px;

    border:
        2px solid #b98a3f;

    transform:
        rotate(45deg);
}


/* ============================================================
   FORM
   ============================================================ */

.login-form {
    width: 100%;
}


.login-field-label {
    display: block;

    margin:
        15px 0 7px 0;

    color: #d6bd89;

    font-size: 14px;

    font-weight: 600;
}


/* ============================================================
   INPUT WRAPPER
   ============================================================ */

.login-field {
    width: 100%;

    min-height: 54px;

    display: flex;

    align-items: center;

    overflow: hidden;

    border:
        1px solid
        rgba(183, 145, 76, 0.65);

    border-radius: 7px;

    background:
        rgba(3, 6, 7, 0.82);

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.login-field:focus-within {
    border-color: #d4a651;

    box-shadow:
        0 0 0 3px
        rgba(201, 153, 71, 0.12);
}


/* ============================================================
   INPUT ICON
   ============================================================ */

.login-field-icon {
    width: 48px;

    flex:
        0 0 48px;

    height: 52px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #c7ac77;

    background:
        rgba(0, 0, 0, 0.20);

    font-size: 18px;

    user-select: none;
}


/* ============================================================
   INPUT
   ============================================================ */

.login-input {
    min-width: 0;

    width: 100%;

    height: 52px;

    padding:
        0 12px;

    border: none;

    outline: none;

    background: transparent;

    color: #ffffff;

    caret-color: #d5b24c;

    font-size: 15px;
}


.login-input::placeholder {
    color: #8e9293;

    opacity: 1;
}


/* ============================================================
   FIX CHROME / EDGE AUTOFILL
   ============================================================ */

.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus,
.login-input:-webkit-autofill:active {
    -webkit-text-fill-color:
        #ffffff !important;

    caret-color:
        #ffffff !important;

    -webkit-box-shadow:
        0 0 0 1000px
        #080c0d
        inset !important;

    box-shadow:
        0 0 0 1000px
        #080c0d
        inset !important;

    transition:
        background-color
        9999s ease-out 0s;
}


/* ============================================================
   PASSWORD BUTTON
   ============================================================ */

.password-toggle {
    width: 48px;

    height: 52px;

    flex:
        0 0 48px;

    padding: 0;

    border: none;

    outline: none;

    background:
        rgba(0, 0, 0, 0.20);

    color: #a8a8a8;

    font-size: 17px;

    cursor: pointer;
}


.password-toggle:hover {
    color: #e1c58e;
}


/* ============================================================
   LOGIN BUTTON
   ============================================================ */

.login-button {
    width: 100%;

    min-height: 58px;

    margin-top: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    border:
        1px solid #deb86d;

    border-radius: 7px;

    background:
        linear-gradient(
            180deg,
            #ae803e,
            #75501f
        );

    color: #f7e5bd;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 21px;

    font-weight: bold;

    letter-spacing: 1px;

    cursor: pointer;

    box-shadow:
        inset 0 1px
        rgba(255, 255, 255, 0.18),
        0 4px 12px
        rgba(0, 0, 0, 0.35);

    transition:
        transform 0.12s ease,
        filter 0.12s ease;
}


.login-button:hover {
    filter: brightness(1.12);
}


.login-button:active {
    transform:
        translateY(1px);
}


.login-button-icon {
    font-family:
        Arial,
        sans-serif;

    font-size: 22px;
}


/* ============================================================
   SECURITY MESSAGE
   ============================================================ */

.login-security {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 18px;

    color: #c89c4a;

    font-size: 13px;

    text-align: center;
}


.login-security-icon {
    font-size: 15px;
}


/* ============================================================
   FLASH MESSAGES
   ============================================================ */

.flash-message {
    margin-bottom: 14px;

    padding:
        10px 12px;

    border-radius: 6px;

    background:
        rgba(115, 31, 31, 0.92);

    border:
        1px solid #a34c4c;

    color: #ffffff;

    font-size: 13px;

    text-align: center;
}


.flash-message.success {
    background:
        rgba(26, 88, 47, 0.92);

    border-color: #43895a;
}


/* ============================================================
   MOBILE / SMALL WINDOWS
   ============================================================ */

@media (
    max-width: 600px
) {

    .login-layout {
        align-items: flex-start;

        padding:
            92px 14px 22px 14px;
    }


    .login-panel {
        padding:
            82px 22px 22px 22px;

        border-radius: 12px;
    }


    .login-logo-frame {
        width: 125px;

        height: 125px;

        top: -62px;
    }


    .login-brand-title {
        font-size: 40px;
    }

}


@media (
    max-height: 720px
) and (
    min-width: 601px
) {

    .login-layout {
        padding:
            70px 20px 20px 20px;
    }


    .login-panel {
        padding:
            83px 38px 22px 38px;
    }


    .login-logo-frame {
        width: 125px;

        height: 125px;

        top: -62px;
    }


    .login-brand-title {
        font-size: 43px;
    }


    .login-divider {
        margin-top: 17px;
    }


    .login-brand {
        margin-bottom: 18px;
    }


    .login-field-label {
        margin-top: 11px;
    }


    .login-button {
        margin-top: 20px;
    }

}


/* ============================================================
   ADMIN PAGE
   ============================================================ */

.admin-page {
    width: 100%;

    max-width: 1000px;

    margin:
        40px auto;

    padding:
        0 20px 40px 20px;
}


.admin-header {
    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap: 20px;

    margin-bottom: 22px;
}


.admin-title {
    margin: 0;

    font-size: 30px;
}


.admin-back {
    color: #d5b24c;

    text-decoration: none;

    font-weight: bold;
}


.admin-back:hover {
    text-decoration: underline;
}


.admin-card {
    margin-bottom: 22px;

    padding: 22px;

    background: #202020;

    border:
        1px solid #444444;

    border-radius: 10px;
}


.admin-card-title {
    margin:
        0 0 16px 0;

    font-size: 20px;
}


/* ============================================================
   USER TABLE
   ============================================================ */

.user-table-wrapper {
    overflow-x: auto;
}


.user-table {
    width: 100%;

    border-collapse: collapse;
}


.user-table th,
.user-table td {
    padding:
        11px 12px;

    border-bottom:
        1px solid #3d3d3d;

    text-align: left;

    white-space: nowrap;
}


.user-table th {
    color: #aaaaaa;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}


.user-role {
    display: inline-block;

    padding:
        4px 8px;

    border-radius: 4px;

    background: #343434;

    font-size: 12px;

    text-transform: capitalize;
}


.user-active {
    color: #7fd78f;
}


.user-disabled {
    color: #dd7777;
}


/* ============================================================
   ADMIN FORM
   ============================================================ */

.auth-label {
    display: block;

    margin-top: 16px;

    color: #dddddd;

    font-size: 13px;

    font-weight: 600;
}


.auth-input,
.auth-select {
    width: 100%;

    margin-top: 7px;

    padding:
        12px 13px;

    border:
        1px solid #555555;

    border-radius: 6px;

    background: #111111;

    color: #ffffff;

    font-size: 16px;
}


.auth-input:focus,
.auth-select:focus {
    outline: none;

    border-color: #d5b24c;

    box-shadow:
        0 0 0 3px
        rgba(213, 178, 76, 0.12);
}


.auth-button {
    width: 100%;

    margin-top: 24px;

    padding: 12px;

    border: none;

    border-radius: 6px;

    background: #d5b24c;

    color: #151515;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;
}


.auth-button:hover {
    background: #e2c462;
}


.admin-form-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        10px 16px;
}


.admin-form-full {
    grid-column:
        1 / -1;
}


.brand-subtitle {
    margin-top: 7px;

    color: #999999;

    font-size: 13px;

    letter-spacing: 1px;

    text-transform: uppercase;
}


@media (
    max-width: 650px
) {

    .admin-form-grid {
        grid-template-columns:
            1fr;
    }


    .admin-form-full {
        grid-column: auto;
    }


    .admin-header {
        align-items: flex-start;

        flex-direction: column;
    }

}