@charset "UTF-8";

/*
 * Authentication styles.
 *
 * This is the only stylesheet under public/front/** that is still loaded, and its
 * only consumer is auth/layouts/includes/head.blade.php — the login screen, the two
 * OTP screens, and the three password-reset screens.
 *
 * ═══ Font ═══
 * Dana used to be defined here in three weights and set on body, while the whole
 * rest of the app runs on Estedad. One product, one typeface. The Estedad family is
 * defined in admin/css/logistic-theme.css, which the auth head loads immediately
 * before this file, so no @font-face is needed here and no new font is downloaded.
 * The three dana-fanum-*.woff files are left on disk — nothing references them now,
 * but deleting assets is not part of this change.
 *
 * ═══ What was removed ═══
 * Most of this file styled classes that appear in none of the six consuming views —
 * leftovers from the complaint site this app was scaffolded from:
 * .banner-complain · .complains-list · .complain-item* · .complain-title-page ·
 * .complain-dashboard · .complain-bg · .complaint-submit · .badge-status-complain ·
 * .new-card-complain · .card-complain-* · .title-card-complain · .title-card-desc ·
 * .form-complain · .banner-reverse-mb · .img-banner* · .shadow-moin · .form-submit ·
 * .info-content-reservation · .set-time-reservation · .icon-reserve · .info-status ·
 * .info-rules · .form-moin-check. All gone. What remains is what the auth views
 * actually use.
 *
 * ⚠️ Two of those removals are fixes, not tidying:
 *   · `.form-login-moin input { border: none !important }` — the login inputs had no
 *     visible edge at all, so there was nothing to say where to type. They now carry
 *     a --line border that turns --navy on focus.
 *   · `.auth-page` pointed at ../../assets/images/complain-banner.png, a complaint-site
 *     banner. The ground is now built from tokens instead: ink with a faint brass
 *     wash, no image file, no bytes downloaded. The PNG stays on disk, unreferenced.
 *
 * ═══ Colour ═══
 * No raw hex. Everything reads a token from admin/css/logistic-theme.css.
 */

body {
    font-family: var(--font-body), "segoe ui", tahoma, sans-serif;
}

/* ═════════ Ground ═════════ */

.authenticate,
.reservation-page {
    min-height: 100vh;
}

/* Ink ground with a very faint brass wash. A browser without color-mix() simply
   gets the ink, which is complete on its own. */
.auth-page {
    background-color: var(--ink-900);
    background-image: radial-gradient(120% 90% at 82% 0%,
                                      color-mix(in srgb, var(--brass) 14%, transparent),
                                      transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* ═════════ The card ═════════ */

.form-login-moin {
    box-shadow: var(--shadow-lift);
    border-radius: var(--r-lg);
    padding: var(--sp-48);
    margin: auto;
    max-height: 85vh;
    overflow-y: auto;
}

.auth-page .form-login-moin {
    background: var(--surface);
    /* The one explicit brass element on the page: a hairline on the card's top edge */
    border-top: 2px solid var(--brass);
}

/* .form-login-moin is already the card; the .card inside it was a white box on a
   white box. One box fewer. */
.auth-page .form-login-moin > .card {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.auth-page .form-login-moin .card-header {
    padding-block-end: var(--sp-24);
}

.font-large-1,
.form-content-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink-700);
}

/* ═════════ Inputs ═════════ */

.form-login-moin .form,
.form-login-moin .form-control {
    text-align: right;
}

/* 16px is the floor so iOS does not zoom the page on focus. */
.form-login-moin input {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink-700);
    font-size: 16px;
    min-block-size: 48px;
}

/* ⚠️ The icon inset belongs ONLY to the two login fields, which are the only ones
   wrapped in .has-icon-left. Putting it on `.form-login-moin input` instead looks
   right on the login page and breaks the OTP screen: the six .input-verification
   boxes are also inside .form-login-moin and are 60px wide, so 48px of start
   padding leaves 12px for the digit. */
.form-login-moin .has-icon-left input {
    padding-inline-start: var(--sp-48);
}

.form-login-moin input:focus {
    border-color: var(--navy);
    box-shadow: none;
}

.form-login-moin input::placeholder {
    color: var(--muted-s);
}

/* .has-icon-left / .form-control-position come from the source app and were never
   defined here, so the icon fell UNDER the field instead of sitting inside it.
   The fieldset is already position-relative (a Bootstrap class on the same tag). */
.form-login-moin .form-control-position {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    block-size: 48px;
    inline-size: var(--sp-48);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-s);
    pointer-events: none;
}

.form-login-moin .form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted-s);
}

/* The OTP screens put the phone field in an .input-group with an icon addon.
   The group carries the border so the two halves read as one control. */
.form-login-moin .input-group {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    min-block-size: 48px;
    background: var(--surface);
}

.form-login-moin .input-group input {
    border: 0;
    padding-inline-start: var(--sp-12);
}

.form-login-moin span.input-group-text {
    height: 100%;
    border: none;
    background: transparent;
    color: var(--muted-s);
}

.form-login-moin .fa-phone:before {
    color: var(--muted-s);
}

/* The per-digit verification boxes. LTR because a code is read left to right even
   in an RTL page. */
.input-verification {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink-700);
    width: 60px;
    height: 48px;
    margin: var(--sp-4);
    text-align: center;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.input-verification:focus {
    border-color: var(--navy);
    box-shadow: none;
}

.otp-input {
    direction: ltr;
}

.form-check .form-check-input {
    float: right;
    margin-left: var(--sp-24);
}

select {
    background-position: left !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: var(--sp-4) var(--sp-24) !important;
}

/* ═════════ Buttons ═════════ */

/* The same primary button as the panel, from the same brand token. */
.primary-btn-panel {
    background: var(--navy) !important;
    color: var(--surface);
    font-size: 15px;
    font-weight: 500;
    border: 1px solid var(--navy);
    border-radius: var(--r-sm);
    min-block-size: 48px;
    line-height: 1.5;
}

.primary-btn-panel:hover {
    background: var(--navy-d) !important;
    border-color: var(--navy-d);
    color: var(--surface);
}

/* The OTP submit. It used to be #2E82FF — a blue belonging to no palette. */
.btn-submit-moin {
    width: 100%;
    background: var(--navy);
    color: var(--surface);
    border: 1px solid var(--navy);
    border-radius: var(--r-sm);
    min-block-size: 48px;
    font-size: 15px;
    font-weight: 500;
}

.btn-submit-moin:hover {
    background: var(--navy-d);
    border-color: var(--navy-d);
    color: var(--surface);
}

.btn-submit-moin.disabled {
    width: 100%;
    background: var(--paper);
    color: var(--muted-s);
    border-color: var(--line);
}

/* ⚠️ Bootstrap 5 sets `outline: 0` explicitly on `.form-control:focus` and wins on
   specificity over the `input:focus-visible` floor in logistic-theme.css. Restored
   here. --brass-d, not --brass: brass on white is 2.65:1, under the 3:1 a focus
   indicator needs; --brass-d gives 4.33:1. */
.form-login-moin input:focus-visible,
.form-login-moin .btn:focus-visible,
.auth-page .card .form-control:focus-visible,
.auth-page .card .btn:focus-visible {
    outline: 2px solid var(--brass-d);
    outline-offset: 2px;
}

/* ═════════ Password-reset screens ═════════
   Plain Bootstrap — only .card and .form-control. They get the login card's edge and
   radius so all six auth screens read as one product. */

.auth-page .card {
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    /* Order matters: the border shorthand first, border-top after it. */
    border-top: 2px solid var(--brass);
}

.auth-page .card-header {
    background: transparent;
    border-block-end: 1px solid var(--line);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink-700);
}

.auth-page .card .form-control {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 16px;
    min-block-size: 48px;
    color: var(--ink-700);
}

.auth-page .card .form-label,
.auth-page .card .col-form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted-s);
}

.auth-page .card .btn-primary {
    background: var(--navy);
    border-color: var(--navy);
    border-radius: var(--r-sm);
    min-block-size: 48px;
}

.auth-page .card .btn-link,
.btn-link {
    color: var(--navy);
}

.auth-page .invalid-feedback,
.invalid-feedback {
    color: var(--ember);
}

/* ═════════ SweetAlert ═════════
   Login validation errors surface through it (auth/layouts/includes/script). */

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
    background-color: var(--navy) !important;
    border-radius: var(--r-sm) !important;
}

/* ═════════ Responsive ═════════ */

@media (max-width: 992px) {
    .form-login-moin {
        padding: var(--sp-48) var(--sp-32);
    }

    .form-content-title {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .form-login-moin {
        padding: var(--sp-32) var(--sp-24);
    }

    .form-content-title {
        font-size: 16px;
    }
}