/* =========================================
   DCAC DARK THEME OVERRIDES
   Only contains differences from root theme
   ========================================= */

/* =========================================
   1. VARIABLES & CORE SETTINGS
   ========================================= */
:root {
  /* Dark theme colors */
  --bs-danger-text: #FF5353;
  --app-muted-color: #B4B4B4;
  --app-gray-color: #D7D7D6;
  --primary-color: #F28A31;
  --base-color: #FFFFFF;
  --background-color: #171717;
  --mobile-bg-color: #222124;
  --dark-color: #161618;
  --border-color: #3C3C3C;
  --input-border-color: var(--border-color);

  /* Background */
  --bg-image: url('../img/via-bg-dark.jpg');

  /* Button styles */
  --btn-primary-bg: var(--primary-color);
  --btn-outlined-border: var(--primary-color);
  --btn-outlined-bg: transparent;

  /* Component backgrounds */
  --page-bg: var(--background-color);
  --page-border: 1px solid var(--border-color);
  --menu-bg: var(--background-color);
  --menu-border: 1px solid var(--border-color);
  --modal-bg: var(--background-color);
  --modal-text-color: var(--app-muted-color);
  --hamburger-color: var(--base-color);

  /* Border radius */
  --border-radius-xl: 0;
  --border-radius-lg: 0;
  --border-radius-md: 0;
  --border-radius-sm: 0;
  --border-radius-xs: 0;
}

/* =========================================
   2. PAGE LAYOUT OVERRIDES
   ========================================= */
.app-login body {
  background-image: var(--bg-image);
}

.app-page {
  top: 3rem;
  min-height: auto;
  background: var(--background-color);
  border: 1px solid var(--border-color);
  box-shadow: 1px 1px 7.4px 1px rgba(101, 101, 101, 0.26);
}

#kc-content {
  height: auto !important;
  min-height: 514px;
}

#kc-content-wrapper {
  margin-top: 2rem;
}

.help-content {
  position: relative;
  min-height: 514px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

/* =========================================
   3. TYPOGRAPHY OVERRIDES & ADDITIONS
   ========================================= */
h1 {
  margin: 1rem auto;
  font-size: var(--font-title-mobile);
  font-weight: 500;
  max-width: 375px;
  color: var(--base-color);
}

.page-title {
  font-weight: 500;
  font-size: 28px;
}

.esotap-subtitle {
  font-size: var(--font-base-mobile);
  font-weight: normal;
  margin-top: .5rem;
  color: var(--app-gray-color);
}

.instruction a {
  color: var(--base-color) !important;
  text-decoration: underline;
}

.font-bold {
  font-weight: 700;
}

.text-center {
  text-align: center;
}

.title-header-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: .5rem 0;
}

/* =========================================
   4. NAVIGATION OVERRIDES
   ========================================= */

.hamburger span {
  background: var(--base-color);
}

.menu-popup {
  border-radius: 0;
  background: var(--background-color);
  border: 1px solid var(--border-color);
}

/* =========================================
   5. FORM INPUTS OVERRIDES & ADDITIONS
   ========================================= */
.form-control {
  --bs-form-control-bg: var(--dark-color) !important;
  color: var(--base-color) !important;
  border: 1px solid var(--border-color);
  border-radius: 0;
}

input::placeholder {
  color: var(--app-muted-color) !important;
}

/* Browser Specifics */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0px 1000px var(--dark-color) inset !important;
  -webkit-text-fill-color: var(--base-color) !important;
  border: 1px solid var(--border-color) !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.spaced-input {
  letter-spacing: 0.3rem;
  font-family: var(--bs-body-font-family);
  --bs-form-control-bg: var(--dark-color) !important;
  color: var(--base-color) !important;
  background-color: var(--dark-color);
  border: 1px solid var(--border-color);
}

.code-container {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.code-container input {
  width: 46px;
  height: 50px;
  text-align: center;
  font-size: 1.5em;
  background: var(--dark-color);
  border: 1px solid var(--border-color);
  font-family: var(--bs-body-font-family);
}

.code-container input:focus {
  outline: none;
  border-color: var(--base-color);
}

.otp-check-acknowledgement input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--primary-color);
  border: 2px solid var(--border-color);
  border-radius: 3px;
}

.otp-check-acknowledgement input[type="checkbox"]:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.form-group-checkbox input[type="checkbox"] {
  margin-right: 0.5rem;
}

.invalid-feedback {
  margin: .5rem auto .4rem auto;
}

/* =========================================
   6. BUTTONS OVERRIDES
   ========================================= */
.sign-in-btn {
  color: var(--background-color);
  font-size: var(--font-base-mobile);
  background: var(--primary-color);
}

.btn-disabled {
  display: block;
  margin: 1rem auto !important;
  width: 100%;
  max-width: 325px;
  padding: 8px 7px;
  border: none;
  color: var(--app-gray-color) !important;
  font-size: var(--font-caption-mobile);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
  background: var(--border-color) !important;
}

.sign-out-btn-outlined {
  border: 2.5px solid var(--border-color);
  border-radius: 0;
  color: var(--base-color);
  font-size: var(--font-caption-mobile);
  background-color: var(--background-color);
}

.sign-in-btn-outlined {
  border: 1.5px solid var(--border-color);
  border-radius: 0;
  color: var(--base-color);
  font-size: var(--font-caption-mobile);
  background-color: var(--background-color);
}

.sign-in-btn-outlined-small {
  border: 2.5px solid var(--app-muted-color);
  color: var(--app-muted-color);
  font-size: var(--font-caption-mobile);
  background-color: var(--background-color);
}

.btn-copy-code {
  padding: 8px 20px;
  background: var(--primary-color);
  color: var(--background-color);
  font-size: var(--font-caption-mobile);
  font-weight: 500;
  border: none;
  margin-top: 1rem;
  width: 300px;
}

.btn-loading::after {
  content: "Loading...";
  color: var(--dark-color);
}

/* =========================================
   7. TOTP / QR / SECURITY SPECIFICS (NEW)
   ========================================= */
.totp-content-wrapper {
  margin-top: -1rem !important;
}

.totp-main-title {
  font-size: 32px;
  font-weight: 500;
  text-align: center;
  color: var(--base-color);
  margin-top: 0;
  margin-bottom: 5rem;
}

.totp-subtitle {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: var(--app-muted-color);
}

p.totp-instruction {
  font-size: 1rem;
  color: var(--base-color);
  text-align: left;
  line-height: 1.5;
}

#totp-qr-image {
  display: block;
  width: 210px;
  height: 210px;
  margin: .5rem auto;
  border-radius: 4px;
}

.totp-secret-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.35rem 1rem;
  width: fit-content;
}

#totp-secret-key-display {
  color: var(--app-muted-color);
}

.totp-details-list li {
  padding: 0.25rem 0;
  color: var(--base-color);
}

a.totp-switch-link {
  color: var(--app-muted-color);
  font-size: 16px;
  line-height: 26px;
  text-decoration: none;
}

#kc-totp-settings-form {
  margin-top: .5rem;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.totp-input-group {
  display: flex;
  gap: 1rem;
}

.totp-field-wrapper-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  text-align: center;
  max-width: 325px;
}

.totp-input-label {
  font-weight: normal;
  margin-bottom: 1rem;
}

#kc-totp-form-login input[type="text"],
#kc-totp-settings-form input[type="text"] {
  width: 90%;
  font-size: .9rem !important;
  --bs-form-control-bg: var(--dark-color);
  border-radius: 5px;
  padding: 1rem .75rem;
  border: 2px solid var(--border-color);
  text-align: center;
}

.totp-field-wrapper input[type="number"] {
  width: 300px;
  font-size: .9rem !important;
  background: var(--dark-color);
  border-radius: 5px;
  padding: .5rem;
  border: 2px solid var(--border-color);
  text-align: center;
  margin-top: 1rem;
  margin-bottom: -1rem;
}

.totp-field-wrapper-login input[type="number"] {
  width: 100% !important;
  letter-spacing: 0.5rem;
  font-size: 22px;
}

.qr-box {
  max-width: 385px;
  max-height: 385px;
  background-color: var(--base-color);
  aspect-ratio: 1 / 1;
  padding: .7rem;
  border: .4rem solid transparent;
  border-image: linear-gradient(35deg,
      #F18930 0%,
      #F88821 30%,
      #F18930 45%,
      #4CD5FA 70%,
      #50D3F5 100%) 1;
}

.qr-box-download {
  margin: 2rem auto 0 auto;
  width: 100%;
  max-width: 385px;
  height: 100%;
  max-height: 385px;
  background-color: var(--base-color);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  aspect-ratio: 1 / 1;
  padding: 1rem;
}

#qr-code img {
  margin: 0 auto;
  background: var(--base-color);
}


#vc-decryption-code-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  margin-top: 2rem;
}

#screen-setup {
  margin-top: -4rem !important;
}

#totp-submit-wrapper {
  max-width: 300px;
  text-align: center;
}

#totp-submit-wrapper input[type="submit"] {
  width: 300px !important;
  padding: 0.5rem 2rem;
}

/* =========================================
   8. MODALS OVERRIDES & ADDITIONS
   ========================================= */
.custom-modal-content {
  background-color: var(--background-color);
  border-radius: 0;
  color: var(--base-color);
}

.custom-modal-download-content {
  background-color: var(--background-color);
  margin: 10% auto;
  padding: 36px;
  border-radius: 0;
  width: 100%;
  max-width: 583px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  font-family: inherit;
  color: var(--app-muted-color);
  text-align: center;
}

.custom-modal-title {
  color: var(--base-color);
}

.custom-modal-download-title {
  font-size: var(--font-title-desktop);
  color: var(--base-color);
  font-weight: 500;
  line-height: 32px;
  margin: 2rem 0;
  text-align: center;
}

.custom-modal-close {
  color: var(--app-muted-color);
}

.custom-modal-footer {
  color: var(--app-muted-color);
}

/* =========================================
   9. FOOTER LINKS OVERRIDES & ADDITIONS
   ========================================= */
#kc-registration {
  font-size: var(--font-base-mobile);
  color: var(--app-muted-color);
  bottom: 13rem;
}

#kc-form-options span a {
  color: var(--base-color);
}

#kc-logout-confirm>#kc-info-message {
  border: 1px solid var(--border-color);
  border-radius: 5px;
  color: var(--base-color);
  font-size: var(--font-caption-mobile);
  background-color: var(--background-color);
}

#tnc-login {
  bottom: 2rem;
}

#tnc-login p a {
  color: var(--base-color) !important;
  font-size: var(--font-base-mobile) !important;
}

#tnc-register {
  color: var(--app-muted-color) !important;
  font-size: var(--font-base-mobile);
  font-weight: 600 !important;
}

#tnc-register a {
  color: var(--app-muted-color) !important;
  text-decoration: underline !important;
}

.user-exists {
  color: var(--app-muted-color) !important;
}

.user-exists a {
  color: var(--base-color);
}

.trouble-signing-in {
  bottom: -2rem;
}


/* =========================================
   10. NOTIFICATIONS (NEW)
   ========================================= */
.notification-container {
  border-radius: 0;
  background: var(--primary-color);
}

.notification-message {
  color: #191919 !important;
}