html, body, .container {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body.bg-light {
  position: relative; /* needed for pseudo-element */
  overflow: hidden;   /* optional: prevent scrollbars from blur */
}

body.bg-light::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url('img/bg.png') no-repeat center center/cover;
  opacity: 1; /* adjust transparency */
  z-index: -2; /* behind overlay */
}

body.bg-light::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255,255,255,0.3); /* semi-transparent white */
  backdrop-filter: blur(2px);       /* glass effect */
  z-index: -1; /* between content and bg */
}

.logo {
    height: 60px;
    width: 60px;
}
.header-text {
  font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* modern clean font */
  font-weight: 700;      /* bold */
  font-size: 2.5rem;     /* adjust size */
  color: #001a86;        /* white text for dark bg */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); /* subtle shadow for readability */
  letter-spacing: 1px;   /* spacing between letters */
  text-transform: uppercase; /* optional: makes it look like a logo/title */
  text-align: center;
}

td { cursor: text; }
.table-container {
    overflow-x: auto;
    background: white;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.table th, .table td {
    border: 1px solid #000 !important; /* Excel-like cell border */
}
.table {
    border: 2px solid #000 !important; /* outer border */
}

div#tableContainer {
    overflow: scroll !important;
    height: calc(100% - 145px) !important;
    width: 100% !important;
     position: relative;
}

#tableContainer thead th {
    position: sticky;
    top: -17px;
    z-index: 10;
    background: #d1e7dd;    /* Bootstrap table-success color */
}



/* Tablet: 768px to 1024px */
@media (max-width: 1024px) and (min-width: 768px) {
    .header-text {
        font-size: 2rem;  
    }
}

/* Mobile: below 768px */
@media (max-width: 767px) {
    .header-text {
        font-size: 1.5rem;  
    }
    div#tableContainer {
        height: calc(100% - 325px) !important;
    }
}