/* ============================================================================
   Authentication screens — maroon (ERP palette)

   Covers both sign-in stacks: staff (resources/views/auth/*) and applicant
   (resources/views/web/applicant/*). They share one shell so the institute
   presents a single face, but they never link to one another — a person who
   lands on the wrong one is told what the page is for, not handed a door to
   the other portal.

   Deliberately self-contained. Every element carries an `ath-` class of its
   own rather than a Bootstrap one, so the 350 KB admin theme loaded above it
   cannot reach in and restyle a login form by accident.
   ========================================================================== */

.ath-body {
    --ath-m: #a6303a;
    --ath-m-dark: #8f2830;
    --ath-m-deep: #6d1f27;

    --ath-ink: #2b2521;
    --ath-ink-2: #3b4252;
    --ath-ink-3: #6b7484;
    --ath-ink-4: #8a93a6;

    --ath-line: #d9dee8;
    --ath-line-soft: #e8ebf1;

    --ath-ok: #1c7a45;   --ath-ok-bg: #e8f6ee;   --ath-ok-line: #bfe3cd;
    --ath-bad: #a1201a;  --ath-bad-bg: #fdecec;  --ath-bad-line: #f3c9c6;

    margin: 0;
    background: #f4f1f2;
    color: var(--ath-ink);
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------------
   1. Shell — brand on the left, the form on the right
   ------------------------------------------------------------------------- */
.ath-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
}

/* ---------------------------------------------------------------------------
   2. Brand panel

   Typographic rather than decorative: the institute's name is the strongest
   mark of authenticity a sign-in page can carry, so it is set large and left
   to stand on its own.
   ------------------------------------------------------------------------- */
.ath-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 64px;
    color: #fff;
    background: linear-gradient(155deg, #6d1f27 0%, #8f2830 52%, #a6303a 100%);
}

/* ── Staff administration: institute maroon ───────────────────────────────
   The colour staff see all day across the admin screens, so the sign-in
   belongs to the same portal it opens. */
.ath-brand.is-staff {
    background: linear-gradient(155deg, #6d1f27 0%, #8f2830 52%, #a6303a 100%);
}

/* ── Applicant portal: navy, edged in maroon ──────────────────────────────
   A colour in its own right, not a grey. The two portals must not be mistaken
   for one another, and the maroon edge keeps the institute in the frame. */
.ath-brand.is-applicant {
    background: linear-gradient(155deg, #0e2440 0%, #1a3a63 50%, #0b1c33 100%);
    border-top: 4px solid #a6303a;
}
.ath-brand.is-applicant:before {
    background: radial-gradient(circle, rgba(120, 170, 235, .20) 0%, rgba(120, 170, 235, 0) 68%);
}
.ath-brand.is-applicant:after {
    background: radial-gradient(circle, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, 0) 70%);
}
.ath-brand.is-applicant .ath-rule { background: #a6303a; width: 54px; height: 3px; }
.ath-brand.is-applicant .ath-mark { box-shadow: 0 6px 20px rgba(0, 0, 0, .40); }
.ath-brand.is-applicant .ath-org { color: rgba(255, 255, 255, .92); }
.ath-brand.is-applicant .ath-notes { border-top-color: rgba(255, 255, 255, .14); }
/* Two very soft highlights. They read as depth, never as pattern. */
.ath-brand:before,
.ath-brand:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.ath-brand:before {
    width: 520px; height: 520px;
    top: -190px; right: -170px;
    background: radial-gradient(circle, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 68%);
}
.ath-brand:after {
    width: 420px; height: 420px;
    bottom: -160px; left: -120px;
    background: radial-gradient(circle, rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 70%);
}
/* A very fine diagonal ruling. At this opacity it is felt rather than seen —
   it stops the flat gradient reading as a plastic panel. */
.ath-brand-tex {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, .05) 0px, rgba(255, 255, 255, .05) 1px,
        rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 15px
    );
}

.ath-brand-inner { position: relative; z-index: 1; max-width: 470px; }

/* Logo plate.

   No fixed width or height: the institute lockup is a wide horizontal one, and
   a square plate boxed it into a corner of its own frame. The plate now hugs
   whatever it is given — height comes from the image, width from its aspect —
   so a wide mark reads at full size and a square one would still sit right. */
.ath-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    margin-bottom: 30px;
    padding: 16px 22px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 26px rgba(50, 10, 15, .30);
}
.ath-mark img {
    display: block;
    height: 87px;          /* 1.5× — the plate hugs the image, so width follows */
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* The institute's name, set as the line of record */
.ath-org {
    margin: 0 0 10px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .95);
}
.ath-portal {
    margin: 0 0 16px;
    font-size: 33px;
    line-height: 1.18;
    font-weight: 300;
    letter-spacing: -.015em;
    color: #fff;
}
.ath-portal b { font-weight: 700; }

.ath-rule {
    width: 46px; height: 2px;
    margin: 0 0 20px;
    background: rgba(255, 255, 255, .45);
    border-radius: 2px;
}
.ath-lede {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .88);
}
.ath-notes {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: 12.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .74);
}
.ath-notes p { margin: 0 0 8px; }
.ath-notes p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   3. Form panel
   ------------------------------------------------------------------------- */
.ath-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 28px;
}
.ath-card {
    width: 100%;
    max-width: 424px;
}
.ath-logo {
    display: block;
    height: 62px;
    width: auto;
    margin: 0 0 26px;
}

.ath-title {
    margin: 0 0 8px;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ath-ink);
}
.ath-sub {
    margin: 0 0 26px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--ath-ink-3);
}

/* ---------------------------------------------------------------------------
   4. Fields

   Label above, hint below. The placeholder is never a repeat of the label —
   it says which value is wanted, which is the question people actually have
   on a portal where one person may hold more than one email address.
   ------------------------------------------------------------------------- */
.ath-field { margin-bottom: 18px; }

.ath-label {
    display: block;
    margin-bottom: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ath-ink-3);
}
.ath-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ath-ink);
    background: #fff;
    border: 1px solid var(--ath-line);
    border-radius: 10px;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.ath-input::placeholder { color: var(--ath-ink-4); font-size: 13px; }
.ath-input:focus {
    outline: none;
    border-color: var(--ath-m);
    box-shadow: 0 0 0 3px rgba(166, 48, 58, .13);
}
.ath-input.is-invalid { border-color: var(--ath-bad); background: #fffafa; }
.ath-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .12); }

.ath-hint {
    margin: 7px 0 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--ath-ink-4);
}
.ath-error {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ath-bad);
}

/* Reveal control, inside the password box */
.ath-pw { position: relative; }
.ath-pw .ath-input { padding-right: 60px; }
.ath-pw-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    padding: 6px 9px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ath-m-dark);
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}
.ath-pw-toggle:hover { background: #f6e4e7; }

/* ---------------------------------------------------------------------------
   5. Remember me
   ------------------------------------------------------------------------- */
.ath-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 22px;
    font-size: 13px;
    color: var(--ath-ink-2);
    cursor: pointer;
}
.ath-check input {
    width: 15px; height: 15px;
    margin: 2px 0 0;
    accent-color: var(--ath-m);
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   6. Buttons and footer links
   ------------------------------------------------------------------------- */
.ath-btn {
    display: block;
    width: 100%;
    padding: 13px 16px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: linear-gradient(135deg, var(--ath-m) 0%, var(--ath-m-dark) 100%);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: filter .14s ease, box-shadow .14s ease;
    box-shadow: 0 2px 8px rgba(109, 31, 39, .22);
}
.ath-btn:hover { filter: brightness(1.06); box-shadow: 0 4px 14px rgba(109, 31, 39, .28); }
.ath-btn:active { filter: brightness(.95); }

.ath-foot {
    margin: 22px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--ath-line-soft);
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--ath-ink-3);
}
.ath-foot p { margin: 0 0 7px; }
.ath-foot p:last-child { margin-bottom: 0; }
.ath-foot a {
    color: var(--ath-m-dark);
    font-weight: 600;
    text-decoration: none;
}
.ath-foot a:hover { color: var(--ath-m); text-decoration: underline; }

/* Sits under the card, not inside it — it belongs to the page, not the form.
   Kept on the form side so it survives the brand panel collapsing on a phone. */
.ath-legal {
    max-width: 424px;
    margin: 22px auto 0;
    font-size: 11.5px;
    line-height: 1.7;
    text-align: center;
    color: var(--ath-ink-4);
}
.ath-legal a { color: var(--ath-ink-3); text-decoration: none; }
.ath-legal a:hover { text-decoration: underline; }

/* A single, quiet way back. Used on every page that is not a sign-in page. */
.ath-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 22px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ath-ink-3);
    text-decoration: none;
}
.ath-back:hover { color: var(--ath-m-dark); }
.ath-back i { font-size: 10px; }

/* ---------------------------------------------------------------------------
   7. Alerts
   ------------------------------------------------------------------------- */
.ath-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.6;
    border: 1px solid;
    border-radius: 10px;
}
.ath-alert i { margin-top: 2px; font-size: 13px; flex-shrink: 0; }
.ath-alert.is-ok  { color: var(--ath-ok);  background: var(--ath-ok-bg);  border-color: var(--ath-ok-line); }
.ath-alert.is-bad { color: var(--ath-bad); background: var(--ath-bad-bg); border-color: var(--ath-bad-line); }

/* ---------------------------------------------------------------------------
   8. Narrow screens

   The brand panel collapses to a header band rather than disappearing: on a
   phone it is the only thing confirming which institute is asking for the
   password.
   ------------------------------------------------------------------------- */
@media (max-width: 950px) {
    .ath-shell { grid-template-columns: 1fr; min-height: 100%; }
    .ath-brand { padding: 30px 28px 28px; }
    .ath-brand-inner { max-width: none; }
    .ath-mark { margin-bottom: 20px; padding: 12px 16px; border-radius: 12px; }
    .ath-mark img { height: 63px; }
    .ath-org { font-size: 15px; margin-bottom: 7px; }
    .ath-portal { font-size: 24px; margin-bottom: 12px; }
    .ath-rule { margin-bottom: 14px; }
    .ath-lede { font-size: 13.5px; }
    .ath-notes { display: none; }
    .ath-panel { padding: 34px 22px 48px; }
}
@media (max-width: 420px) {
    .ath-panel { padding: 28px 16px 40px; }
    .ath-title { font-size: 20px; }
}