/* ============================================
   SurveyIQ Account Pages Branding
   ============================================ */
/* CSS Variables for SurveyIQ Brand */
:root {
  --siq-primary: #4A5DB5;
  --siq-primary-light: #6B7ADB;
  --siq-primary-dark: #3A4D95;
  --siq-accent: #8B9AEB;
  --siq-text-dark: #2C3E50;
  --siq-text-light: #6C757D;
  --siq-text-muted: #ADB5BD;
  --siq-bg-primary: #FFFFFF;
  --siq-bg-secondary: #F8F9FA;
  --siq-bg-tertiary: #E9ECEF;
  --siq-border-light: #E9ECEF;
  --siq-border-medium: #DEE2E6;
  --siq-radius-sm: 4px;
  --siq-radius-md: 8px;
  --siq-radius-lg: 12px;
  --siq-radius-xl: 16px;
  --siq-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --siq-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --siq-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --siq-font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Base Typography */
body {
  font-family: var(--siq-font-family) !important;
}
/* ============================================
   Login Container
   ============================================ */
.bg-body.rounded.shadow-sm {
  border-radius: var(--siq-radius-xl) !important;
  box-shadow: var(--siq-shadow-lg) !important;
  border-top: 4px solid var(--siq-primary) !important;
}
/* ============================================
   Page Titles
   ============================================ */
.login-form h3,
.fw-bolder.text-gray-900 {
  color: var(--siq-text-dark) !important;
  font-family: var(--siq-font-family) !important;
  font-weight: 700 !important;
}
/* ============================================
   Form Controls
   ============================================ */
.form-control-solid {
  background-color: var(--siq-bg-secondary) !important;
  border: 2px solid var(--siq-border-light) !important;
  border-radius: var(--siq-radius-md) !important;
  font-family: var(--siq-font-family) !important;
  transition: all 0.2s ease !important;
}
.form-control-solid:focus,
.form-control-solid:active {
  background-color: var(--siq-bg-primary) !important;
  border-color: var(--siq-primary) !important;
  box-shadow: 0 0 0 3px rgba(74, 93, 181, 0.15) !important;
}
.form-control-solid::placeholder {
  color: var(--siq-text-muted) !important;
}
/* ============================================
   Primary Buttons - HIGH SPECIFICITY
   ============================================ */
.btn.btn-primary,
button.btn-primary,
input.btn-primary,
a.btn-primary,
.login-form .btn-primary,
.login-form .btn.btn-primary,
form .btn-primary,
.form .btn-primary {
  background: linear-gradient(135deg, #4A5DB5 0%, #6B7ADB 100%) !important;
  background-color: #4A5DB5 !important;
  border: none !important;
  border-color: #4A5DB5 !important;
  border-radius: var(--siq-radius-md) !important;
  font-family: var(--siq-font-family) !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(74, 93, 181, 0.3) !important;
  color: #ffffff !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
button.btn-primary:hover,
button.btn-primary:focus,
button.btn-primary:active,
.login-form .btn-primary:hover,
.login-form .btn-primary:focus,
.login-form .btn-primary:active,
form .btn-primary:hover,
form .btn-primary:focus,
form .btn-primary:active {
  background: linear-gradient(135deg, #3A4D95 0%, #4A5DB5 100%) !important;
  background-color: #3A4D95 !important;
  border-color: #3A4D95 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(74, 93, 181, 0.4) !important;
  color: #ffffff !important;
}
/* ============================================
   Secondary/Light Buttons - HIGH SPECIFICITY
   ============================================ */
.btn.btn-light-primary,
button.btn-light-primary,
a.btn-light-primary,
.login-form .btn-light-primary,
form .btn-light-primary {
  background-color: rgba(74, 93, 181, 0.1) !important;
  color: #4A5DB5 !important;
  border: 1px solid rgba(74, 93, 181, 0.2) !important;
  border-radius: var(--siq-radius-md) !important;
  font-family: var(--siq-font-family) !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}
.btn.btn-light-primary:hover,
.btn.btn-light-primary:focus,
.btn.btn-light-primary:active,
a.btn-light-primary:hover,
a.btn-light-primary:focus,
.login-form .btn-light-primary:hover,
.login-form .btn-light-primary:focus,
form .btn-light-primary:hover,
form .btn-light-primary:focus {
  background-color: rgba(74, 93, 181, 0.2) !important;
  color: #3A4D95 !important;
  border-color: rgba(74, 93, 181, 0.3) !important;
}
/* ============================================
   Links - HIGH SPECIFICITY
   ============================================ */
.text-primary,
a.text-primary,
.login-form a,
.login-form .text-primary,
.mt-5 a,
#forget-password,
#register-btn,
#email-activation-btn,
#passwordless-btn {
  color: #4A5DB5 !important;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.text-primary:hover,
a.text-primary:hover,
.text-hover-primary:hover,
.login-form a:hover,
#forget-password:hover,
#register-btn:hover,
#email-activation-btn:hover,
#passwordless-btn:hover {
  color: #3A4D95 !important;
}
/* ============================================
   Checkboxes - HIGH SPECIFICITY
   ============================================ */
.form-check-input:checked,
input.form-check-input:checked,
.login-form .form-check-input:checked {
  background-color: #4A5DB5 !important;
  border-color: #4A5DB5 !important;
}
.form-check-input:focus,
input.form-check-input:focus,
.login-form .form-check-input:focus {
  border-color: #6B7ADB !important;
  box-shadow: 0 0 0 3px rgba(74, 93, 181, 0.15) !important;
}
.form-check-label {
  font-family: var(--siq-font-family) !important;
  color: var(--siq-text-dark);
}
/* ============================================
   Alerts - HIGH SPECIFICITY
   ============================================ */
.alert.alert-success,
.login-form .alert-success {
  background-color: rgba(40, 167, 69, 0.1) !important;
  border: 1px solid rgba(40, 167, 69, 0.2) !important;
  color: #28a745 !important;
  border-radius: var(--siq-radius-md) !important;
}
.alert.alert-warning,
.login-form .alert-warning {
  background-color: rgba(255, 193, 7, 0.1) !important;
  border: 1px solid rgba(255, 193, 7, 0.2) !important;
  color: #856404 !important;
  border-radius: var(--siq-radius-md) !important;
}
.alert.alert-danger,
.login-form .alert-danger {
  background-color: rgba(220, 53, 69, 0.1) !important;
  border: 1px solid rgba(220, 53, 69, 0.2) !important;
  color: #dc3545 !important;
  border-radius: var(--siq-radius-md) !important;
}
.alert.alert-primary,
.login-form .alert-primary,
.bg-light-primary {
  background-color: rgba(74, 93, 181, 0.1) !important;
  border: 1px solid rgba(74, 93, 181, 0.2) !important;
  color: #4A5DB5 !important;
  border-radius: var(--siq-radius-md) !important;
}
/* ============================================
   Social Login Buttons
   ============================================ */
.external-logins .btn {
  border-radius: var(--siq-radius-md) !important;
  margin-right: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.divider {
  color: var(--siq-text-muted);
  font-family: var(--siq-font-family);
}
.divider span {
  background: var(--siq-bg-primary);
  padding: 0 1rem;
}
/* ============================================
   Tenant Change Box
   ============================================ */
.tenant-change-box {
  background-color: var(--siq-bg-secondary);
  border-radius: var(--siq-radius-md);
  padding: 1rem;
}
.tenant-change-box a,
.tenant-change-box .text-primary {
  color: #4A5DB5 !important;
}
.tenant-change-box a:hover {
  color: #3A4D95 !important;
}
/* ============================================
   Password Visibility Toggle
   ============================================ */
[data-kt-password-meter="true"] .btn-icon {
  color: var(--siq-text-muted);
}
[data-kt-password-meter="true"] .btn-icon:hover {
  color: #4A5DB5;
}
/* ============================================
   Registration Result
   ============================================ */
.login-form ul {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
.login-form ul li {
  padding: 0.75rem 1rem;
  background-color: var(--siq-bg-secondary);
  border-radius: var(--siq-radius-md);
  margin-bottom: 0.5rem;
  font-family: var(--siq-font-family);
}
.login-form ul li .text-muted {
  color: var(--siq-text-light) !important;
  font-weight: 600;
  margin-right: 0.5rem;
}
/* ============================================
   Session Lock Screen
   ============================================ */
.card-bordered {
  border: 1px solid var(--siq-border-light) !important;
  border-radius: var(--siq-radius-lg) !important;
  box-shadow: var(--siq-shadow-md) !important;
}
.symbol-circle {
  border: 3px solid #4A5DB5 !important;
}
/* ============================================
   QR Login
   ============================================ */
#qrLoginContainer .card {
  border-radius: var(--siq-radius-lg) !important;
  border: 1px solid var(--siq-border-light) !important;
}
#qrLoginContainer .spinner-border {
  color: #4A5DB5 !important;
}
/* ============================================
   Footer Links
   ============================================ */
.login-form .mt-5 a,
.mt-5.text-center a {
  color: #4A5DB5 !important;
  text-decoration: none;
  font-weight: 600;
}
.login-form .mt-5 a:hover,
.mt-5.text-center a:hover {
  color: #3A4D95 !important;
  text-decoration: underline;
}
.pipe-divider {
  color: var(--siq-text-muted) !important;
  margin: 0 0.25rem;
}
/* ============================================
   Countdown Timer
   ============================================ */
.remaining-time-counter {
  font-family: var(--siq-font-family);
  font-weight: 600;
}
/* ============================================
   Select Dropdowns
   ============================================ */
select.form-control-solid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234A5DB5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 16px 12px !important;
  padding-right: 2.5rem !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
/* ============================================
   Language Switcher
   ============================================ */
.d-flex.align-items-center.fw-bold.fs-6 a {
  color: var(--siq-text-light);
  transition: color 0.2s ease;
}
.d-flex.align-items-center.fw-bold.fs-6 a:hover {
  color: #4A5DB5;
}
/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 576px) {
  .bg-body.rounded.shadow-sm {
    margin: 1rem !important;
    padding: 1.5rem !important;
  }
  .login-form h3 {
    font-size: 1.5rem !important;
  }
  .btn-primary,
  .btn-light-primary {
    width: 100% !important;
    margin-bottom: 0.5rem !important;
  }
}
/* ============================================
   Password Strength Meter
   ============================================ */
.pwstrength-div .password-verdict {
  font-family: var(--siq-font-family);
  font-size: 0.875rem;
  margin-top: 0.5rem;
}
.pwstrength-div .progress {
  height: 4px;
  border-radius: var(--siq-radius-sm);
  margin-top: 0.5rem;
}
/* ============================================
   Form Labels
   ============================================ */
.login-form p {
  font-family: var(--siq-font-family);
  color: var(--siq-text-light);
  margin-bottom: 1.5rem;
}
.form-label {
  font-family: var(--siq-font-family) !important;
  color: var(--siq-text-dark) !important;
}
/* ============================================
   Input Group Icons
   ============================================ */
.input-group-text {
  background-color: var(--siq-bg-secondary);
  border: 2px solid var(--siq-border-light);
  border-radius: var(--siq-radius-md);
  color: var(--siq-text-muted);
}
/* ============================================
   Logo Area Enhancement
   ============================================ */
.account-logo-area {
  margin-bottom: 2rem;
}
.account-logo-area img {
  max-height: 60px;
}
/* ============================================
   Override Metronic Primary Color Variables
   ============================================ */
body {
  --kt-primary: #4A5DB5 !important;
  --kt-primary-active: #3A4D95 !important;
  --kt-primary-light: #6B7ADB !important;
  --kt-primary-inverse: #ffffff !important;
}
/* Force button background image removal and use solid gradient */
.btn.btn-primary {
  background-image: linear-gradient(135deg, #4A5DB5 0%, #6B7ADB 100%) !important;
}
/* ============================================
   Specific Button ID Overrides (Metronic)
   ============================================ */
#kt_login_signin_submit,
#kt_login_signin_submit.btn,
#kt_login_signin_submit.btn-primary,
button#kt_login_signin_submit {
  background: linear-gradient(135deg, #4A5DB5 0%, #6B7ADB 100%) !important;
  background-color: #4A5DB5 !important;
  border: none !important;
  border-color: #4A5DB5 !important;
  box-shadow: 0 2px 8px rgba(74, 93, 181, 0.3) !important;
  color: #ffffff !important;
}
#kt_login_signin_submit:hover,
#kt_login_signin_submit:focus,
#kt_login_signin_submit:active {
  background: linear-gradient(135deg, #3A4D95 0%, #4A5DB5 100%) !important;
  background-color: #3A4D95 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(74, 93, 181, 0.4) !important;
}
#register-submit-btn,
#back-btn,
#register-back-btn,
#session-lock-screen-submit-button {
  background: linear-gradient(135deg, #4A5DB5 0%, #6B7ADB 100%) !important;
  border: none !important;
}
#register-submit-btn:hover,
#session-lock-screen-submit-button:hover {
  background: linear-gradient(135deg, #3A4D95 0%, #4A5DB5 100%) !important;
}