/* ============================================================
   Admin Login Page
   ============================================================ */

body {
    background: #f0f2f5;
    min-height: 100vh;
}

#content.container {
    padding-top: 48px;
    padding-bottom: 48px;
}

/* ============ SHELL ============ */
.login-shell {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 960px;
    min-height: 560px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.04),
        0 20px 50px rgba(0, 0, 0, 0.12);
}

/* ============ LEFT PANEL (Hero) ============ */
.login-hero {
    flex: 1;
    background: linear-gradient(160deg, #1B1E24 0%, #22262E 40%, #2C3742 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 48px;
    position: relative;
    overflow: hidden;
}

/* Subtle geometric circles */
.login-hero::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(59, 159, 243, 0.06);
}

.login-hero::after {
    content: "";
    position: absolute;
    bottom: -120px;
    left: -60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(59, 159, 243, 0.04);
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 380px;
}

.hero-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(59, 159, 243, 0.12);
    border: 1px solid rgba(59, 159, 243, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
}

.hero-icon i {
    font-size: 22px;
    color: #3B9FF3;
}

/* [ACS-36255] THE TYPE ON THIS PAGE IS A STEP LARGER FROM HERE DOWN. Barry reported the login
   screen as too small on a Samsung Fold 7, both unfolded and on the cover screen (2026-08-14).
   The cause was not the layout: both responsive blocks at the foot of this file stack the card,
   cap it at 480px and hide the hero, and NEITHER touches a font size - so on a large dense screen
   the type stayed at its laptop values while everything around it shrank.

   IT IS px AND NOT rem, WHICH IS THE OPPOSITE OF THE USUAL ADVICE, and the reason is worth
   writing down because it will catch the next person on any legacy admin page.
   `public-admin/css/app.css` - which this page loads, and which the whole legacy admin is built on
   - sets `html{font-size:10px}`, the Bootstrap 3 era convention. So on this page 1rem is TEN
   pixels, not sixteen. The first version of this fix converted the scale to rem for the usual
   accessibility reasons and made every label SMALLER than the 13px it replaced; the screenshot is
   what caught it, and then grepping the SERVED stylesheet is what explained it. Do not reach for
   rem on a page that loads that bundle without checking the root first, and do not "fix" the root
   either - every rem in the legacy admin is calibrated to 10px.

   The form fields land on 16px deliberately. Under 16px, Android and iOS zoom the whole page when
   a field takes focus, and the reader then has to pinch back out to reach Sign in.

   Nothing here changes the layout, the colours or the spacing. */
.hero-title {
    font-size: 36px;
    line-height: 1.15;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
}

.hero-subtitle {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    max-width: 320px;
}

.hero-features {
    list-style: none;
    margin: 48px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hero-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
}

.hero-features li i {
    font-size: 14px;
    color: rgba(59, 159, 243, 0.6);
    width: 18px;
    text-align: center;
}

/* ============ RIGHT PANEL (Form) ============ */
.login-panel {
    flex: 1;
    background: #ffffff;
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* Ensure border-box on all children */
.login-panel *,
.login-panel *::before,
.login-panel *::after {
    box-sizing: border-box;
}

/* Override SmartAdmin .well */
.login-panel .well,
.login-panel .well.no-padding {
    border: 0;
    box-shadow: none;
    background: transparent;
    margin: 0;
    padding: 0;
}

/* Override SmartAdmin smart-form header */
.login-panel .smart-form header {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: -0.01em;
    text-align: left;
    border-bottom: none;
    padding: 0;
    margin: 0 0 6px 0;
    background: none;
}

.form-subtitle {
    font-size: 15px;
    color: #6b7280;
    margin: 0 0 32px 0;
}

/* Override SmartAdmin fieldset — use .smart-form for specificity */
.login-panel .smart-form fieldset {
    padding: 0;
    background: none;
    border: none;
}

.login-panel .smart-form fieldset section {
    margin-bottom: 20px;
}

/* Form labels */
/* 13px was the smallest thing on the page and the one Barry named. */
.login-panel .field-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

/* Input wrapper — icons inside inputs */
.input-wrapper {
    position: relative;
}

.input-wrapper i.field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #9ca3af;
    pointer-events: none;
    transition: color 0.2s;
    z-index: 2;
}

.login-panel .input-wrapper .form_field {
    width: 100%;
    max-width: 100%;
    padding: 12px 14px 12px 42px;
    /* 16px is a threshold, not a preference: under it, Android and iOS zoom the page when the
       field takes focus, and the reader then has to pinch back out to see the Sign in button.

       !important for the same reason the select block below carries it - a vendor rule outranks
       this selector. MEASURED, not assumed: without it the email field computed to 10px, the
       inherited root, while the labels beside it took their new size perfectly. That is the shape
       to watch for on this page - a rule that appears to work because its NEIGHBOURS moved. */
    font-size: 16px !important;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #ffffff;
    color: #1f2937;
    height: auto;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.login-panel .input-wrapper select.form_field {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.22 4.47a.75.75 0 0 1 1.06 0L6 7.19l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L2.22 5.53a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    /* A vendor select rule (Bootstrap based) outranks this selector and forces the select to its own
       height, border-radius, border colour and padding, so next to the text inputs the Role select
       looked shorter, squarer and a slightly different grey, and its option text sat on the users icon.
       Restate the base .form_field metrics with !important so the select matches the inputs beside it:
       the chevron keeps the extra right inset and the icon the left inset. The logical padding property
       is set too, in case the vendor rule uses that form. */
    height: auto !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 42px !important;
    padding-inline-start: 42px !important;
    padding-right: 36px !important;
    border-radius: 10px !important;
    border-color: #d1d5db !important;
    line-height: inherit !important;
}

.login-panel .input-wrapper select.form_field:focus {
    /* Match the text inputs' focus ring; the resting border-color above is !important, so the base
       focus rule (lower specificity, no !important) cannot recolour the select on its own. */
    border-color: #3B9FF3 !important;
}

.login-panel .input-wrapper .form_field:focus {
    border-color: #3B9FF3;
    box-shadow: 0 0 0 3px rgba(59, 159, 243, 0.12);
}

/* Icon color change on focus (via sibling selector) */
.login-panel .input-wrapper .form_field:focus ~ i.field-icon {
    color: #3B9FF3;
}

.login-panel .input-wrapper .form_field::placeholder {
    color: #9ca3af;
}

/* ============ ALERTS ============ */
.login-panel .alert {
    margin-bottom: 20px;
    border-radius: 10px;
    font-size: 15px;
    padding: 12px 16px;
}

/* ============ FOOTER ============ */
/* Override SmartAdmin .smart-form footer — needs high specificity */
.login-panel .smart-form footer {
    background: none;
    border-top: none;
    padding: 0;
    margin: 0;
}

.login-panel .smart-form footer:after {
    display: none;
}

/* Override SmartAdmin .smart-form footer .btn — it forces float:right + height:31px */
.login-panel .smart-form footer .btn,
#login-button {
    float: none;
    display: block;
    width: 100%;
    height: auto;
    padding: 13px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background: #3B9FF3;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
    margin: 4px 0 0;
    line-height: 1.4;
}

#login-button:hover {
    background: #2b8de0;
    box-shadow: 0 4px 12px rgba(59, 159, 243, 0.3);
}

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

.form-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

.security-note {
    font-size: 13px;
    color: #9ca3af;
    cursor: help;
}

.security-note i {
    font-size: 12px;
    margin-right: 3px;
}

#password-reset {
    font-size: 14px;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s;
}

#password-reset:hover {
    color: #3B9FF3;
    text-decoration: none;
}

/* ============ SUPPORT LINKS ============ */
.support-footer {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 24px 0 0;
    padding: 0;
    border: none;
    text-align: center;
}

.support-footer a {
    font-size: 13px;
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.2s;
}

.support-footer a:hover {
    color: #6b7280;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 991px) {
    #content.container {
        padding-top: 28px;
        padding-bottom: 28px;
    }

    .login-shell {
        flex-direction: column;
        max-width: 480px;
        min-height: auto;
    }

    .login-hero {
        padding: 36px 32px;
    }

    .hero-title {
        font-size: 30px;
    }

    .hero-features {
        display: none;
    }

    .login-panel {
        padding: 32px 28px;
    }
}

@media (max-width: 576px) {
    .login-hero {
        display: none;
    }

    .login-panel .smart-form header {
        text-align: center;
    }

    .form-subtitle {
        text-align: center;
    }

    /* [ACS-36255] The one place this file now DOES change type by breakpoint, and it is the
       narrowest one - a folded phone's cover screen, which is where Barry read it second. With the
       hero gone the panel is the whole page, so it can afford another step. Everything above this
       block is unchanged in proportion; these are the same values one notch up. */
    .login-panel .field-label {
        font-size: 16px;
    }

    .login-panel .input-wrapper .form_field {
        font-size: 17px !important;
    }

    .login-panel .smart-form header {
        font-size: 26px;
    }

    .form-subtitle {
        font-size: 16px;
    }

    #login-button {
        font-size: 17px;
    }

    #password-reset,
    .security-note {
        font-size: 14px;
    }
}