body {
  font-family: 'Lato', sans-serif;
  margin: 0;
  padding: 0;
  background: #f9f9f9;
  color: #333;
}

.index-wrapper {
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 1400px;     /* Optional max width */
    margin: 0 auto;
}

.wrapper {
  padding-left:  5rem;
  /*padding-right: 10%;*/
}

.logo-img {
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.phone-text {
  font-size: 18px;
  font-weight: bold;
}

.main-nav {
  background: #fff;
}

.nav-link {
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  color: #00703c;
}

.nav-link:hover {
  text-decoration: underline;
}

.hero h1 {
  font-size: 36px;
}

.hero p {
  font-size: 18px;
}

footer {
  font-size: 14px;
}

/* Hover-triggered Bootstrap dropdown */
.hover-dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}

/* Prevent accidental menu closing */
.hover-dropdown .dropdown-menu {
  margin-top: 0;
  border: 1px solid #ccc;
  min-width: 180px;
}

#scanned_code {
  display: inline-block;
  width: 222px;
  padding: .375rem .5rem;
  text-align: center;
}


/*         Scanner Modal        */
/* 1. Make the modal a flex container so its body can shrink to fit */
#scannerModal .modal-content {
  display: flex;
  flex-direction: column;
  max-height: 80vh !important;  /* cap at 80% of viewport height */
  width: 90vw;                   /* ~90% of viewport width on all devices */
  margin: auto;
  overflow: hidden;
}

/* 2. Let the header be its natural height */
#scannerModal .modal-header {
  flex: 0 0 auto;
}

/* 3. Force the body to fill remaining space and hide overflow */
#scannerModal .modal-body {
  flex: 1 1 auto;
  min-height: 0;    /* allows it to shrink below content’s intrinsic height */
  padding: 0;
  overflow: hidden;
}

/* 4. Have the scanner div fill that body exactly */
#html5qrcode-reader,
.html5-qrcode-root {
  width: 100% !important;
  height: 100% !important;
}

/* 5. And make sure the <video> doesn’t overflow */
#html5qrcode-reader video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 4) On smaller tablets, shrink modal a bit more if needed */
@media screen  and  (orientation: portrait) {
  /* Make modal-content a vertical flex container */
  #scannerModal .modal-content {
    border: 3px solid blue !important;
    display: flex !important;
    flex-direction: column !important;
    /* cap total height at 80% of viewport */
    max-height: 80vh !important;
    width: 90vw !important;
    overflow: hidden !important;
  }

  /* Modal header keeps its own height */
  #scannerModal .modal-header {
    flex: 0 0 auto !important;
  }

  /* Modal body fills the rest and hides overflow */
  #scannerModal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Scanner container and internal elements fill 100% of body */
  #html5qrcode-reader,
  .html5-qrcode-root,
  #html5qrcode-reader video {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
  }
}

@media screen and (min-width: 360px) and (orientation: portrait) {
  /* Make modal-content a vertical flex container clipped to 80vh */
  #scannerModal .modal-content {
    display: flex !important;
    flex-direction: column !important;
    max-height: 80vh !important;
    width: 90vw !important;
    overflow: hidden !important;
  }

  /* Header fixed height */
  #scannerModal .modal-header {
    flex: 0 0 auto !important;
  }

  /* Body fills remaining clipped space */
  #scannerModal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Scanner container and its video fill 100% */
  #html5qrcode-reader,
  .html5-qrcode-root,
  #html5qrcode-reader video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

.appointment-box {
  white-space: nowrap;
  overflow-x: auto;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}

#customerMatchTableBody tr {
    cursor: pointer;
}

#customerMatchTableBody tr:hover {
    background-color: #f2f2f2;
}

.fc-daygrid-day {
    cursor: pointer;
}

.fc-daygrid-day:hover {
    background-color: #e8f5e9; /* Light green highlight */
}