/*login page*/
/* login_page.php / auth_login_page.php load their own standalone stylesheet
   chain (bootstrap.min.css, style.css, login.css) and do not include
   modern-theme.css, so the shared @font-face declared there never reaches
   this page - same self-hosted font file, referenced again here so "Inter"
   below actually resolves instead of silently falling back to the system
   stack. */
@font-face {
    font-family: "Inter";
    src: url("fonts/InterVariable.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}
.login-body{background-image:url(../images/login-bg.jpg); background-size:cover; width:100%; height:100%; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
.form-signin{max-width:460px; margin:50px auto; z-index:999; position:relative; padding:0 16px;}
.form-signin h2.form-signin-heading{margin:0; padding:0px 15px 35px 15px; text-align:center; color:#444b7a; font-size:35px; font-weight:bold; text-transform:uppercase; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
.form-signin h2.form-signin-heading .sub-text{display:block; font-size:20px;}
.form-signin .checkbox{margin-bottom:14px;}
.form-signin .checkbox{font-weight:normal; color:#b6b6b6; font-weight:300; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
.form-signin .form-control{position:relative; font-size:15px; height:46px; padding:10px 14px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.form-signin .form-control:focus{z-index:2; border-color:#28a745; box-shadow:0 0 0 3px rgba(40,167,69,0.15);}
.form-signin input[type="text"],.form-signin input[type="password"]{margin-bottom:18px; border-radius:8px; -webkit-border-radius:8px; border:1px solid #d9dde3; box-shadow:none; font-size:15px;}
.form-signin input[type="text"]::placeholder,.form-signin input[type="password"]::placeholder{color:#9aa1ac;}
.form-signin .btn-login{text-transform:none; font-weight:600; margin:8px 0 5px; height:47px; font-size:15px;}
.form-signin p{text-align:left; color:#b6b6b6; font-size:16px; font-weight:300;}
.form-signin a,.form-signin a:hover{color:#1fb5ac;}
.form-signin a:hover{text-decoration:underline;}
.login-wrap{background:#fff; padding:30px; border-radius:12px; -webkit-border-radius:12px; -moz-border-radius:12px; -o-border-radius:12px; border:1px solid #e5e7eb; box-shadow:0 10px 34px rgba(15,23,42,0.16);}
.icon-block{display:block; text-align:center;}
.icon-block .ico{color:#eee; float:none; font-size:80px; margin:0;}
.user-login-info{}
.user-login-info .form-control:last-child{margin-bottom:0 !important;}
.registration{position:absolute; right:0; bottom:-35px; color: #b8bab9;}
.nav-tabs > li.error{}
.panel-heading .nav > li.error > a{color:#FF0000 !important}

.powered-by{color:#fff; display:block; margin:10px; text-align:center;}
.powered-by a{color:#fff; font-weight:600; text-decoration:underline;}

/* Refined overlay - a flat, neutral scrim rather than the previous bright
   decorative gradient, so the background behind the card reads darker and
   less distracting instead of competing with it for attention. */
.bg-cover{
    background:rgba(13,17,23,0.55);
    position:absolute; width:100%; height:100%; display:block; top:0; left:0;
}
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)){
    .bg-cover{-webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);}
}

/* Brand + heading */
.login-wrap .myBrand img{max-width:220px; height:auto; max-height:50px; width:auto;}
.login-heading{margin:2px 0 4px; text-align:center; font-size:20px; font-weight:700; color:#172033; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
.login-subtext{margin:0 0 22px; text-align:center; font-size:13.5px; font-weight:400; color:#667085; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}

/* Required asterisk, refined to sit closer to the label without shouting */
.form-signin .req{color:#dc2626; margin-left:2px; font-size:13px;}

/* Icon-in-field pattern using the existing self-hosted Material Icons font
   already loaded via style.css (.ico), no new icon dependency. */
.form-signin .input-group{position:relative;}
.form-signin .input-group .login-field-icon{
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    font-size:18px; color:#9aa1ac; margin:0; pointer-events:none; z-index:3;
}
.form-signin .input-group input[type="text"],
.form-signin .input-group input[type="password"]{padding-left:38px;}

/* Password visibility toggle - front-end only, does not affect the
   password value or submission. */
.form-signin .input-group input[type="password"],
.form-signin .input-group input[type="text"].login-password-visible{padding-right:38px;}
.login-password-toggle{
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    background:transparent; border:0; padding:6px; margin:0; line-height:1;
    color:#9aa1ac; cursor:pointer; z-index:3;
}
.login-password-toggle:hover,.login-password-toggle:focus{color:#475467;}
.login-password-toggle .ico{margin:0; font-size:18px;}

/* reCAPTCHA & Turnstile spacing */
.form-signin #recapchaWidget,
.form-signin #turnstileWidget{margin:10px 0 6px;}

/* Footer - visually secondary */
.login-wrap .copyrigt{color:#98a2b3; font-size:12.5px;}
.login-wrap .copyrigt a{color:#667085; font-weight:600;}
.login-wrap .form-control-label + .form-control-label{margin-top:2px;}
.login-wrap > div:last-of-type{margin-top:6px;}

@media (max-width: 576px){
    .form-signin{max-width:calc(100% - 32px); margin:32px auto; padding:0;}
    .login-wrap{padding:22px;}
}