html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; }

html { position: relative; min-height: 100%; }
body { margin-bottom: 60px; }

/* --- Custom Theme for UnivPortal --- */
:root{
  --bg-surface: #f3f5f7;
  --card-bg: #ffffff;
  --text: #1f2a37;
  --muted: #6b7280;
  --primary: #d1423f; /* red */
  --primary-hover: #bd3a37;
  --success: #22c55e; /* green */
  --shadow: 0 10px 30px rgba(31,41,55,.08);
  --radius: 16px;
}

.bg-surface{ background: var(--bg-surface); }

.card-auth{
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 520px;
  width: 100%;
}

.btn-primary{ background-color: var(--primary) !important; border-color: var(--primary) !important; }
.btn-primary:hover{ background-color: var(--primary-hover) !important; border-color: var(--primary-hover) !important; }

.btn-toggle{ background: #fff; border: 1px solid #e5e7eb; color: var(--text); }
.btn-toggle.active{ background: #fff1f0; border-color: #ffd1ce; color: var(--primary); box-shadow: 0 4px 12px rgba(209,66,63,.15); }
.btn-toggle.disabled{ opacity: .6; }

.link-help{ color: var(--primary); text-decoration: none; }
.link-help:hover{ text-decoration: underline; }

.card-dashboard{ background: var(--card-bg); border-radius: 14px; box-shadow: var(--shadow); }
.badge-active{ background: #e9f9ee; color: #0c7a2b; border-radius: 999px; padding: .25rem .5rem; font-weight: 600; }

.progress-thin{ height: 8px; border-radius: 999px; }
/* Captcha row improved layout */
.captcha-row { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.captcha-row img { height: 44px; border-radius:.25rem; border:1px solid #dee2e6; }
.captcha-row input[type="text"] { flex:1 1 160px; min-width:160px; }
.captcha-row button { white-space:nowrap; }

/* Thin progress bar (CSP-safe; replaces inline height style) */
.progress-thin { height: 4px; }

/* Password strength bar widths via classes (avoid inline styles) */
#passwordStrength.strength-0 { width: 0%; }
#passwordStrength.strength-20 { width: 20%; }
#passwordStrength.strength-40 { width: 40%; }
#passwordStrength.strength-60 { width: 60%; }
#passwordStrength.strength-80 { width: 80%; }
#passwordStrength.strength-100 { width: 100%; }

/* Bootstrap 3 glyphicon -> Font Awesome shim for DNTCaptcha refresh button */
.glyphicon.glyphicon-refresh::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f021"; /* fa-sync */
}
.glyphicon { display: inline-block; line-height: 1; }
.btn-sm.glyphicon, .btn-sm .glyphicon { font-size: .875rem; }

/* DNTCaptcha refresh anchor appearance */
#dntCaptchaRefreshButton {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: .25rem;
  margin-left: .25rem;
  color: #0d6efd; /* bootstrap primary */
}
#dntCaptchaRefreshButton:hover,
#dntCaptchaRefreshButton:focus {
  text-decoration: none;
  color: #0b5ed7; /* bootstrap primary hover */
  outline: none;
}
#dntCaptchaRefreshButton:focus-visible {
  outline: 2px solid rgba(13,110,253,.5);
  outline-offset: 2px;
}
/* DNTCaptcha layout stabilization and alignment */
.captcha-row { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; min-height:64px; }
.captcha-row [id^="dntCaptcha"] { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.captcha-row [id^="dntCaptcha"] img { height:48px; width:auto; display:block; border-radius:.25rem; border:1px solid #dee2e6; background:#fff; }
.captcha-row input[type="text"] { height:48px; }