/* ======================================================================
   UCC REGISTRAR LOGIN — MAINTAINABLE STYLESHEET
   ----------------------------------------------------------------------
   QUICK EDIT GUIDE
   1. COLORS / SIZES        -> :root
   2. WHOLE PAGE POSITION   -> .page-shell
   3. LOGIN CARD SIZE       -> .login-card / .login-content
   4. FORM SIZES            -> FORM CONTROLS section
   5. RIGHT SIDE            -> BRAND PANEL section
   6. FEATURE CARDS         -> FEATURE CARDS section
   7. RESPONSIVE BEHAVIOR   -> bottom of this file
   ====================================================================== */

/* ========================= 1. DESIGN TOKENS ========================== */
:root {
  /* Colors */
  --green: #175c28;
  --green-medium: #34723d;
  --green-icon-bg: rgba(20, 93, 40, .70);
  --orange: #E89400;
  background: rgba(232, 148, 0, 0.5);
  --text: #202020;
  --muted: #747474;
  --line: #d9d9d9;
  --white: #ffffff;

  /* PAGE SIZING — easiest place to resize the desktop composition */
  --page-max-width: 1510px;
  --page-side-gap: 52px;
  --column-gap: 42px;

  /* LOGIN CARD SIZING */
  --login-width: 650px;
  --login-radius: 46px;
  --login-pad-x: 64px;
  --login-pad-y: 46px;

  /* FORM SIZING */
  --field-height: 52px;
  --field-radius: 9px;

  /* Shadows */
  --card-shadow: 0 16px 36px rgba(0, 0, 0, .20);
  --small-shadow: 0 3px 7px rgba(0, 0, 0, .18);

}

/* ========================= 2. GLOBAL RESET =========================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; }
body { font-family: Poppins, Arial, sans-serif; color: var(--text); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }

/* BOLD/DIRECT ICON STYLE — change 2.4 to 2.8 if you want even bolder */
svg:not(.svg-library) {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ========================= 3. PAGE / BACKGROUND ====================== */
.login-page {
    position: relative;
    width: 100%;
    min-height: 100svh;

    background:
        url('../assets/ucc-campus-bg.png')
        center / cover no-repeat;

    overflow-x: hidden;
}

.page-overlay { position: absolute; inset: 0; background: rgba(18, 91, 39, .1); }

/* MOVE / RESIZE THE WHOLE DESIGN HERE */
.page-shell {
    position: relative;
    z-index: 1;

    width: min(
        var(--page-max-width),
        calc(100% - var(--page-side-gap) * 2)
    );

    min-height: 100svh;

    margin: 0 auto;

    display: grid;
    grid-template-columns: var(--login-width) minmax(0, 1fr);
    gap: var(--column-gap);

    align-items: center;
    justify-content: center;

    padding: 34px 0;

    /* Same visual position as margin-right: 100px */
    transform: translateX(clamp(0px, calc((100vw - 1200px) * 0.125), 90px));
}

/* ========================= 4. LOGIN CARD ============================= */
.login-card {
  width: 100%;
  background: var(--white);
  border-radius: var(--login-radius);
  box-shadow: var(--card-shadow);
}
.login-content { padding: var(--login-pad-y) var(--login-pad-x) 34px; }
.login-card h1 { margin: 0; font-size: 38px; line-height: 1.1; font-weight: 500; }
.login-subtitle { margin: 5px 0 14px; color: #6f6f6f; font-size: 17px; }

/* Account type selector — compact card style */
.role-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  height: auto;
  margin: 14px 0 16px;
  overflow: visible;
  background: transparent;
  border-radius: 0;
}
.role-tab {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid #dedede;
  border-radius: 12px;
  background: #fafafa;
  color: #5f5f5f;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .06);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.role-tab:hover {
  border-color: #b7cfbb;
  background: #f7fbf7;
  transform: translateY(-1px);
}
.role-tab.active {
  background: #eef8ef;
  color: var(--green);
  border: 1.5px solid var(--green-medium);
  border-radius: 12px;
  box-shadow: 0 3px 9px rgba(23, 92, 40, .10);
}
.role-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ececec;
  color: #666;
}
.role-tab.active .role-icon {
  background: #d8eedb;
  color: var(--green);
}
.role-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.role-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.role-copy strong { font-size: 15px; line-height: 1.2; font-weight: 700; color: inherit; }
.role-copy small { font-size: 10.5px; line-height: 1.25; font-weight: 400; color: #777; }
.role-tab.active .role-copy small { color: #617d66; }

/* ========================= 5. FORM CONTROLS ========================== */
.field-label { display: block; margin: 8px 0 3px; color: #666; font-size: 15px; }
.form-field {
  height: var(--field-height);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 15px;
  background: #fff;
  border: 1px solid #7c7c7c;
  border-radius: var(--field-radius);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .08);
}
.form-field:focus-within { border-color: var(--green); outline: 2px solid rgba(23, 92, 40, .13); }
.field-icon { flex: 0 0 20px; width: 20px; height: 20px; color: #979797; }
.form-field input, .form-field select {
  width: 100%; height: 100%; min-width: 0; border: 0; outline: 0; background: transparent;
  color: #333; font-size: 16px;
}
.form-field input::placeholder { color: #a4a4a4; }
.form-field select {
  appearance: none;
  color: #999;
  cursor: pointer;
}

/* Campus dropdown arrow
   The arrow is visual only. pointer-events:none makes clicks pass through
   to the real <select>, so clicking the arrow opens the dropdown too. */
.select-field {
  position: relative;
  cursor: pointer;
}

.select-field select {
  cursor: pointer;
  padding-right: 34px;
}

.select-arrow {
    position: absolute !important;

    right: 14px;
    top: 50% !important;

    width: 14px;
    height: 14px;

    transform: translateY(-50%) !important;

    pointer-events: none;

    border: 0 !important;
    background: none !important;

    z-index: 2;
}

.select-arrow svg {
    display: block;

    width: 100%;
    height: 100%;

    fill: none;
    stroke: #777;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   LOGIN CAMPUS DROPDOWN MENU
   MATCH MY REQUESTS DROPDOWN
   ========================================================= */

.select-field select {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #696969;
}

.select-field select option {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #696969;
    background: #ffffff;
}

.icon-button { display: grid; place-items: center; border: 0; background: none; padding: 5px; color: #8b8b8b; }
.icon-button svg { width: 18px; height: 18px; }
.forgot-row { text-align: right; margin: 8px 0 23px; }
.text-link { border: 0; background: none; padding: 0; color: var(--orange); font-size: 14px; font-weight: 600; }
.form-message { min-height: 0; margin: 0; color: #c33; font-size: 12px; }

.signin-button {
  width: 100%; height: 58px; border: 0; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--orange); color: #fff; font-size: 20px; font-weight: 700;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .18);

  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease;
}

.signin-button:hover { filter: brightness(.97); }
.sign-button:active { transform: scale(0.99); }
.signin-button svg { width: 24px; height: 24px; stroke-width: 2.6; }
.divider { display: flex; align-items: center; gap: 17px; margin: 12px 0 8px; }
.divider span { flex: 1; height: 1px; background: var(--line); }
.divider em { color: #999; font-size: 13px; font-style: normal; }
.create-account { margin: 0; text-align: center; color: #777; font-size: 14px; }
.create-account a { color: var(--orange); text-decoration: none; }
.login-help { margin: 30px 0 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: #aaa; font-size: 13px; }
.login-help svg { width: 22px; height: 22px; color: #99c99e; stroke-width: 2.5; }

/* ========================= 6. BRAND PANEL ============================ */
.brand-panel { min-width: 0; max-width: 650px; color: #fff; padding: 4px 0; }
.brand-header { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.logo-box {
  width: 76px; height: 76px; flex: 0 0 76px; overflow: hidden; display: grid; place-items: center;
  border-radius: 17px; background: rgba(46, 137, 57, .84); box-shadow: var(--small-shadow);
}
.logo-box img { width: 80%; height: 80%; object-fit: contain; padding: 4px; margin-top: 2px; }
.brand-header h2 { margin: 0; font-size: 19px; line-height: 1.15; font-weight: 700; }
.brand-header p { margin: 2px 0 0; font-size: 14px; }
.portal-pill { display: inline-block; padding: 2px 10px; border: 1px solid var(--orange); border-radius: 16px; color: #ffb000; font-size: 12px; font-weight: 600; }
.brand-panel h3 { margin: 7px 0 10px; font-size: 46px; line-height: 1.12; font-weight: 600; }
.brand-panel h3 strong { color: var(--orange); }
.brand-lead { max-width: 500px; margin: 0 0 24px; font-size: 16px; line-height: 1.45; }

/* ========================= 7. FEATURE CARDS ========================== */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.feature-card {
  min-width: 0; min-height: 150px; padding: 13px 11px;
  background: rgba(115, 175, 117, .34); border-radius: 17px; box-shadow: var(--small-shadow);
}
/* IMPORTANT: icon is DIRECTLY CONNECTED to title here */
.feature-title { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 8px;}
.feature-icon {
  width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center;
  border-radius: 50%; background: var(--green-icon-bg); color: #ffb000;
}
.feature-icon svg { width: 20px; height: 20px; stroke-width: 2.7; }
.feature-card h4 { margin: 0; font-size: 12px; line-height: 1; font-weight: 700; white-space: nowrap; }
.feature-card p { margin: 0; font-size: 10.5px; line-height: 1.25; margin-top: 11px; }

/* ========================= 8. FOOTER ================================= */
.brand-footer { margin-top: 24px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.72); font-size: 10px; }
.brand-footer p { margin: 3px 0; }
.footer-actions { display: flex; align-items: center; gap: 14px; margin-bottom: 13px; }
.footer-link { display: flex; align-items: center; gap: 9px; padding: 5px 2px; color: #fff; text-decoration: none; border-radius: 6px; transition: opacity .18s ease, transform .18s ease; }
.footer-link:hover { opacity: .82; transform: translateY(-1px); }
.footer-link svg { width: 22px; height: 22px; flex: 0 0 22px; stroke-width: 2; }
.footer-link span { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.footer-link strong { font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.footer-link small { color: rgba(255,255,255,.64); font-size: 8.5px; font-weight: 400; white-space: nowrap; }
.footer-action-divider { width: 1px; height: 34px; background: rgba(255,255,255,.28); }
.footer-email svg { width: 14px; height: 14px; stroke-width: 2.5; }
.footer-email { display: flex; align-items: center; gap: 5px; }

/* ======================================================================
   9. RESPONSIVE RULES
   Desktop reference = 1920 × 1080.
   Shrinks both sections on smaller desktop/laptop screens.
   At <= 1000px, only the login form is shown.
   ====================================================================== */

/* =========================================================
   LARGE DESKTOP
   Example: 1920×1080 at 100% scaling
   ========================================================= */

@media (min-width: 1601px) {

    .page-shell {
        left: 10px;
    }
}

/* =========================================================
   MEDIUM DESKTOP / 125% DISPLAY SCALING
   Keep width — compress HEIGHT like create-account.css
   ========================================================= */

   @media (min-width: 1221px) and (max-width: 1600px) {

    :root {
        --page-max-width: 1280px;
        --page-side-gap: 32px;

        --login-width: 540px;
        --login-pad-x: 46px;
        --login-pad-y: 18px;

        --column-gap: 34px;
        --field-height: 40px;
    }


    /* =====================================================
       WHOLE PAGE
       ===================================================== */

    .page-shell {
        left: 50px;
        padding: 14px 0;
    }


    /* =====================================================
       WHITE LOGIN CARD
       ===================================================== */

    .login-card {
        width: var(--login-width);
    }

    .login-content {
        padding:
            var(--login-pad-y)
            var(--login-pad-x)
            16px;
    }


    /* =====================================================
       LOGIN HEADER
       ===================================================== */

    .login-card h1 {
        margin: 0;
        font-size: 30px;
        line-height: 1.1;
    }

    .login-subtitle {
        margin: 4px 0 8px;
        font-size: 13px;
        line-height: 1.25;
    }


    /* =====================================================
       STUDENT / STAFF
       ===================================================== */

    .role-tabs {
        margin: 7px 0 10px;
        gap: 10px;
    }

    .role-tab {
        min-height: 52px;
        height: 52px;
        padding: 6px 10px;
        gap: 8px;
    }

    .role-icon {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
    }

    .role-icon svg {
        width: 18px;
        height: 18px;
    }

    .role-copy {
        gap: 1px;
    }

    .role-copy strong {
        font-size: 12px;
        line-height: 1.15;
    }

    .role-copy small {
        font-size: 9px;
        line-height: 1.2;
    }


    /* =====================================================
       FIELD LABELS
       Campus / ID Number / Password
       ===================================================== */

    .field-label {
        margin-top: 7px;
        margin-bottom: 3px;

        font-size: 11px;
        line-height: 1.15;

        gap: 5px;
    }

    .field-label svg {
        width: 13px;
        height: 13px;
        flex: 0 0 13px;
    }


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

    .form-field {
        height: var(--field-height);
        min-height: var(--field-height);

        padding-left: 12px;
        padding-right: 12px;

        gap: 8px;
    }


    /* =====================================================
       TEXT INSIDE FIELDS
       Select Campus
       Enter your ID number
       Enter your password
       ===================================================== */

    .form-field input,
    .form-field select,
    .select-value {
        font-size: 12px;
        line-height: 1.2;
    }

    .form-field input::placeholder {
        font-size: 12px;
    }


    /* =====================================================
       FIELD ICONS
       ===================================================== */

    .field-icon {
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
    }

    .field-icon svg {
        width: 15px;
        height: 15px;
    }


    /* =====================================================
       CAMPUS DROPDOWN ARROW
       ===================================================== */

    .select-chevron {
        width: 14px;
        height: 14px;
    }


    /* =====================================================
       ID HELPER TEXT
       ===================================================== */

    .field-helper {
        margin: 3px 0 2px;

        font-size: 9px;
        line-height: 1.2;
    }


    /* =====================================================
       PASSWORD EYE
       ===================================================== */

    .icon-button {
        width: 30px;
        min-width: 30px;
        height: 30px;

        margin-right: -4px;
    }

    .icon-button svg {
        width: 14px;
        height: 14px;
    }


    /* =====================================================
       FORGOT PASSWORD
       ===================================================== */

    .forgot-row {
        margin: 5px 0 10px;
    }

    .text-link {
        font-size: 11px;
    }


    /* =====================================================
       SIGN IN BUTTON
       ===================================================== */

    .signin-button {
        height: 44px;
        font-size: 16px;
    }

    .signin-button svg {
        width: 18px;
        height: 18px;
    }

 

  /* =====================================================
       successMessage POP UP Staff account submitted successfully
       ===================================================== */


    .success-message {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #eaf7ee;
    color: #198754;
    font-size: 14px;
    font-weight: 500;
}

    /* =====================================================
       OR DIVIDER
       ===================================================== */

    .divider {
        margin: 7px 0 4px;
        gap: 12px;
    }

    .divider em {
        font-size: 10px;
    }


    /* =====================================================
       CREATE ACCOUNT
       ===================================================== */

    .create-account {
        margin: 0;

        font-size: 11px;
        line-height: 1.2;
    }


    /* =====================================================
       LOGIN HELP
       ===================================================== */

    .login-help {
        margin: 16px 0 0;

        padding: 8px 0 8px 11px;

        gap: 9px;
    }

    .login-help svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

    .login-help strong {
        font-size: 10px;
        line-height: 1.2;
    }

    .login-help small {
        font-size: 9px;
        line-height: 1.3;
    }


    /* =====================================================
       RIGHT BRANDING PANEL
       ===================================================== */

    .brand-panel {
        max-width: 590px;
        padding-top: 22px;
    }

    .brand-header {
        margin-bottom: 11px;
        gap: 11px;
    }

    .logo-box {
        width: 62px;
        height: 62px;
        flex: 0 0 62px;

        border-radius: 15px;
    }

    .logo-box img {
        max-width: 46px;
        max-height: 46px;
    }

    .brand-header h2 {
        font-size: 17px;
        line-height: 1.15;
    }

    .brand-header p {
        font-size: 11px;
    }


    /* =====================================================
       REGISTRAR PORTAL BADGE
       ===================================================== */

    .portal-pill {
        padding: 3px 9px;

        font-size: 9px;
        line-height: 1.2;
    }


    /* =====================================================
       HERO TITLE
       ===================================================== */

    .brand-panel h3 {
        margin: 6px 0 7px;

        font-size: 33px;
        line-height: 1.08;
    }

    .brand-lead {
        margin-bottom: 13px;

        font-size: 12px;
        line-height: 1.35;
    }


    /* =====================================================
       FEATURE CARDS
       ===================================================== */

    .feature-grid {
        gap: 9px;
    }

    .feature-card {
        min-height: 96px;

        padding: 10px;

        border-radius: 16px;
    }

    .feature-title {
        gap: 6px;
        margin-bottom: 5px;
    }

    .feature-icon {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
    }

    .feature-icon svg {
        width: 16px;
        height: 16px;
    }

    .feature-card h4 {
        font-size: 9px;
        line-height: 1.2;
    }

    .feature-card p {
        margin-top: 4px;

        font-size: 8px;
        line-height: 1.25;
    }


    /* =====================================================
       RIGHT FOOTER
       ===================================================== */

    .brand-footer {
        margin-top: 11px;
        padding-top: 9px;

        font-size: 8px;
    }

    .footer-actions {
        margin-bottom: 8px;
    }

    .footer-link {
        gap: 7px;
        padding: 3px 2px;
    }

    .footer-link svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

    .footer-link strong {
        font-size: 8px;
        line-height: 1.2;
    }

    .footer-link small {
        font-size: 7px;
        line-height: 1.2;
    }

    .footer-action-divider {
        height: 28px;
    }
}

/* =========================================================
   SMALL LAPTOP
   Keep both sides visible while there is enough room
   ========================================================= */

@media (min-width: 1001px) and (max-width: 1220px) {

    :root {
        --page-max-width: 1100px;
        --page-side-gap: 24px;
        --login-width: 480px;
        --login-pad-x: 38px;
        --login-pad-y: 28px;
        --column-gap: 26px;
        --field-height: 46px;
    }

    .page-shell {
        left: 0;
        padding: 18px 0;
    }

    .login-card h1 {
        font-size: 32px;
    }

    .login-subtitle {
        font-size: 14px;
    }

    .role-tabs {
        margin: 9px 0 10px;
    }

    .role-tab {
        min-height: 68px;
        padding: 8px 10px;
    }

    .forgot-row {
        margin-bottom: 14px;
    }

    .signin-button {
        height: 50px;
        font-size: 17px;
    }

    .login-help {
        margin-top: 16px;
    }

    .brand-panel h3 {
        font-size: 34px;
    }

    .brand-lead {
        font-size: 13px;
        margin-bottom: 14px;
    }

    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-card {
        min-height: 96px;
    }
}


/* =========================================================
   TABLET / NARROW BROWSER
   Hide right branding and center login
   ========================================================= */

@media (max-width: 1000px) {

    .login-page {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .page-shell {
        width: 100%;
        min-height: 100svh;

        display: flex;
        justify-content: center;
        align-items: center;

        padding: 32px;

        left: 0;
        margin: 0 auto;
    }

    .brand-panel {
        display: none;
    }

    .login-card {
        width: 100%;
        max-width: 590px;
        min-width: 0;
        margin: 0;
        border-radius: 34px;
    }
}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 600px) {

    :root {
        --login-pad-x: 24px;
        --login-pad-y: 30px;
        --field-height: 50px;
    }

    .page-shell {
        width: 100%;
        padding: 18px;
        left: 0;
    }

    .login-card {
        width: 100%;
        max-width: 100%;
        border-radius: 25px;
    }

    .login-card h1 {
        font-size: 30px;
    }

    .login-subtitle {
        font-size: 14px;
    }

    .role-tabs {
        gap: 8px;
    }

    .role-tab {
        min-height: 78px;
        padding: 10px;
        gap: 8px;
    }

    .role-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .role-icon svg {
        width: 20px;
        height: 20px;
    }

    .role-copy strong {
        font-size: 13px;
    }

    .role-copy small {
        font-size: 9px;
    }

    .form-field input,
    .form-field select {
        width: 100%;
        font-size: 14px;
    }

    .signin-button {
        width: 100%;
        height: 52px;
        font-size: 17px;
    }

    .login-help {
        margin-top: 22px;
        font-size: 11px;
        text-align: center;
    }
}


/* =========================================================
   VERY SMALL PHONE
   ========================================================= */

@media (max-width: 360px) {

    :root {
        --login-pad-x: 18px;
        --login-pad-y: 24px;
        --field-height: 48px;
    }

    .page-shell {
        width: 100%;
        min-width: 0;
        padding: 12px;
        left: 0;
    }

    .login-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        border-radius: 20px;
    }

    .login-card h1 {
        font-size: 27px;
    }

    .role-tabs {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   SHORT DESKTOP / LAPTOP HEIGHT
   Only activates when desktop width is still available
   ========================================================= */

@media (min-width: 1001px) and (max-height: 760px) {

    :root {
        --login-pad-y: 22px;
        --field-height: 44px;
    }

    .page-shell {
    padding-top: 10px;
    padding-bottom: 10px;
    }

    .login-card {
    align-self: center;
    }

    .login-card h1 {
        font-size: 30px;
    }

    .login-subtitle {
        margin-bottom: 6px;
        font-size: 14px;
    }

    .role-tabs {
        margin: 7px 0 8px;
    }

    .role-tab {
        min-height: 62px;
        padding: 7px 10px;
    }

    .field-label {
        margin-top: 5px;
    }

    .forgot-row {
        margin: 5px 0 11px;
    }

    .signin-button {
        height: 48px;
        font-size: 17px;
    }

    .divider {
        margin: 8px 0 5px;
    }

    .login-help {
        margin-top: 13px;
    }

    .brand-header {
        margin-bottom: 10px;
    }

    .brand-panel h3 {
        font-size: 34px;
        margin-bottom: 6px;
    }

    .brand-lead {
        margin-bottom: 12px;
    }

    .feature-card {
        min-height: 100px;
    }

    .brand-footer {
        margin-top: 12px;
        padding-top: 10px;
    }
}

/* ========================= CLICK / HIT-AREA UX FIX =========================
   These rules intentionally come last so they override earlier form styles.
   - Campus: the REAL native select covers the entire field, so every point is clickable.
   - ID/password: clicking empty space or the left icon focuses the input (JS below).
   - Eye button: full-height 44px hit area and perfectly centered.
   ========================================================================== */
.form-field {
  position: relative;
  cursor: text;
}

.field-icon {
  pointer-events: none;
  align-self: center;
}

/* Campus dropdown: visible UI underneath, native select as full click target. */
.select-field {
  position: relative;
  cursor: pointer;
}

.select-field .field-icon,
.select-field .select-value,
.select-field .select-arrow {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.select-value {
  flex: 1 1 auto;
  min-width: 0;
  color: #999;
  font-size: 16px;
  line-height: 1;
}

.select-field.has-value .select-value {
  color: #333;
}

.select-field select {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  appearance: auto;
}

.select-arrow {
  position: absolute !important;
  right: 15px;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #888;
  font-size: 18px;
  line-height: 20px;
  text-align: center;
}

/* Inputs fill all usable space. */
.form-field input {
  align-self: stretch;
  height: auto;
  padding: 0;
}

/* Password eye: larger, centered and easy to click. */
.icon-button {
  align-self: stretch;
  width: 44px;
  min-width: 44px;
  margin: 0 -10px 0 0;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 8px;
  position: relative;
  z-index: 4;
}

.icon-button:hover {
  background: rgba(0, 0, 0, .045);
}

.icon-button:focus-visible,
.role-tab:focus-visible,
.signin-button:focus-visible,
.text-link:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ========================================
10. FORGOT PASSWORD MODAL
======================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

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

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        background 0.25s ease,
        visibility 0.25s;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;

    background: rgba(0, 0, 0, 0.58);
}

.forgot-modal {
    width: min(100%, 390px);

    padding: 22px 30px 20px;

    background: #ffffff;

    border-radius: 14px;

    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);

    opacity: 0;

    transition:
        opacity 0.25s ease,
}

.modal-overlay.active .forgot-modal {
    opacity: 1;
}


/* ICON */

.forgot-icon-circle {
    width: 64px;
    height: 64px;

    margin: 0 auto 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    /*
       Your Figma:
       #5E9F61 at 50% opacity
    */
    background: rgba(94, 159, 97, 0.5);

    border-radius: 50%;
}

.forgot-icon {
    width: 32px;
    height: 32px;

    color: #175c28;

    stroke-width: 2.7;
}


/* TITLE */

.forgot-modal h2 {
    margin: 0;

    color: #175c28;

    font-size: 23px;
    font-weight: 700;
    line-height: 1.15;

    text-align: center;
}


/* DESCRIPTION */

.forgot-description {
    margin: 5px 0 15px;

    color: #666666;

    font-size: 11px;
    line-height: 1.4;

    text-align: center;
}


/* EMAIL */

.forgot-label {
    display: block;

    margin-bottom: 4px;

    color: #555555;

    font-size: 12px;
}

.forgot-email-field {

    position: relative;

    width: 100%;
    height: 46px;

    display: flex;
    align-items: center;

    border: 1px solid #999999;
    border-radius: 6px;

    background: #ffffff;

    box-sizing: border-box;
}

.forgot-email-field:focus-within {
    border-color: #175c28;

    box-shadow: 0 0 0 2px rgba(23, 92, 40, 0.12);
}

.forgot-email-icon {
    position: absolute;

    left: 14px;
    top: 50%;

    width: 18px;
    height: 18px;

    transform: translateY(-50%);

    color: #979797;

    pointer-events: none;

    z-index: 2;
}

.forgot-email-field input {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    padding: 0 14px 0 43px;

    border: none;
    outline: none;

    background: transparent;

    font-size: 14px;

    box-sizing: border-box;

    cursor: text;
}

.forgot-email-field input::placeholder {
    color: #aaaaaa;
}


/* SEND RESET BUTTON */

.reset-button {
    width: 100%;
    height: 46px;

    margin-top: 17px;

    border: 0;
    border-radius: 6px;

    background: #f2a000;

    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.reset-button:hover {
    background: #dc9200;
}

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


/* DIVIDER */

.forgot-divider {
    display: flex;
    align-items: center;

    gap: 10px;

    margin: 9px 0 5px;
}

.forgot-divider span {
    height: 1px;

    flex: 1;

    background: #dddddd;
}

.forgot-divider p {
    margin: 0;

    color: #888888;

    font-size: 10px;
}


/* BACK TO SIGN IN */

.back-signin {
    display: block;

    margin: 0 auto;

    padding: 5px 10px;

    border: 0;

    background: transparent;

    color: #175c28;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}

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


/* MOBILE */

@media (max-width: 500px) {

    .forgot-modal {
        width: 100%;

        padding: 22px 22px 18px;

        border-radius: 12px;
    }

}

/* ======================================== CREATE ACCOUNT - ACCOUNT TYPE MODAL ======================================== */


/* ---------- DARK BACKGROUND ---------- */

.account-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

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

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        background 0.25s ease,
        visibility 0.25s;
}


.account-modal-overlay.active {
    opacity: 1;
    visibility: visible;

    background: rgba(0, 0, 0, 0.58);
}


/* ---------- MODAL ---------- */

.account-type-modal {
    width: min(100%, 470px);

    padding: 28px 32px 24px;

    background: #ffffff;

    border-radius: 16px;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.25);

    opacity: 0;

    transform:
        translateY(14px)
        scale(0.96);

    transition:
        opacity 0.25s ease,
}


.account-modal-overlay.active .account-type-modal {
    opacity: 1;
}


/* ---------- MAIN ICON ---------- */

.account-modal-icon {
    position: relative;

    width: 66px;
    height: 66px;

    margin: 0 auto 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(94, 159, 97, 0.5);

    border-radius: 50%;

    color: #175c28;
}


.account-modal-icon svg {
    width: 32px;
    height: 32px;
    margin-left: -1px;

    stroke-width: 3;
}


.account-modal-icon span {
    position: absolute;
    top: 9px;
    right: 11px;

    font-size: 18px;
    font-weight: 900;

    user-select: none;
}


/* ---------- TITLE ---------- */

.account-type-modal > h2 {
    margin: 0;

    color: #175c28;

    font-size: 25px;
    font-weight: 700;

    text-align: center;
}


/* ---------- DESCRIPTION ---------- */

.account-modal-description {
    margin: 4px 0 12px;

    color: #777777;

    font-size: 11px;
    line-height: 1.4;

    text-align: center;
}


/* ---------- TWO OPTIONS ---------- */

.account-options {
    display: grid;

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

    gap: 14px;
}


/* ---------- OPTION CARD ---------- */

.account-option {
    min-height: 185px;

    padding: 16px 14px;

    display: flex;
    flex-direction: column;
    align-items: center;

    border: none;

    border-radius: 10px;

    background: #f6f6f6;

    font-family: inherit;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.account-option:hover {
    transform: translateY(-2px);

    background: #ffffff;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.10);
}


.account-option:active {
    transform: translateY(0);
}


/* ---------- OPTION ICONS ---------- */

.account-option-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
}


.account-option-icon svg {
    width: 25px;
    height: 25px;
}


/* STUDENT */

.student-icon {
    background: rgba(94, 159, 97, 0.5);

    color: #175c28;
}


/* STAFF */
/* #E89400 at 50% opacity */

.staff-icon {
    background: rgba(232, 148, 0, 0.5);

    color: #E89400;
}


/* ---------- OPTION TITLES ---------- */

.account-option h3 {
    margin: 7px 0 3px;

    font-size: 14px;
    font-weight: 700;
}


.student-option h3 {
    color: #175c28;
}


.staff-option h3 {
    color: #E89400;
}


/* ---------- OPTION DESCRIPTION ---------- */

.account-option p {
    min-height: 30px;

    margin: 0;

    color: #666666;

    font-size: 9px;
    line-height: 1.3;

    text-align: center;
}


.staff-option p {
    color: #E89400;
}


/* ---------- ARROW BUTTON ---------- */

.account-arrow {
    width: 30px;
    height: 30px;

    margin-top: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 18px;
    font-weight: 700;
}


.student-arrow {
    background: rgba(94, 159, 97, 0.5);

    color: #175c28;
}


.staff-arrow {
    background: rgba(232, 148, 0, 0.5);

    color: #E89400;
}


/* ---------- DIVIDER ---------- */

.account-divider {
    display: flex;
    align-items: center;

    gap: 9px;

    margin: 8px 0 3px;
}


.account-divider span {
    height: 1px;

    flex: 1;

    background: #dddddd;
}


.account-divider p {
    margin: 0;

    color: #888888;

    font-size: 9px;
}


/* ---------- BACK BUTTON ---------- */

.account-back-button {
    display: block;

    margin: 0 auto;

    padding: 5px 10px;

    border: 0;

    background: transparent;

    color: #175c28;

    font-family: inherit;
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}


.account-back-button:hover {
    text-decoration: underline;
}

.short-arrow {
    position: relative;

    width: 9px;
    height: 3px;

    background: currentColor;
    border-radius: 2px;
}

.short-arrow::after {
    content: "";

    position: absolute;
    right: 0;
    top: 50%;

    width: 6px;
    height: 6px;

    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;

    transform:
        translateY(-50%)
        rotate(45deg);
}


/* ---------- MOBILE ---------- */

@media (max-width: 500px) {

    .account-type-modal {
        width: 100%;

        padding:
            22px
            20px
            18px;
    }

}
/* ======================================================================
   2026 UI REFINEMENT — login + authentication modals
   Keeps the original behavior; only improves hierarchy, spacing and states.
   ====================================================================== */
.login-card h1 { font-weight: 700; letter-spacing: -.7px; }
.login-subtitle { margin-top: 6px; margin-bottom: 16px; }
.role-tabs { margin: 12px 0 18px; gap: 12px; }
.role-tab { min-height: 84px; padding: 13px 16px; }
.role-tab.active { background: #f0f8f1; box-shadow: 0 4px 10px rgba(23,92,40,.10); }
.role-tab.active .role-copy strong { font-weight: 700; }

.field-label {
  display: flex; align-items: center; gap: 6px;
  margin: 10px 0 5px; color: #454545; font-size: 14px; font-weight: 500;
}
.field-label svg { width: 16px; height: 16px; color: var(--green); stroke-width: 2.3; }
.form-field { border-color: #999; box-shadow: 0 2px 5px rgba(0,0,0,.055); }
.field-helper { margin: 5px 0 2px; color: #8a8a8a; font-size: 10.5px; line-height: 1.35; }
.forgot-row { margin: 9px 0 20px; }
.signin-button { box-shadow: 0 5px 10px rgba(197,119,0,.22), 0 2px 5px rgba(0,0,0,.12); }
.create-account a { font-weight: 500; }
.login-help {
  margin: 26px 0 0; padding: 12px 14px;
  justify-content: flex-start; gap: 11px; text-align: left;
  color: var(--green); background: #edf8f0; border-left: 3px solid #36b86a;
  border-radius: 8px; font-size: 12px;
}
.login-help svg { flex: 0 0 23px; width: 23px; height: 23px; color: #258a4b; }
.login-help span { display: flex; flex-direction: column; gap: 1px; }
.login-help strong { font-size: 12px; font-weight: 700; }
.login-help small { color: #58725f; font-size: 10.5px; line-height: 1.35; }

/* Shared modal language */
.forgot-modal, .account-type-modal { position: relative; border: 1px solid rgba(23,92,40,.08); }
.modal-close {
  position: absolute; top: 14px; right: 16px; width: 32px; height: 32px;
  display: grid; place-items: center; border: 0; border-radius: 8px;
  background: transparent; color: #777; font-size: 25px; line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.modal-close:hover { background: #f2f2f2; color: #222; }

/* Forgot password — same visual family as the refined login */
.forgot-modal { width: min(100%, 430px); padding: 30px 34px 25px; border-radius: 18px; }
.forgot-icon-circle { width: 58px; height: 58px; margin-bottom: 12px; background: #e5f4e8; }
.forgot-icon { width: 27px; height: 27px; }
.forgot-modal h2 { font-size: 25px; font-weight: 700; letter-spacing: -.3px; }
.forgot-description { max-width: 315px; margin: 7px auto 20px; font-size: 12px; color: #777; }
.forgot-label { margin-bottom: 6px; color: #444; font-size: 12px; font-weight: 600; }
.forgot-email-field { height: 50px; border-color: #aaa; border-radius: 8px; }
.reset-button { height: 50px; margin-top: 18px; border-radius: 8px; font-size: 14px; box-shadow: 0 4px 9px rgba(197,119,0,.18); }
.forgot-divider { margin: 13px 0 7px; }
.back-signin { font-size: 12px; }

/* Create-account role modal — compact card selector matching login */
.account-type-modal { width: min(100%, 520px); padding: 30px 34px 25px; border-radius: 18px; }
.account-modal-icon { width: 58px; height: 58px; margin-bottom: 10px; background: #e5f4e8; }
.account-modal-icon svg { width: 28px; height: 28px; }
.account-type-modal > h2 { font-size: 26px; font-weight: 700; letter-spacing: -.35px; }
.account-modal-description { margin: 6px 0 20px; font-size: 12px; color: #777; }
.account-options { gap: 14px; }
.account-option {
  min-height: 150px; padding: 18px 15px 15px; border: 1px solid #dedede;
  border-radius: 12px; background: #fafafa; box-shadow: 0 2px 7px rgba(0,0,0,.05);
}
.account-option:hover { border-color: #8bb694; background: #f4faf5; box-shadow: 0 5px 14px rgba(23,92,40,.10); }
.account-option-icon { width: 45px; height: 45px; }
.account-option h3 { margin-top: 10px; margin-bottom: 4px; color: #24482c; font-size: 15px; }
.account-option p { max-width: 170px; margin: 0 auto; color: #777; font-size: 10.5px; line-height: 1.35; }
.account-arrow { margin-top: auto; }
.account-divider { margin-top: 13px; }

@media (max-width: 500px) {
  .field-helper { font-size: 10px; }
  .login-help { margin-top: 20px; }
  .forgot-modal, .account-type-modal { padding: 27px 22px 22px; border-radius: 14px; }
  .account-options { grid-template-columns: 1fr; }
  .account-option { min-height: 112px; }
}

/* Forgot Password: match login field-label icon treatment */
.forgot-label {
  display: flex;
  align-items: center;
  gap: 7px;
}
.forgot-label-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--green, #145523);
  stroke: currentColor;
}


/* Login help — compact text treatment with left accent; no button */
.login-help {
  margin: 26px 0 0;
  padding: 9px 0 9px 13px;
  justify-content: flex-start;
  gap: 10px;
  text-align: left;
  color: var(--green);
  background: transparent;
  border: 0;
  border-left: 3px solid var(--green);
  border-radius: 0;
}
.login-help svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: var(--green);
}
.login-help span { display: flex; flex-direction: column; gap: 2px; }
.login-help strong { color: #343434; font-size: 12px; font-weight: 700; }
.login-help small { color: #777; font-size: 10.5px; line-height: 1.4; }

/* Staff sign-in has no campus field; preserve a comfortable gap before the ID field. */
.login-campus-field[hidden] { display: none !important; }
.login-card.campus-hidden .role-tabs { margin-bottom: 22px; }

@media (max-width: 500px) {
  .login-card.campus-hidden .role-tabs { margin-bottom: 18px; }
}
.login-help a {
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
}
.login-help a:hover { text-decoration: underline; }


/* ========================= LOGIN PAGE ENTRANCE BUMP ================ */
/* Same small vertical entrance used by Create Account. No fade/scale/X move. */
.login-card,
.brand-panel {
  animation: pageMoveUp .25s ease-out;
}

@keyframes pageMoveUp {
  from { transform: translateY(8px); }
  to   { transform: translateY(0); }
}

/* ======================================================================
   FINAL 125% LAPTOP HEIGHT PATCH
   Purpose: preserve the 100% desktop design, but compact the login page
   vertically when Windows/browser scaling reduces the usable viewport.
   Widths are intentionally NOT narrowed here.
   ====================================================================== */
@media (min-width: 1001px) and (max-height: 800px) {
  :root {
    --login-pad-y: 14px;
    --field-height: 39px;
  }

  .page-shell {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .login-content {
    padding-top: 14px;
    padding-bottom: 12px;
  }

  .login-card h1 {
    font-size: 28px;
  }

  .login-subtitle {
    margin: 3px 0 5px;
    font-size: 12px;
    line-height: 1.2;
  }

  .role-tabs {
    margin: 5px 0 6px;
  }

  .role-tab {
    min-height: 50px;
    height: 50px;
    padding: 5px 9px;
  }

  .role-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .role-icon svg {
    width: 17px;
    height: 17px;
  }

  .role-copy strong {
    font-size: 11px;
  }

  .role-copy small {
    font-size: 8.5px;
  }

  .field-label {
    margin: 3px 0 2px;
    font-size: 11px;
    line-height: 1.15;
  }

  .field-label svg {
    width: 13px;
    height: 13px;
    flex-basis: 13px;
  }

  .form-field {
    height: var(--field-height);
    min-height: var(--field-height);
    padding-left: 12px;
    padding-right: 12px;
    gap: 8px;
  }

  /* Kept here at the END because later hit-area rules in this stylesheet
     otherwise restore .select-value to 16px. */
  .form-field input,
  .form-field select,
  .select-value,
  .form-field input::placeholder {
    font-size: 12px;
    line-height: 1.2;
  }

  .field-icon,
  .field-icon svg {
    width: 15px;
    height: 15px;
  }

  .field-icon {
    flex-basis: 15px;
  }

  .field-helper {
    margin: 2px 0 1px;
    font-size: 8.5px;
    line-height: 1.15;
  }

  .icon-button {
    width: 30px;
    min-width: 30px;
    height: 30px;
  }

  .icon-button svg {
    width: 14px;
    height: 14px;
  }

  .forgot-row {
    margin: 4px 0 8px;
  }

  .text-link {
    font-size: 11px;
  }

  .signin-button {
    height: 43px;
    font-size: 15px;
  }

  .signin-button svg {
    width: 18px;
    height: 18px;
  }

  .divider {
    margin: 4px 0 2px;
  }

  .divider em,
  .create-account {
    font-size: 10px;
  }

  .login-help {
    margin-top: 11px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 8.5px;
  }

  .login-help strong {
    font-size: 9.5px;
  }

  .login-help svg {
    width: 17px;
    height: 17px;
  }

  .brand-panel {
    padding-top: 14px;
  }

  .brand-header {
    margin-bottom: 9px;
  }

  .brand-panel h3 {
    margin-bottom: 5px;
    font-size: 31px;
  }

  .brand-lead {
    margin-bottom: 10px;
    font-size: 11px;
  }

  .feature-card {
    min-height: 90px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .brand-footer {
    margin-top: 9px;
    padding-top: 8px;
  }
}

/* =========================================================
   125% LAPTOP - LOGIN CARD BREATHING ROOM
   ========================================================= */

@media (min-width: 1001px) and (max-height: 800px) {

    .login-card {
        padding-top: 27px;
        padding-bottom: 24px;
    }

}

/* =========================================================
   REMOVE WHITE EDGES AROUND THE SCREEN
   ========================================================= */

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    background-color: #326335;
    overflow-x: hidden;
}

body {
    min-width: 100%;
}


/* ==========================================================
   AUTH STATIC CAMPUS BACKGROUND
   This layer stays mounted during JS auth-page navigation.
   ========================================================== */
.auth-static-background {
    position: fixed;
    inset: 0;
    z-index: 0;

    background-image:
        linear-gradient(
            rgba(18, 91, 39, 0.1),
            rgba(18, 91, 39, 0.1)
        ),
        url("../assets/ucc-campus-bg.png");

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    pointer-events: none;

    animation: none !important;
    transition: none !important;
    transform: none !important;
}

#authView {
    position: relative;
    z-index: 1;
    min-height: 100svh;
}

.login-page,
.register-page {
    background: transparent !important;
}

.page-overlay {
    background: transparent !important;
}


.password-requirements span {
    transition: color 0.2s ease;
}

.password-requirements .requirement-valid {
    color: #176b37;
    font-weight: 600;
}

.password-requirements .requirement-invalid {
    color: #777777;
}

.signin-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* =========================================================
   RESET PASSWORD — FIELD FEEDBACK
   ========================================================= */

.password-feedback {
    margin: 4px 0 8px;
    min-height: 16px;

    font-size: 11px;
    line-height: 1.4;
}

.password-feedback-error {
    color: #d71920;
}

.password-feedback-success {
    color: #176b37;
    font-weight: 600;
}

/* =========================================================
   FINAL AUTH RESPONSIVE LAYOUT
   ========================================================= */

/* Normal desktop */
@media (min-width: 1181px) {

    .page-shell {
        left: 0 !important;

        width: min(1510px, calc(100% - 48px));
        margin: 0 auto;

        grid-template-columns:
            minmax(500px, 650px)
            minmax(420px, 1fr);

        gap: clamp(32px, 4vw, 64px);

        justify-content: center;
    }

    .login-card {
        width: 100%;
        max-width: 650px;
    }

    .brand-panel {
        display: block;
        width: 100%;
        max-width: 650px;
    }
}


/* Small desktop / laptop / split screen */
@media (min-width: 601px) and (max-width: 1180px) {

    .login-page {
        overflow-y: auto;
    }

    .page-shell {
        left: 0 !important;

        width: 100%;
        min-height: 100svh;

        display: flex;

        justify-content: center;
        align-items: center;

        padding: 32px 24px;

        margin: 0 auto;
    }

    .brand-panel {
        display: none !important;
    }

    .login-card {
        width: min(100%, 540px);
        max-width: 540px;
    }
}


/* Mobile */
@media (max-width: 600px) {

    .page-shell {
        left: 0 !important;

        width: 100%;
        min-height: 100svh;

        display: flex;

        justify-content: center;
        align-items: center;

        padding: 20px 14px;

        margin: 0;
    }

    .brand-panel {
        display: none !important;
    }

    .login-card {
        width: 100%;
        max-width: 500px;
    }
}


/* Logout success notification — matches the existing CRMS toast. */
/* =========================================================
   GLOBAL CRMS TOAST
   ========================================================= */

.crms-toast {
    position: fixed;
    right: 22px;
    bottom: 22px;

    width: min(350px, calc(100vw - 32px));

    display: grid;
    grid-template-columns: 42px 1fr 20px;
    align-items: center;
    gap: 10px;

    padding: 14px 14px 16px;

    background: #f7fff9;
    border: 1px solid #c8e5d0;
    border-radius: 11px;

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.16);

    font-family: 'Poppins', sans-serif;

    z-index: 999999;

    overflow: hidden;

    opacity: 0;

    transform: translateY(18px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


.crms-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}


.crms-toast-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #159447;
    color: #ffffff;

    font-size: 20px;
    font-weight: 700;

    box-shadow:
        0 0 0 5px
        rgba(21, 148, 71, 0.10);
}


.crms-toast-content {
    min-width: 0;
}


.crms-toast-title {
    display: block;

    margin: 0 0 2px;

    color: #13783b;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}


.crms-toast-message {
    display: block;

    color: #68756c;

    font-size: 10px;
    font-weight: 400;
    line-height: 1.45;
}


.crms-toast-close {
    align-self: start;

    width: 20px;
    height: 20px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;
    background: transparent;

    color: #666666;

    font-size: 17px;
    line-height: 1;

    cursor: pointer;
}


.crms-toast-close:hover {
    color: #111111;
}


.crms-toast-progress {
    position: absolute;

    left: 0;
    bottom: 0;

    height: 3px;
    width: 100%;

    background: #22b85a;

    transform-origin: left center;

    animation:
        crmsToastProgress
        4s linear forwards;
}


@keyframes crmsToastProgress {

    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }

}


@media (max-width: 600px) {

    .crms-toast {
        right: 14px;
        bottom: 14px;
        left: 14px;

        width: auto;
    }

}


/* Account-type selection: staff label follows the amber arrow. */
.account-option.staff-option h3 { color: #E89400; }
/* Shared login success notifications match the profile-completed toast footprint. */
.crms-toast { width: min(430px, calc(100vw - 32px)); grid-template-columns: 48px minmax(0, 1fr) 20px; padding: 16px 16px 18px; border-radius: 13px; }
.crms-toast-icon { width: 44px; height: 44px; }
.crms-toast-title { font-size: 14px; }
.crms-toast-message { font-size: 11px; }