/* UTEC auth — login, forgot, reset */
.auth-wrapper {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 12% 18%, rgba(245,196,0,.22), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(200,16,46,.14), transparent 40%),
    linear-gradient(160deg, #fffdf6, #fff4c4 55%, #fff8e8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.auth-wrapper::before,
.auth-wrapper::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(8px);
}
.auth-wrapper::before {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(200,16,46,.1), transparent 62%);
  top: -180px; right: -160px;
}
.auth-wrapper::after {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(245,196,0,.16), transparent 62%);
  bottom: -160px; left: -140px;
}
.auth-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.auth-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(36px);
  opacity: .32;
  animation: auth-float 18s ease-in-out infinite;
}
.auth-orb.a { width: 200px; height: 200px; background: #f5c400; top: 12%; left: 8%; }
.auth-orb.b { width: 160px; height: 160px; background: #c8102e; bottom: 14%; right: 10%; animation-delay: -8s; }
@keyframes auth-float {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(14px,-18px,0) scale(1.08); }
}

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 980px;
  background: #fff;
  color: #1a1a1a;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(154, 12, 36, .16);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 580px;
  border: 1px solid rgba(245, 196, 0, .35);
  animation: auth-rise .55s ease both;
}
.auth-card--solo {
  grid-template-columns: 1fr;
  max-width: 520px;
  min-height: 0;
}
@keyframes auth-rise {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.auth-brand {
  background: linear-gradient(160deg, #c8102e 0%, #9a0c24 62%, #7a091c 100%);
  padding: 46px 42px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.auth-brand::before,
.auth-brand::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.12);
}
.auth-brand::before { width: 320px; height: 320px; top: -80px; right: -80px; }
.auth-brand::after { width: 220px; height: 220px; bottom: -60px; left: -60px; }
.auth-brand-logo {
  display: flex; align-items: center; gap: 14px;
  position: relative; z-index: 2;
}
.auth-brand-logo .logo-mark.logo-mark-img {
  background: #0b0b0b;
  object-fit: cover;
  padding: 0;
  border: 1px solid rgba(255,255,255,.15);
}
.auth-brand-logo .logo-mark {
  width: 54px; height: 54px; border-radius: 14px;
  background: #f5c400;
  color: #1a1a1a;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 22px;
  border: 1px solid rgba(255,255,255,.2);
}
.auth-brand-logo h1 {
  color: #fff;
  font-size: 22px;
  letter-spacing: .3px;
  margin: 0;
}
.auth-brand-logo h1 span {
  font-weight: 600; font-size: 12px; color: #ffe07a;
  display: block; letter-spacing: .2px; text-transform: none;
  margin-top: 3px;
}
.auth-brand-copy {
  position: relative; z-index: 2;
  max-width: 380px;
}
.auth-brand-copy h2 {
  color: #fff;
  font-size: 28px;
  line-height: 1.25;
  margin: 0 0 14px;
}
.auth-brand-copy h2 em {
  font-style: normal;
  color: #f5c400;
  background: none;
  -webkit-text-fill-color: #f5c400;
}
.auth-brand-copy p {
  color: rgba(255,255,255,.88);
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 22px;
}
.auth-features {
  list-style: none;
  display: flex; flex-direction: column; gap: 12px;
  padding: 0; margin: 0;
}
.auth-features li {
  display: flex; align-items: center; gap: 12px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  opacity: 0;
  transform: translateX(-8px);
  animation: auth-in .45s ease forwards;
}
.auth-features li:nth-child(1) { animation-delay: .15s; }
.auth-features li:nth-child(2) { animation-delay: .25s; }
.auth-features li:nth-child(3) { animation-delay: .35s; }
.auth-features li:nth-child(4) { animation-delay: .45s; }
@keyframes auth-in {
  to { opacity: 1; transform: none; }
}
.auth-features li .feat-icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(245,196,0,.22);
  color: #f5c400;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.auth-features li .feat-icon .material-symbols-rounded { font-size: 17px; }

.auth-brand-foot {
  position: relative; z-index: 2;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  color: rgba(255,255,255,.78);
  font-size: 12px; font-weight: 500;
}
.auth-brand-foot a { color: #ffe07a; }
.auth-brand-foot a:hover { color: #fff; }

.auth-solo-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  background: linear-gradient(90deg, #c8102e, #9a0c24);
  color: #fff;
}
.auth-solo-bar .logo-mark {
  width: 40px; height: 40px; border-radius: 11px;
  background: #f5c400; color: #1a1a1a;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}
.auth-solo-bar .logo-mark-img { object-fit: cover; background: #0b0b0b; }
.auth-solo-bar strong { display: block; font-size: 15px; color: #fff; }
.auth-solo-bar small { display: block; color: #ffe07a; font-size: 11px; font-weight: 600; }

.auth-form-wrap {
  padding: 50px 48px;
  display: flex; flex-direction: column;
  justify-content: center;
  background: #fff;
  color: #1a1a1a;
}
.auth-form-head { margin-bottom: 28px; }
.auth-form-head .back-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: #6b6258; font-size: 12.5px; font-weight: 600;
  margin-bottom: 16px;
}
.auth-form-head .back-link:hover { color: #c8102e; }
.auth-form-head h2 {
  font-size: 26px; color: #1a1a1a;
  margin: 0 0 6px;
}
.auth-form-head p {
  color: #5c564e;
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}
.auth-form { width: 100%; max-width: 400px; }
.auth-form .btn-block { margin-top: 10px; padding: 13px 18px; font-size: 14px; }
.auth-form-foot {
  margin-top: 22px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: #5c564e;
  flex-wrap: wrap; gap: 10px;
}
.auth-form-foot a { color: #c8102e; font-weight: 700; }
.auth-form-foot a:hover { color: #9a0c24; }
.auth-divider {
  margin: 24px 0 16px;
  position: relative;
  display: flex; align-items: center;
}
.auth-divider::before,
.auth-divider::after {
  content: ''; flex: 1; height: 1px;
  background: #efe3b0;
}
.auth-divider span {
  padding: 0 14px;
  color: #8a8174; font-size: 12px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .8px;
}

.auth-form-wrap .form-group label,
.auth-form-wrap label {
  color: #3d3d3d;
}
.auth-form-wrap .form-control,
.auth-form-wrap input.form-control,
.auth-form-wrap textarea.form-control {
  background-color: #fffdf8;
  color: #1a1a1a;
  border: 1px solid #e6d48a;
}
.auth-form-wrap .form-control::placeholder { color: #9a9080; }
.auth-form-wrap .form-control:focus {
  border-color: #c8102e;
  box-shadow: 0 0 0 3px rgba(200,16,46,.14);
}
.auth-form-wrap .form-help { color: #6b6258; }
.auth-pass { position: relative; }
.auth-pass .icon-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; background: transparent; border: none;
  color: #6b6258;
}
.auth-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 16px 0 20px; gap: 10px; flex-wrap: wrap;
}
.auth-check {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13px; color: #4a453e; font-weight: 500;
}
.auth-check input { width: 16px; height: 16px; accent-color: #c8102e; }
.auth-link { font-weight: 700; font-size: 13px; color: #c8102e; }
.auth-link:hover { color: #9a0c24; }

.auth-wrapper .btn-primary {
  background: #c8102e;
  border-color: #c8102e;
  color: #fff;
  box-shadow: 0 8px 18px rgba(200,16,46,.25);
}
.auth-wrapper .btn-primary:hover { background: #9a0c24; color: #fff; }
.auth-wrapper .btn-secondary,
.auth-wrapper .btn-outline-primary {
  background: #f5c400;
  border-color: #f5c400;
  color: #1a1a1a;
}
.auth-wrapper .btn-secondary:hover,
.auth-wrapper .btn-outline-primary:hover {
  background: #ffd84a;
  color: #1a1a1a;
}

.role-select-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.role-chip {
  padding: 12px 10px;
  border: 2px solid #e6d48a;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  color: #1a1a1a;
  transition: all .15s;
}
.role-chip:hover { border-color: #c8102e; background: rgba(200,16,46,.04); }
.role-chip.selected {
  border-color: #c8102e;
  background: #fff4c4;
  color: #9a0c24;
  font-weight: 600;
}
.role-chip .material-symbols-rounded { font-size: 22px; display: block; margin: 0 auto 4px; color: #8a8174; }
.role-chip.selected .material-symbols-rounded { color: #c8102e; }
.role-chip span.lbl { font-size: 11.5px; font-weight: 600; display: block; }

body.auth-page .global-theme-wrap { display: block; }
body.auth-page .global-theme-wrap .icon-btn {
  background: #fff;
  color: #1a1a1a;
  border: 1px solid #f3d56a;
}

@media (max-width: 860px) {
  .auth-card { grid-template-columns: 1fr; max-width: 480px; }
  .auth-brand { padding: 32px 28px; min-height: 0; }
  .auth-brand-copy h2 { font-size: 22px; }
  .auth-form-wrap { padding: 32px 28px; }
  .auth-features { display: none; }
}
@media (max-width: 480px) {
  .auth-wrapper { padding: 10px; padding-bottom: 24px; }
  .auth-card { border-radius: 20px; }
  .auth-brand, .auth-form-wrap { padding: 24px 20px; }
  .role-select-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Dark mode — explicit contrast, do not rely on dashboard tokens alone */
html[data-theme="dark"] .auth-wrapper {
  background:
    radial-gradient(circle at 12% 18%, rgba(245,196,0,.12), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(200,16,46,.22), transparent 42%),
    linear-gradient(160deg, #12080c, #1a0e12 60%, #140a0c);
  color: #f6f0e6;
}
html[data-theme="dark"] .auth-card {
  background: #23181c;
  color: #f6f0e6;
  border-color: rgba(245,196,0,.28);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
html[data-theme="dark"] .auth-form-wrap {
  background: #23181c;
  color: #f6f0e6;
}
html[data-theme="dark"] .auth-form-head h2 { color: #fff8ee !important; }
html[data-theme="dark"] .auth-form-head p,
html[data-theme="dark"] .auth-form-foot,
html[data-theme="dark"] .auth-form-foot span,
html[data-theme="dark"] .auth-form-wrap .form-help,
html[data-theme="dark"] .auth-divider span,
html[data-theme="dark"] .auth-check {
  color: #d2c8ba !important;
}
html[data-theme="dark"] .auth-form-head .back-link { color: #c9bfb2 !important; }
html[data-theme="dark"] .auth-form-head .back-link:hover { color: #ffd84a !important; }
html[data-theme="dark"] .auth-form-foot a,
html[data-theme="dark"] .auth-link { color: #ffd84a !important; }
html[data-theme="dark"] .auth-form-foot a:hover,
html[data-theme="dark"] .auth-link:hover { color: #fff4c4 !important; }
html[data-theme="dark"] .auth-form-wrap .form-group label,
html[data-theme="dark"] .auth-form-wrap label {
  color: #f0e8dc !important;
}
html[data-theme="dark"] .auth-form-wrap .form-control,
html[data-theme="dark"] .auth-form-wrap input.form-control,
html[data-theme="dark"] .auth-form-wrap textarea.form-control,
html[data-theme="dark"] .auth-form-wrap select.form-control {
  background-color: #2f2328 !important;
  color: #fff8ee !important;
  border-color: #5a4a42 !important;
  box-shadow: none;
}
html[data-theme="dark"] .auth-form-wrap .form-control::placeholder {
  color: #b4a89a !important;
}
html[data-theme="dark"] .auth-form-wrap .form-control:focus {
  border-color: #f5c400 !important;
  box-shadow: 0 0 0 3px rgba(245,196,0,.2) !important;
}
html[data-theme="dark"] .auth-pass .icon-btn { color: #d2c8ba !important; }
html[data-theme="dark"] .auth-divider::before,
html[data-theme="dark"] .auth-divider::after { background: #4a3c38; }
html[data-theme="dark"] .auth-wrapper .btn-secondary,
html[data-theme="dark"] .auth-wrapper .btn-outline-primary {
  background: #f5c400 !important;
  border-color: #f5c400 !important;
  color: #1a1a1a !important;
}
html[data-theme="dark"] .auth-wrapper .btn-primary {
  background: #c8102e !important;
  color: #fff !important;
}
html[data-theme="dark"] .auth-wrapper .alert-success,
html[data-theme="dark"] .auth-wrapper .alert-danger,
html[data-theme="dark"] .auth-wrapper .alert-info,
html[data-theme="dark"] .auth-wrapper .alert-warning {
  color: inherit;
}
html[data-theme="dark"] .auth-wrapper .alert b { color: #fff8ee; }
html[data-theme="dark"] .role-chip {
  background: #2f2328;
  border-color: #5a4a42;
  color: #f0e8dc;
}
html[data-theme="dark"] .role-chip.selected {
  background: rgba(245,196,0,.16);
  border-color: #f5c400;
  color: #ffe07a;
}
html[data-theme="dark"] body.auth-page .global-theme-wrap .icon-btn {
  background: #2f2328;
  color: #fff8ee;
  border-color: #5a4a42;
}

@media (prefers-reduced-motion: reduce) {
  .auth-card, .auth-features li, .auth-orb { animation: none !important; opacity: 1 !important; transform: none !important; }
}