/* Toshi HRMS auth — dark theme aligned with Bootstrap data-bs-theme="dark" */

:root,
[data-bs-theme="dark"] {
  --auth-page-bg: #0b1220;
  --auth-page-bg-end: #0f172a;
  --auth-card-bg: rgba(30, 41, 59, 0.92);
  --auth-card-border: rgba(148, 163, 184, 0.2);
  --auth-muted: #94a3b8;
  --auth-heading: #f1f5f9;
  --auth-input-bg: rgba(15, 23, 42, 0.75);
  --auth-input-border: rgba(148, 163, 184, 0.25);
}

.auth-shell {
  min-height: 100vh;
}

body.auth-body {
  min-height: 100vh;
  background-color: var(--auth-page-bg);
  background-image: linear-gradient(
    165deg,
    var(--auth-page-bg) 0%,
    var(--auth-page-bg-end) 55%,
    #0b1220 100%
  );
  color: var(--auth-heading);
}

/* Pull Bootstrap dark surfaces in line with our navy palette */
[data-bs-theme="dark"] body.auth-body {
  --bs-body-bg: var(--auth-page-bg);
  --bs-body-color: var(--auth-heading);
  --bs-secondary-color: var(--auth-muted);
  --bs-tertiary-color: #64748b;
  --bs-border-color: rgba(148, 163, 184, 0.22);
  --bs-heading-color: var(--auth-heading);
  --bs-link-color: #93c5fd;
  --bs-link-hover-color: #bfdbfe;
}

.auth-header {
  background-color: rgba(11, 18, 32, 0.85);
  backdrop-filter: blur(8px);
}

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

.auth-card .form-label {
  color: #cbd5e1;
  font-weight: 500;
}

.auth-card .text-secondary,
.auth-body .text-secondary {
  color: var(--auth-muted) !important;
}

.auth-card .form-text {
  color: var(--auth-muted) !important;
}

/* Password reveal: default outline-secondary is for light pages */
.auth-body .input-group .btn-outline-secondary {
  color: #cbd5e1;
  border-color: var(--auth-input-border);
  background-color: rgba(15, 23, 42, 0.5);
}

.auth-body .input-group .btn-outline-secondary:hover {
  color: #f8fafc;
  background-color: rgba(51, 65, 85, 0.6);
  border-color: #64748b;
}

.auth-body .form-check-input {
  border-color: #64748b;
  background-color: rgba(15, 23, 42, 0.6);
}

.auth-body .form-check-input:checked {
  background-color: #2563eb;
  border-color: #2563eb;
}

.auth-body .form-check-label {
  color: var(--auth-muted);
}

.auth-brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #1e40af);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.otp-cell {
  width: 100%;
  max-width: 3rem;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

@media (min-width: 576px) {
  .otp-cell {
    max-width: 3.25rem;
    font-size: 1.35rem;
  }
}

.form-control-dark {
  background-color: var(--auth-input-bg);
  border-color: var(--auth-input-border);
  color: #e2e8f0;
}

.form-control-dark:focus {
  background-color: rgba(15, 23, 42, 0.92);
  border-color: #3b82f6;
  color: #f8fafc;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
}

.form-control-dark::placeholder {
  color: #64748b;
}

.was-validated .form-control-dark:invalid {
  border-color: #f87171;
}

.was-validated .form-control-dark:valid {
  border-color: #4ade80;
}

.auth-body .otp-cell.is-invalid {
  border-color: #f87171;
}

.auth-body .invalid-feedback {
  color: #fca5a5;
}

/* “Resend” text link on dark card */
.auth-body #btnResend {
  color: var(--bs-link-color);
}

.auth-body #btnResend:hover:not(:disabled) {
  color: var(--bs-link-hover-color);
}

.auth-body #btnResend:disabled {
  color: var(--auth-muted);
  opacity: 0.65;
}

.auth-body .progress {
  background-color: rgba(30, 41, 59, 0.95);
  --bs-progress-bar-bg: #3b82f6;
}

.auth-body .auth-progress {
  height: 4px;
}