/* Auth Portal: Login/Signup pages (Figma-aligned, responsive) */
.authportal-wrapper{
    position: relative;
    min-height: 100vh;
    width: 100%;
    /* Allow scrolling on small screens/low-height displays */
    overflow-x: hidden;
    overflow-y: auto;
    font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.authportal-overlay{
    position:absolute;
    inset:0;
    background: rgba(10, 20, 60, 0.55);
    backdrop-filter: blur(0px);
    z-index:0;
}

/* Top white bar with centered logo */
.authportal-topbar{
    position: relative;
    z-index: 2;
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.authportal-topbar-inner{
    max-width: 1320px;
    margin: 0 auto;
    padding: 18px 20px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.authportal-topbar-logo{
    height: 60px;
    width: auto;
    display:block;
}

/* Main layout */
.authportal-content {
    position: relative;
    z-index: 2;
    min-height: calc(70vh - 74px);
    padding: 44px 20px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

/* Hero text (white) */
.authportal-hero{
    max-width: 860px;
    text-align:center;
    color:#ffffff;
}
.authportal-hero-text{
    font-size: 18px;
    line-height: 1.35;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Card */
.authportal-card{
    width: min(506px, calc(100% - 0px));
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.22);
    padding: clamp(18px, 3.2vw, 28px) clamp(18px, 4vw, 36px) clamp(16px, 3vw, 22px);
    /* Ensure content is reachable on small monitors */
    max-height: calc(100vh - 180px);
    overflow: auto;
}

/* Low-height / small laptop screens (e.g., 13") */
@media (max-height: 820px) {
    .authportal-content{
        justify-content: flex-start;
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .authportal-hero-text{
        font-size: 16px;
    }
}

/* Show the wrong-password message exactly under the password field */
#fitem_id_password .invalid-feedback,
#id_error_password{
    display: block !important;
    color: #E84141;
    font-size: 13px;
    font-weight: 400;
    margin-top: 6px;
}

/* Signup: long forms should scroll inside the card on smaller screens */
.authportal-formwrap--scroll{
    max-height: min(520px, calc(100vh - 330px));
    overflow: auto;
    padding-right: 6px;
}
@media (max-width: 768px){
    .authportal-formwrap--scroll{ max-height: calc(100vh - 320px); }
}

/* Already-logged page text + actions */
.authportal-text{
    text-align: center;
    color: #1d2b52;
    font-size: 15px;
    line-height: 1.35;
    margin-top: 6px;
}
.authportal-actions{
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.authportal-btnlink{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 20px;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
}
.authportal-btnlink-primary{
    background: #00045A;
    color: #ffffff;
}
.authportal-btnlink-primary:hover{ filter: brightness(1.05); }
.authportal-btnlink-secondary{
    background: #ffffff;
    color: #00045A;
    border-color: rgba(0,4,90,0.25);
}
.authportal-btnlink-secondary:hover{ background: rgba(0,4,90,0.04); }
@media (max-width: 420px){
    .authportal-card{ padding: 22px 18px 18px; }
}

.authportal-title{
    margin: 0 0 18px 0;
    text-align:center;
    color:#274483;
    font-size: 21px;
    font-weight: 700;
}

/* Moodle form overrides: turn QuickForm rows into clean vertical fields */
.authportal-card form.mform{
    margin: 0;
}
.authportal-card .form-group.row{
    margin: 0 0 14px 0;
    display:flex;
    flex-direction: column;
}
.authportal-card .col-form-label{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 0 6px 0 !important;
}
.authportal-card .col-form-label label{
    margin: 0;
    color: #9D9999;
    font-size: 14px;
    font-weight: 400;
}
.authportal-card .form-label-addon,
.authportal-card .text-danger[title],
.authportal-card .icon.fa.edw-icon,
.authportal-card .fdescription.required{
    display:none !important;
}

.authportal-card .felement{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.authportal-card input.form-control{
    width: 100%;
    height: 38px;
    border: 1px solid rgba(39, 68, 131, 0.35);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    color: #1d2b52;
    box-shadow: none !important;
}
.authportal-card input.form-control:focus{
    outline: none;
    border-color: rgba(27, 159, 253, 0.9);
    box-shadow: 0 0 0 3px rgba(27, 159, 253, 0.15) !important;
}

/* Submit button row */
.authportal-card #fitem_id_submitbutton .col-form-label{ display:none !important; }
.authportal-card #fitem_id_submitbutton{
    margin-top: 8px;
}
.authportal-card #fitem_id_submitbutton .felement{
    display:flex;
    justify-content:center;
}
.authportal-card input#id_submitbutton{
    width: 215px;
    height: 42px;
    border-radius: 22px;
    background: #00045A;
    border: 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor:pointer;
}
.authportal-card input#id_submitbutton:hover{
    filter: brightness(1.05);
}

/* Links inside card */
.authportal-footer{
    margin-top: 14px;
    text-align:center;
}
.authportal-link{
    color:#1B9FFD;
    text-decoration:none;
    font-size: 15px;
    font-weight: 400;
}
.authportal-link:hover{ text-decoration: underline; }

/* Ensure phone mask placeholder is visible */
.authportal-card input::placeholder{
    color: #9D9999;
    opacity: 1;
}

/* Inline error under password field (Figma) */
.authportal-inline-error{
    margin-top: 6px;
    font-size: 13px;
    font-weight: 400;
    color: #E84141;
    line-height: 1.2;
}
.authportal-muted{
    color:#9D9999;
    font-size: 15px;
}
.authportal-footer-row{
    margin-top: 10px;
}

/* Error (Figma) */
.authportal-error{
    margin-top: 10px;
    text-align:center;
    color:#E84141;
    font-size: 13px;
    font-weight: 400;
}
.authportal-cancel{
    display:block;
    margin-top: 10px;
    text-align:center;
    color:#E84141;
    font-size: 13px;
    text-decoration:none;
}
.authportal-cancel:hover{ text-decoration: underline; }


/* ===== Authportal FIX: force full-viewport layout + topbar stuck to top (override theme) ===== */
body#page-local-authportal-login,
body#page-local-authportal-signup{
    margin:0 !important;
    padding:0 !important;
}

body.path-local-authportal #page,
body.path-local-authportal #page-wrapper{
    margin:0 !important;
    padding:0 !important;
}

body.path-local-authportal #page-header,
body.path-local-authportal .navbar,
body.path-local-authportal .secondary-navigation,
body.path-local-authportal #top-footer,
body.path-local-authportal #page-footer{
    display:none !important;
}

/* Wrapper covers whole viewport regardless of theme offsets */
body.path-local-authportal .authportal-wrapper{
    position:fixed !important;
    inset:0 !important;
    min-height:100vh !important;
    width:100vw !important;
    overflow:auto !important;
}

/* Overlay stays behind everything */
body.path-local-authportal .authportal-overlay{
    z-index:0 !important;
}

/* Topbar glued to top */
body.path-local-authportal .authportal-topbar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height:110px !important;
    background:#fff !important;
    border-bottom:1px solid rgba(0,0,0,0.06) !important;
    z-index:1000 !important;
    display:flex !important;
    align-items:center !important;
}

/* Inner container */
body.path-local-authportal .authportal-topbar-inner{
    width:100% !important;
    max-width:1320px !important;
    margin:0 auto !important;
    padding:0 20px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

body.path-local-authportal .authportal-topbar-logo{
    height: 60px;
    height:auto !important;
    width:auto !important;
    display:block !important;
}

/* Keep the authportal-content layout identical to the Figma spec */
body.path-local-authportal .authportal-content{
    position: relative;
    z-index: 2;
    min-height: calc(70vh - 74px);
    padding: 44px 20px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}


/* ===============================
   Password generator + toggle (як у v16)
   =============================== */
.authportal-pass-wrapper{ position: relative; }
.authportal-pass-wrapper input[type="password"],
.authportal-pass-wrapper input[type="text"]{ padding-right: 44px; }

.authportal-passgen{
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #00045A;
    background-color: #00045A;
    color: #ffffff;
    cursor: pointer;
}
.authportal-passgen:hover{
    filter: brightness(1.05);
}
.authportal-passgen-hint{
    margin-top: 4px;
    font-size: 12px;
    color: #9D9999;
}

.authportal-pass-toggle{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.authportal-pass-toggle svg{
    width: 20px;
    height: 20px;
    fill: #9ca3af;
    transition: fill 0.15s ease;
}
.authportal-pass-toggle:hover svg{ fill: #4b5563; }
.authportal-pass-toggle.is-visible svg{ fill: #1B9FFD; }


.authportal-success-text{
  color:#274483;
  font-size:15px;
  line-height:1.45;
  margin: 14px 0 18px;
  text-align:center;
}
.authportal-success-actions{display:flex; justify-content:center;}

.custom-select {
    display: inline-block;
    width: 100%;
    padding: .90625rem 1.625rem 10px .625rem;
    font-family: Inherit;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.0625;
    color: #4c5a73;
    vertical-align: middle;
    background: #fff url(data:image/svg+xml,%3csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1.01001L5 5.01001L9 1.01001' stroke='%235B6880' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e) right .625rem center / 8px 10px no-repeat;
    border: 1px solid #ced4da;
    border-radius: .5rem;
    appearance: none;
}