/* ============================================================
   BPF Hamburger Farm — Field Trip System
   styles.css
   Global styles that complement Tailwind utility classes.
   ============================================================ */

/* ----------------------------------------------------------
   Material Symbols icon default rendering settings
   ---------------------------------------------------------- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ----------------------------------------------------------
   Custom scrollbar — used on sidebar / overflow containers
   ---------------------------------------------------------- */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #c2c9bb; border-radius: 10px; }

/* ----------------------------------------------------------
   Toast notification — shown in bottom-right corner
   ---------------------------------------------------------- */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.toast-success { background: #154212; color: white; }
.toast-error   { background: #ba1a1a; color: white; }

/* ----------------------------------------------------------
   Check-in right panel — smooth background colour transition
   when a highlight colour is selected
   ---------------------------------------------------------- */
#ci-right-panel {
  transition: background-color 0.3s ease;
}

/* ----------------------------------------------------------
   Page containers — ensure each page fills at least the
   viewport height below the fixed 4rem header
   ---------------------------------------------------------- */
.page { min-height: calc(100vh - 4rem); }

/* ----------------------------------------------------------
   Form field error state — red border for required fields
   that have not been filled before submission
   ---------------------------------------------------------- */
.field-error {
  border-color: #ba1a1a !important;
}
.field-error-msg {
  color: #ba1a1a;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* ----------------------------------------------------------
   Stepper inputs — hide browser spin arrows so only the
   custom + / − buttons are visible
   ---------------------------------------------------------- */
input[type=number].stepper-input::-webkit-outer-spin-button,
input[type=number].stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number].stepper-input {
  -moz-appearance: textfield;
}

/* ----------------------------------------------------------
   Slot grid tiles — base transition for hover/select effects
   ---------------------------------------------------------- */
.slot-tile {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.slot-tile:active {
  transform: scale(0.95);
}

/* ----------------------------------------------------------
   Active nav link indicator
   ---------------------------------------------------------- */
.nav-active {
  color: #166534;           /* green-800 */
  border-bottom: 2px solid #166534;
  font-weight: 600;
}
.nav-inactive {
  color: #57534e;           /* stone-600 */
}
.nav-inactive:hover {
  color: #14532d;           /* green-900 */
}