/* Shared Styles for Auth Pages (Login, Register, Forgot Password, Reset Password) */

::selection {
  background-color: #0066ff !important;
  color: #ffffff !important;
}

::-moz-selection {
  background-color: #0066ff !important;
  color: #ffffff !important;
}

body.login-page, body.register-page {
  background:
    radial-gradient(circle at top, rgba(0, 114, 255, 0.18), transparent 45%),
    linear-gradient(180deg, #0b0f19 0%, #070a12 100%) !important;
  min-height: 100vh;
  color: #f8fafc !important;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  position: relative;
  padding-top: 80px;
  padding-bottom: 80px;
}

.register-box {
  width: 400px;
}

.login-box .card, .register-box .card {
  background: rgba(17, 24, 39, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
  border-radius: 20px;
}

.login-box .login-card-body, .register-box .register-card-body {
  background-color: transparent !important;
  color: #fafaf9 !important;
}

.login-box .form-control, .register-box .form-control {
  background-color: rgba(11, 15, 25, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fafaf9 !important;
  border-radius: 12px 0 0 12px;
  border-right: 0 !important;
}

.login-box .form-control:focus, .register-box .form-control:focus {
  border-color: #0066ff !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 102, 255, 0.25) !important;
}

.login-box .btn-primary, .register-box .btn-primary {
  background: linear-gradient(135deg, #0072ff 0%, #0047ff 100%) !important;
  border-color: #0066ff !important;
  color: #ffffff !important;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 4px 15px rgba(0, 114, 255, 0.35) !important;
}

.login-box .btn-primary:hover, .register-box .btn-primary:hover {
  background: linear-gradient(135deg, #0052ff 0%, #0034d0 100%) !important;
  border-color: #0052ff !important;
  box-shadow: 0 8px 25px rgba(0, 114, 255, 0.5) !important;
}

.login-box .input-group-text, .register-box .input-group-text {
  background-color: rgba(11, 15, 25, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-left: 0 !important;
  color: #fafaf9 !important;
  border-radius: 0 12px 12px 0;
}

.auth-header {
  width: 100%;
  background: rgba(11, 15, 25, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
}

.auth-header .auth-logo {
  font-size: 1.25rem;
  transition: opacity 0.2s;
}

.auth-header .auth-logo:hover {
  opacity: 0.9;
}

.auth-footer {
  width: 100%;
  background: rgba(11, 15, 25, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1000;
}

/* Unified Auth Light/Dark Theme */
:root,
[data-theme="light"],
body.light-mode {
  color-scheme: light;
  --auth-bg: radial-gradient(circle at top, rgba(0, 114, 255, 0.1), transparent 42%), linear-gradient(180deg, #f8fafc 0%, #eef4ff 100%);
  --auth-surface: rgba(255, 255, 255, 0.94);
  --auth-header-bg: rgba(255, 255, 255, 0.88);
  --auth-footer-bg: rgba(255, 255, 255, 0.9);
  --auth-border: rgba(15, 23, 42, 0.1);
  --auth-text: #0f172a;
  --auth-muted: #64748b;
  --auth-input: #ffffff;
}

[data-theme="dark"],
body.dark-mode {
  color-scheme: dark;
  --auth-bg: radial-gradient(circle at top, rgba(0, 114, 255, 0.18), transparent 45%), linear-gradient(180deg, #0b0f19 0%, #070a12 100%);
  --auth-surface: rgba(17, 24, 39, 0.75);
  --auth-header-bg: rgba(11, 15, 25, 0.7);
  --auth-footer-bg: rgba(11, 15, 25, 0.85);
  --auth-border: rgba(255, 255, 255, 0.08);
  --auth-text: #f8fafc;
  --auth-muted: #a8b3c5;
  --auth-input: rgba(11, 15, 25, 0.8);
}

body.login-page,
body.register-page {
  background: var(--auth-bg) !important;
  color: var(--auth-text) !important;
  transition: background 0.28s ease, color 0.28s ease;
}

.login-box .card,
.register-box .card,
.login-box .login-card-body,
.register-box .register-card-body,
.auth-header,
.auth-footer,
.form-control,
.input-group-text,
.btn {
  transition: background-color 0.28s ease, background 0.28s ease, border-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
}

.login-box .card,
.register-box .card {
  background: var(--auth-surface) !important;
  border-color: var(--auth-border) !important;
}

.login-box .login-card-body,
.register-box .register-card-body {
  color: var(--auth-text) !important;
}

.auth-header {
  background: var(--auth-header-bg) !important;
  border-bottom-color: var(--auth-border) !important;
}

.auth-footer {
  background: var(--auth-footer-bg) !important;
  border-top-color: var(--auth-border) !important;
}

body.light-mode .auth-logo,
body.light-mode .login-logo a,
body.light-mode .register-logo a,
body.light-mode .text-white {
  color: #0f172a !important;
}

body.dark-mode .auth-logo,
body.dark-mode .login-logo a,
body.dark-mode .register-logo a,
body.dark-mode .text-white {
  color: #ffffff !important;
}

body.light-mode .text-warning,
body.dark-mode .text-warning {
  color: #0066ff !important;
}

body.light-mode .text-muted {
  color: var(--auth-muted) !important;
}

body.dark-mode .text-muted {
  color: var(--auth-muted) !important;
}

.login-box .form-control,
.register-box .form-control,
.login-box .input-group-text,
.register-box .input-group-text {
  background-color: var(--auth-input) !important;
  border-color: var(--auth-border) !important;
  color: var(--auth-text) !important;
}

.login-box .form-control::placeholder,
.register-box .form-control::placeholder {
  color: var(--auth-muted) !important;
}

.auth-theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 102, 255, 0.24);
  background: rgba(0, 102, 255, 0.08);
  color: #0066ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-theme-toggle:hover {
  background: rgba(0, 102, 255, 0.14);
  transform: translateY(-1px);
}

body.dark-mode .auth-theme-toggle {
  border-color: rgba(56, 189, 248, 0.28);
  background: rgba(56, 189, 248, 0.1);
  color: #38bdf8;
}

/* Theme Switch Polish: auth readability and stable controls */
html.theme-preload *,
html.theme-preload *::before,
html.theme-preload *::after {
  transition: none !important;
}

body.login-page,
body.register-page,
.auth-header,
.auth-footer,
.login-box,
.register-box,
.login-box .card,
.register-box .card,
.login-card-body,
.register-card-body,
.form-control,
.input-group-text,
.auth-theme-toggle,
.alert,
.btn {
  transition-property: background-color, background, border-color, color, box-shadow, opacity, transform;
  transition-duration: 0.24s;
  transition-timing-function: ease;
}

body.light-mode .login-box .card,
body.light-mode .register-box .card {
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.1) !important;
}

body.dark-mode .login-box .card,
body.dark-mode .register-box .card {
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.42) !important;
}

body.light-mode .login-box-msg,
body.light-mode label,
body.light-mode p,
body.light-mode .icheck-primary label {
  color: #334155 !important;
}

body.dark-mode .login-box-msg,
body.dark-mode label,
body.dark-mode p,
body.dark-mode .icheck-primary label {
  color: #cbd5e1 !important;
}

body.light-mode .alert-success {
  background-color: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.24) !important;
  color: #047857 !important;
}

body.dark-mode .alert-success {
  background-color: rgba(16, 185, 129, 0.14) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  color: #bbf7d0 !important;
}

body.light-mode .alert-danger {
  background-color: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.24) !important;
  color: #b91c1c !important;
}

body.dark-mode .alert-danger {
  background-color: rgba(239, 68, 68, 0.14) !important;
  border: 1px solid rgba(239, 68, 68, 0.32) !important;
  color: #fecaca !important;
}

.auth-theme-toggle,
.auth-theme-toggle i {
  flex: 0 0 auto;
}

@media (max-width: 575.98px) {
  body.login-page,
  body.register-page {
    padding-left: 16px;
    padding-right: 16px;
  }

  .login-box,
  .register-box {
    width: min(100%, 400px);
  }
}