/* Faculty Portal Specific Styles */
:root {
  --fac-accent: var(--brand-primary-accent);
  --fac-accent-alt: var(--brand-secondary);
}

body.faculty-portal {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at 15% 20%,rgba(255,255,255,0.08),transparent 60%),
    radial-gradient(circle at 85% 80%,rgba(255,255,255,0.06),transparent 65%),
    linear-gradient(145deg, var(--surface-1) 0%, var(--surface-2) 55%, var(--surface-1) 100%);
  background-attachment:fixed;
}

.portal-wrapper { flex:1; display:flex; align-items:center; justify-content:center; padding:4.5rem 1.25rem 3rem; }

.login-card {
  width:100%; max-width:880px; position:relative; isolation:isolate;
  background:linear-gradient(150deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 10px 38px -10px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.25);
  border-radius: clamp(18px, 3.2vw, 30px);
  padding:0; display:block; overflow:hidden;
}

/* ========== NEW MINIMAL VARIANT ========== */
.login-card.minimal { max-width:520px; padding:0; background:var(--surface-1); backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%); border:1px solid rgba(255,255,255,0.15); box-shadow:0 18px 48px -12px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.25); border-radius:28px; }
.login-card.minimal:before, .login-card.minimal:after { display:none; }
.minimal-inner { position:relative; padding:2.55rem 2.35rem 2.8rem; display:flex; flex-direction:column; gap:1.9rem; }
.login-card.minimal .brand-mini { font-size:1.15rem; }
.login-card.minimal .portal-heading { gap:.7rem; }
.login-card.minimal .portal-heading h1 { font-size:clamp(1.55rem,2.3vw,1.85rem); background:linear-gradient(120deg,var(--text-strong),#cbd5e1); -webkit-background-clip:text; background-clip:text; color:transparent; }
.login-card.minimal .portal-heading .tagline { font-size:.68rem; opacity:.62; max-width:42ch; }

/* Floating labels */
.float-group { position:relative; }
.float-group input { width:100%; background:var(--surface-2); border:1px solid var(--border-color); padding:1.05rem .95rem .55rem 2.6rem; border-radius:14px; font:inherit; font-size:.8rem; color:var(--text-primary); transition:var(--transition); }
.float-group input:focus { outline:none; box-shadow:var(--focus-ring); border-color:var(--fac-accent-alt); }
.float-group label { position:absolute; left:2.55rem; top:50%; transform:translateY(-50%); pointer-events:none; font-size:.72rem; letter-spacing:.4px; color:var(--text-muted); transition:.28s ease; background:transparent; padding:0 .2rem; }
.float-group.focused label, .float-group.filled label { top:.62rem; font-size:.53rem; letter-spacing:1px; text-transform:uppercase; font-weight:600; opacity:.9; color:var(--fac-accent-alt); }
.float-group label { transition:.28s cubic-bezier(.4,0,.2,1), color .25s ease; }
.float-group .input-icon { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:.85rem; pointer-events:none; transition:var(--transition); }
.float-group input:focus ~ .input-icon { color:var(--fac-accent-alt); }
.float-group .error-msg { margin:.35rem 0 0 0; }
/* Error & success states */
.float-group input.error-field { border-color:#dc2626; }
.float-group input.error-field:focus { box-shadow:0 0 0 3px rgba(220,38,38,.35); border-color:#dc2626; }
.float-group input.valid-field { border-color:#10b981; }
.float-group input.valid-field:focus { box-shadow:0 0 0 3px rgba(16,185,129,.35); border-color:#10b981; }
.error-msg { font-size:.58rem; color:#dc2626; letter-spacing:.4px; }
.error-msg.hidden { display:none; }

/* Password tools minimal */
.minimal-tools { display:flex; flex-direction:column; gap:.45rem; margin-top:-.2rem; }
.minimal-tools .strength-meter { height:6px; border-radius:4px; border:none; background:var(--surface-2); }
.minimal-tools .strength-bar { border-radius:4px; }
.pw-row { position:relative; }
.login-card.minimal .password-toggle { top:50%; transform:translateY(-50%); right:.65rem; background:var(--surface-3); border:1px solid var(--border-color); width:36px; height:36px; border-radius:12px; }
.login-card.minimal .password-toggle:hover { background:var(--surface-4); }

/* Status + actions */
.form-actions-compact { display:flex; flex-direction:column; gap:.9rem; margin-top:.2rem; }
.login-card.minimal .status-line { font-size:.58rem; letter-spacing:.6px; min-height:16px; }
.inline-meta { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:.3rem; }
.inline-meta .remember { margin:0; }
.inline-meta a { font-size:.58rem; text-decoration:underline; opacity:.7; }
.inline-meta.single { justify-content:flex-start; }

/* Button refine */
.login-card.minimal .btn-primary { width:100%; justify-content:center; font-size:.8rem; padding:1rem 1.2rem; border-radius:16px; }

/* Accent ring effect */
.login-card.minimal { position:relative; }
.login-card.minimal .ring-glow { position:absolute; inset:0; pointer-events:none; border-radius:inherit; }
.login-card.minimal .ring-glow:before { content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; background:linear-gradient(140deg,var(--fac-accent) 0%, var(--fac-accent-alt) 50%, rgba(255,255,255,.2) 100%); mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000); -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000); mask-composite:exclude; -webkit-mask-composite:destination-out; opacity:.65; }
.login-card.minimal:hover .ring-glow:before { opacity:.9; }

@media (max-width:640px){
  .login-card.minimal .portal-heading h1 { font-size:1.55rem; }
  .float-group input { padding-left:2.4rem; }
  .float-group label { left:2.3rem; }
}
.login-card:before { content:""; position:absolute; inset:0; pointer-events:none; background:
  linear-gradient(120deg, rgba(255,255,255,0.28), rgba(255,255,255,0.05) 35%, transparent 70%);
  mix-blend-mode:overlay; opacity:.85; }
.login-card:after { content:""; position:absolute; top:-35%; right:-25%; width:60%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 35%, var(--fac-accent), transparent 70%); opacity:0.28; filter:blur(14px); }

.card-grid { display:grid; grid-template-columns:1fr 1fr; min-height:520px; position:relative; }
.card-info { position:relative; padding:2.6rem 2.4rem 2.4rem; display:flex; flex-direction:column; gap:1.4rem; border-right:1px solid rgba(255,255,255,0.12); }
.card-info:after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.18),transparent 70%); opacity:.55; pointer-events:none; }
.info-bullets { list-style:none; display:flex; flex-direction:column; gap:.75rem; margin:0; padding:0; }
.info-bullets li { font-size:.65rem; display:flex; gap:.55rem; line-height:1.4; opacity:.78; }
.info-bullets li i { font-size:.7rem; color:var(--fac-accent-alt); margin-top:.15rem; }
.card-form { padding:2.6rem 2.4rem 2.6rem; display:flex; flex-direction:column; gap:1.2rem; }
.card-form form { margin-top:.2rem; }

.portal-heading { display:flex; flex-direction:column; gap:.55rem; position:relative; }
.portal-heading h1 { font-size:clamp(1.55rem, 2.6vw, 1.9rem); font-weight:700; margin:0; letter-spacing:.55px; color:var(--text-strong); }
.portal-heading .tagline { font-size:.72rem; opacity:.7; line-height:1.55; max-width:36ch; }

.brand-mini { display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:1.05rem; letter-spacing:.5px; position:relative; }
.brand-mini i { background:linear-gradient(135deg,var(--fac-accent),var(--fac-accent-alt)); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:1.25rem; }

/* removed earlier portal-heading block (replaced above) */

form { display:flex; flex-direction:column; gap:1.05rem; }
.strength-wrap { display:flex; flex-direction:column; gap:.4rem; margin-top:-.3rem; }
.strength-meter { position:relative; height:8px; background:var(--surface-2); border:1px solid var(--border-color); border-radius:6px; overflow:hidden; }
.strength-bar { position:absolute; inset:0; width:0%; background:linear-gradient(90deg,#dc2626,#f59e0b,#10b981,#0ea5e9); transition:width .45s ease; }
.strength-label { font-size:.55rem; letter-spacing:.6px; opacity:.7; display:flex; align-items:center; gap:.4rem; }
.caps-note { font-size:.55rem; color:#f59e0b; letter-spacing:.5px; margin-top:.3rem; display:none; }
.caps-note.visible { display:block; }

/* Strength states */
.strength-weak .strength-bar { width:20%; background:#dc2626; }
.strength-fair .strength-bar { width:40%; background:linear-gradient(90deg,#dc2626,#f59e0b); }
.strength-good .strength-bar { width:60%; background:linear-gradient(90deg,#f59e0b,#10b981); }
.strength-strong .strength-bar { width:80%; background:linear-gradient(90deg,#10b981,#0ea5e9); }
.strength-excellent .strength-bar { width:100%; background:linear-gradient(90deg,#10b981,#0ea5e9,#6366f1); }

/* Decorative gradient border */
.login-card { --border-gradient:linear-gradient(135deg,var(--fac-accent) 0%,var(--fac-accent-alt) 50%,var(--text-muted) 100%); }
.login-card:before { mask:linear-gradient(#fff,#fff) content-box, linear-gradient(#fff,#fff); -webkit-mask:linear-gradient(#fff,#fff) content-box, linear-gradient(#fff,#fff); }

@media (max-width: 930px){
  .card-grid { grid-template-columns:1fr; }
  .card-info { border-right:none; border-bottom:1px solid rgba(255,255,255,0.12); }
  .card-form { padding:2.2rem 2rem 2.4rem; }
}

@media (max-width:640px){
  .card-info, .card-form { padding:2rem 1.5rem 2.2rem; }
  .portal-heading h1 { font-size:1.45rem; }
}
.field { display:flex; flex-direction:column; gap:.4rem; position:relative; }
.field label { font-size:.58rem; letter-spacing:1.2px; font-weight:600; text-transform:uppercase; opacity:.75; display:flex; align-items:center; gap:.35rem; }

.input-wrap { position:relative; display:flex; align-items:center; }
.input-wrap input { width:100%; background:var(--surface-2); border:1px solid var(--border-color); padding:.9rem .95rem .9rem 2.35rem; border-radius: var(--radius-sm); font:inherit; color:var(--text-primary); font-size:.8rem; transition:var(--transition); }
.input-wrap input:focus { outline:none; box-shadow:var(--focus-ring); border-color: var(--fac-accent-alt); }
.input-icon { position:absolute; left:.75rem; color:var(--text-muted); font-size:.8rem; pointer-events:none; }

.password-toggle { position:absolute; right:.55rem; top:50%; transform:translateY(-50%); background:var(--surface-3); border:1px solid var(--border-color); width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-xs); cursor:pointer; color:var(--text-secondary); font-size:.7rem; transition:var(--transition); }
.password-toggle:hover { background:var(--surface-4); color:var(--text-primary); }

.error-msg { font-size:.58rem; color:#dc2626; letter-spacing:.4px; min-height:12px; line-height:1.2; }
.error-msg.hidden { display:none; }

.aux-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem; margin-top:.15rem; }
.remember { display:inline-flex; align-items:center; gap:.45rem; font-size:.62rem; opacity:.75; cursor:pointer; user-select:none; }
.remember input { width:15px; height:15px; accent-color: var(--fac-accent-alt); }
.aux-links { display:flex; gap:1rem; font-size:.62rem; opacity:.65; }
.aux-links a { text-decoration:underline; }

.login-actions { display:flex; flex-direction:column; gap:.9rem; margin-top:.3rem; }
.status-line { font-size:.6rem; letter-spacing:.5px; min-height:14px; opacity:.75; }
.status-line.success { color:#16a34a; opacity:1; }
.status-line.error { color:#dc2626; opacity:1; }

.btn-primary { position:relative; overflow:hidden; }
.btn-primary:disabled { opacity:.6; cursor:not-allowed; }

.btn-primary .spinner { display:inline-flex; margin-right:.5rem; }

@media (max-width:640px) {
  .portal-wrapper { padding:3.5rem 1rem 2.5rem; }
  .login-card { padding:2.1rem 1.65rem 2.3rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .login-card { transition:none; }
}