body {
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  /* font-weight: bold; */
  /* border: 2px solid black; */
  background-color: #eaeff4;
}

nav {
  background-image: linear-gradient(to bottom, #a1bdda, #eaeff4);
}

.search-container {
  /* border: 2px solid black; */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 5px;
}

.search-container h3 {
  margin-right: auto;
}

.search-container input, .search-row input {
  border-radius: 40px;
}



.search-row {
    transition: all 1s ease;
}

.search-row.hidden {
    display: none;
}

.insert-row.hidden {
  display: none;
}

.insert-row input, .insert-row button, .insert-row select {
  border-radius: 10px;
}

.search-row th {
  padding: 5px;              /* remove padding so input fills cell */
  width: 1rem;
  text-align: left;
}

.search-row input, .insert-row input,
.search-row select, .insert-row select {
    width: 80%;             /* fill the entire table cell */
    box-sizing: border-box;  /* ensures padding/borders don’t overflow */
    height: 90%;            /* optional: stretch vertically too */
}


.container-fluid.index-page{
  margin: 0;
  padding: 0;
}

.table-responsive {
  overflow: visible;
}

.table-wrapper table td:last-child {
  text-align: right;
}

.table-wrapper table {
  table-layout: auto;
}

.table-wrapper {
  overflow-x: auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2));
  -webkit-overflow-scrolling: touch; /* smooth scrolling on mobile */
}

#table-wrapper-no-overflow {
  overflow-x: visible;
}

.table-encapsulator {
  max-width: 1000px;
  margin: auto;
}

.admin-title {
  text-align: center;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

.deleteEntry {
  width: 20px; /* Set equal width and height for a perfect circle */
  height: 20px;
  border-radius: 50%; /* This creates the circular shape */
  background-color: #ea433b; /* Example background color */
  border: none; /* Remove default button border */
  cursor: pointer;
  border: 2px solid black;
  display: inline-block; /* prevent it from stretching */
  margin: 0 5px;
}


.intro-main {
  /* border: 2px solid orange; */
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.intro-main h3 {
  margin-right: auto;
}

/* Size for brand */
nav .navbar-brand
{
    font-size: xx-large;
}

/* Colors for brand */
nav .navbar-brand .blue
{
    color: #537fbe;
}
nav .navbar-brand .red
{
    color: #ea433b;
}
nav .navbar-brand .yellow
{
    color: #f5b82e;
}
nav .navbar-brand .green
{
    color: #2e944b;
}

.scanner-start, .scanner-stop {
  border: none;
  background-color: rgb(176, 194, 210);
  border-radius: 100px;
  padding: 5px 10px;
  margin: 0 0 10px 0;
}

.table-custom {
  font-size: 0.85rem; /* smaller font */
}

.alert-Container {
  /* border: 3px solid black; */
  z-index: 1055;
  width: 100%;
  max-width: 400px;
  pointer-events: none;
}

.table-custom td:nth-child(1) { width: 60px; }   /* Pickup ID */
.table-custom td:nth-child(2) { width: 80px; }   /* Student ID */
.table-custom td:nth-child(3) { width: 150px; }  /* Student Name */
.table-custom td:nth-child(4) { width: 120px; }  /* Request At */

@media (max-width: 768px) {
  .table-custom {
    font-size: 0.9rem;   /* slightly smaller text */
  }
}

/* Make it larger on desktops */
@media (min-width: 992px) {
  .table-custom {
    font-size: 1.1rem;   /* slightly bigger text */
  }
}


table tr, table tr th, table tr td {
  border: none;
}

.table-responsive {
  overflow: visible;
}

table {
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
}

/* .shadow {
  padding: 0;
  border-radius: 10px;
} */