/* === UNIVERSAL RESET === */
input,
select,
textarea {
  background-color: transparent !important;
  color: inherit !important;
  transition: border-color 0.2s ease;
  box-shadow: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 2rem !important;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  height: 3rem;
  }

/* === PLACEHOLDER CONSISTENCY === */
::placeholder {
  color: inherit !important;
  opacity: 0.6;
}

/* === HIDE NUMBER SPINNERS === */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}


/* === FOCUS OVERRIDE === */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary-color, #61C0BF) !important;
  outline: none;
  box-shadow: none !important;
}

/* === REDUNDANT SUPPORT FOR .form-control JUST IN CASE === */
input.form-control,
select.form-control,
textarea.form-control {
  background-color: inherit !important;
  color: inherit !important;
  border-color: inherit !important;
}
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
  border-color: var(--primary-color, #61C0BF) !important;
  box-shadow: none !important;
  outline: none;
}

@media (prefers-color-scheme: dark) {
  select option {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
  }
}

.card:not(#optionsCard):hover {
  transform: translateY(-4px);
  transition: transform 0.2s ease;
}
}
.hover-shadow-lg:hover {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15) !important;
}

.card-title {
  font-size: 1.4rem;
  font-weight: 600;
}

.card ul li {
  margin-bottom: 0.5rem;
}

.card h6 {
  margin-top: auto;
  font-weight: 600;
}

/* Force tiles to use full page width */
.full-width-tiles .row {
  margin: 0;
  width: 100%;
  justify-content: center;
}

/* Each card stretches within the row responsively */
.full-width-tiles .col-md-6,
.full-width-tiles .col-lg-3 {
  flex: 1 1 22%;
  max-width: 22%;
  margin: 1rem;
}

@media (max-width: 992px) {
  .full-width-tiles .col-md-6,
  .full-width-tiles .col-lg-3 {
    max-width: 45%;
  }
}

@media (max-width: 576px) {
  .full-width-tiles .col-md-6,
  .full-width-tiles .col-lg-3 {
    max-width: 100%;
  }
}

/* ==== Auth & form inputs – dark mode hard overrides ==== */
html[data-bs-theme="dark"] input,
html[data-bs-theme="dark"] select,
html[data-bs-theme="dark"] textarea,
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
  background-color: #1e1e1e !important;  /* solid dark bg so dots/text are visible */
  color: #ffffff !important;             /* text + password dots */
  border: 1px solid #ffffff !important;  /* always show a white border */
  box-shadow: none !important;
}

/* Focus state: keep it obvious and on-brand */
html[data-bs-theme="dark"] input:focus,
html[data-bs-theme="dark"] select:focus,
html[data-bs-theme="dark"] textarea:focus,
html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
  border-color: var(--primary-color, #61C0BF) !important;
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(97, 192, 191, 0.25) !important;
}

/* Placeholder contrast in dark mode */
html[data-bs-theme="dark"] ::placeholder {
  color: #bdbdbd !important;
  opacity: 1; /* Safari */
}

/* Autofill fixes (Chrome/Edge) */
html[data-bs-theme="dark"] input:-webkit-autofill,
html[data-bs-theme="dark"] input:-webkit-autofill:hover,
html[data-bs-theme="dark"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0px 1000px #1e1e1e inset !important;
  transition: background-color 9999s ease-in-out 0s; /* suppress yellow */
}