/* Top widget */
.text-extra-small {
  font-size: 0.8rem;
}

/* Fixed footer */
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.container {
  flex: 1;
}
/* Global Google typography set
body {
  font-family: 'Roboto', sans-serif;
}*/

/* Max width in desktop */
.container {
  max-width: 900px !important;
}
/* Large buttons and inputs sizes */
.form-control {
  height: 44px;
  padding: 0.375rem 0.75rem; 
  font-size: 1rem;
}
form .form-select {
  height: 44px; /* Adjust the height as needed */
}

.btn {
  height: 44px;
  font-size: 1rem;
  padding: 0.375rem 0.75rem;
}

/* Index page for tools work in progress */
.disabled-component {
  opacity: 0.5; /* Makes it look disabled */
  pointer-events: none; /* Prevents all interactions */
  user-select: none; /* Disables text selection */
}

/* Light mode alert styling */
[data-bs-theme="light"] .alert-info {
  background-color: rgba(96, 27, 202, 0.15) !important; /* Purple with opacity */
  color: #601BCA !important; /* Primary purple text */
  border-color: #601BCA !important;
}

/* Dark mode alert styling */
[data-bs-theme="dark"] .alert-info {
  background-color: rgba(155, 93, 247, 0.25) !important; /* Lighter purple with opacity */
  color: white !important;
  border-color: #9b5df7 !important;
}

/* Ensure close button is visible */
.alert-dismissible .btn-close {
  filter: invert(1); /* Darken close button */
  opacity: 0.75;
}

[data-bs-theme="light"] .alert-dismissible .btn-close {
  filter: invert(0); /* Keep it visible in light mode */
  opacity: 1;
}
/* Primary button styling */
.btn-primary {
  background-color: #601BCA !important;
  border-color: #601BCA !important;
}

.btn-primary:hover {
  background-color: #4e16a3 !important; /* Darker shade for hover */
  border-color: #4e16a3 !important;
}

.btn-primary:active,
.btn-primary:focus {
  background-color: #3c1180 !important; /* Even darker on active */
  border-color: #3c1180 !important;
  box-shadow: 0 0 0 0.2rem rgba(96, 27, 202, 0.5) !important;
}

/* Toggle switch color */
.form-check-input:checked {
  background-color: #601BCA !important;
  border-color: #601BCA !important;
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(96, 27, 202, 0.5) !important;
}

/* Custom primary color text class */
.text-primary-purple {
  color: #601BCA !important;
}