/* Container + toggle */
#finder-container { text-align:center; margin: 20px 0 28px; }
.pill-button{
  background-color:#005239;color:#fff;font-size:16px;padding:12px 24px;border:none;border-radius:0;cursor:pointer;
  box-shadow:0 4px 8px rgba(0,0,0,.15);transition:background-color .3s ease, box-shadow .3s ease;width:80%;max-width:420px;display:inline-block;
}
.pill-button:hover{ background-color:#144026; box-shadow:0 6px 12px rgba(0,0,0,.25); }
.pill-button:focus{ outline:3px solid #88b098; outline-offset:2px; }

/* Wrapper card */
#finder-wrapper{
  display:none; margin:20px auto 30px; border:3px solid #006633; border-radius:0; padding:20px; max-width:1200px;
}

/* Hide staging controls */
.classroom-filter-bar{ display:none; }

/* Toolbar */
.dataTables_wrapper .finder-toolbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#005239; padding:12px 14px; border-radius:8px; color:#fff; margin-bottom:10px;
}
.finder-toolbar .dataTables_length{ flex:1 1 220px; color:#fff; }
.finder-toolbar .dataTables_length label{ color:#fff; font-weight:700; }
.finder-toolbar .dataTables_length select{ min-width:84px; }

.finder-toolbar .campus-slot{
  flex:1 1 280px; display:flex; justify-content:center; align-items:center; gap:8px;
}
.finder-toolbar .campus-slot label{ color:#fff; font-weight:700; margin:0; }
.finder-toolbar .campus-slot select{
  min-width:240px; padding:8px 10px; border-radius:4px; border:1px solid #ccc; background:#fff; color:#1b1b1b;
}

.finder-toolbar .dataTables_filter{
  flex:1 1 320px; display:flex; justify-content:flex-end; align-items:center; gap:8px; color:#fff;
}
.finder-toolbar .dataTables_filter label{ color:#fff; font-weight:700; margin:0; }
.finder-toolbar .dataTables_filter input{
  width:520px !important; max-width:100%;
  padding:8px 10px; border:1px solid #ccc; border-radius:4px; background:#fff; color:#1b1b1b;
}

/* Table area */
.dataTables_wrapper{ margin:0 auto; width:95%; }
table.dataTable th, table.dataTable td{ text-align:center; vertical-align:middle; padding:8px 10px; }
table.dataTable td a{ color:#005239; text-decoration:underline; }

/* Bottom info + pagination */
#finder-wrapper .dataTables_info,
#finder-wrapper .dataTables_paginate{
  background:#005239; padding:.5rem .75rem; border-radius:6px; margin-top:.75rem;
}
#finder-wrapper .dataTables_info{ color:#fff !important; }

#finder-wrapper .dataTables_paginate,
#finder-wrapper .dataTables_paginate .paginate_button,
#finder-wrapper .dataTables_paginate .ellipsis{ color:#fff !important; }

#finder-wrapper .dataTables_paginate .paginate_button{
  color:#ffffff !important; background:#005239; border:1px solid rgba(255,255,255,.25);
  border-radius:4px; margin:0 2px; padding:.25rem .5rem;
}
#finder-wrapper .dataTables_paginate .paginate_button.current,
#finder-wrapper .dataTables_paginate .paginate_button:hover{
  background:#144026; border-color:rgba(255,255,255,.4); color:#fff !important;
}
#finder-wrapper .dataTables_paginate .paginate_button:focus{
  outline:2px solid #fff; outline-offset:2px;
}

/* ===== Page banner + H1 ===== */
.page-hero{
  position: relative;
  max-width: 1200px;
  margin: 0 auto 24px;   /* centers banner, adds space below */
}
.hero-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}


/* On small screens, keep the title visible but not over the image */
@media (max-width: 720px){
  .page-title{
    position: static;
    color: #0e3d2e;          /* Mason green family */
    text-shadow: none;
    padding: .75rem 0 0;
    text-align: center;
  }
}