/**app/assets/stylesheets/global.css**/
* {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  padding: 0px;
  margin: 0px;
  font-size: 16px; /* Root font size */
}

.main-container {
  width: 100%; /* Remove dvw as it can cause overflow */
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box; /* Important for mobile */
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hidden {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: -1 !important;
  opacity: 0 !important;
  display: none !important;
}

/* Typography Styles */
.text-heading {
  font-size: 1.75rem; /* Title 1 (28px) */
  font-weight: 700;
  line-height: 2.25rem;
}

.text-subheading {
  font-size: 1.375rem; /* Title 2 (22px) */
  font-weight: 600;
  line-height: 1.75rem;
}

.text-body {
  font-size: 1rem; /* Body (16px) */
  font-weight: 400;
  line-height: 1.5rem;
}

.text-caption {
  font-size: 0.875rem; /* Caption (14px) */
  font-weight: 400;
  line-height: 1.25rem;
}

.text-small {
  font-size: 0.75rem; 
  font-weight: 400;
  line-height: 1.25rem;
}

/* Utility Classes */
.text-center {
  text-align: center;
}

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

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

.text-gray {
  color: #718096;
}

.text-dark {
  color: #102c56;
  
}

.text-light {
  color: #ffffff;
}

.m-0 {
  margin: 0;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 0.5rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-4 {
  padding: 1rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.border-round {
  border-radius: 0.25rem;
}

.w-100 {
  width: 100%;
}

.w-75 {
  width: 75%;
}

.w-50 {
  width: 50%;
}

.w-25 {
  width: 25%;
}

.bg-white {
  background: rgb(255,255,255);
}

.bg-light {
  background: #e1eaf5;
}

.bg-dark {
  background: #102c56;
  color: white;
}

/* Flash Messages */
.flash {
  position: fixed;
  top: calc(100dvh - 100px);
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem;
  border-radius: 0.25rem;
  width: 100%;
  max-width: 1000px;
  text-align: center;
  z-index: 1000;
  animation: flash-message 4s ease-in-out forwards;
}

@keyframes flash-message {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  10% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  90% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
}

.flash-notice {
  background: #e3f2fd;
  color: #1565c0;
  border: 1px solid #90caf9;
}

.flash-alert {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
}

/** to keep styles constant after error **/

.field_with_errors {
  display: contents; /* This makes the div behave like it's not there */
}

.field_with_errors input {
  border-color: #ef9a9a;
}

.flex {
  display: flex;
  gap: 0.5rem;
}

.flex-column {
  flex-direction: column;
}