/* student-info.css */
.student-tile-section {
    background-color: white;
    padding: 0;
    margin: 0;
}

.section-height-12 {
    height: 12px;
}

.section-height-22 {
    height: 22px;
}

.section-height-21 {
    height: 21px;
}

.student-tile .header {
    background-color: var(--primary-color);
    color: white;
    text-align: center;
    padding: 10px;
}

.student-tile img {
    width: 100px;
    height: 100px;
    display: block;
    margin: 0 auto;
}

.student-tile .section h3 {
    text-align: center;
    margin: 5px 0;
}

.student-tile .section p {
    margin: 5px 0;
}

/* New Styles for Overflow Handling */
.student-tile .overflow-auto {
    height: 100%;          /* Ensures the element takes the full height of the parent */
    overflow-y: auto;      /* Adds a vertical scrollbar if content exceeds height */
}

.student-tile-container {
    height: 100%;          /* Parent container height */
    max-height: 100%;      /* Ensures the container doesn't exceed its parent height */
}

.table td, .table th {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.table-bordered {
    width: 100%;           /* Ensures the table takes the full width of the container */
}

.text-center {
    text-align: center;    /* Centers the table content */
}

/* Student Tiles Layout */
.student-tile-container {
  display: flex;
  flex-direction: column;
  gap: 0px;
  width: min(calc((100vw / 12) * 11), 100%);
  max-width: 100%;
  overflow-x: auto;
}

/* Scrollable Student Tile */
.scrollable-tile {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
  border: 1px solid #ddd;
  background-color: var(--background-color-light);
  min-height: 302px; /* Match student card height */
  max-width: 100%;
}

.scrollable-tile::-webkit-scrollbar {
  height: 8px; /* Smaller scrollbar */
}

.scrollable-tile::-webkit-scrollbar-thumb {
  background-color: var(--focus-color);
  border-radius: 5px;
}


.h-3Square {
  height: calc(3 * var(--square-size));
  overflow: hidden;
}

.h-2Square {
  height: calc(2 * var(--square-size));
  overflow: hidden;
}

.h-1Square {
  height: var(--square-size);
  overflow: hidden;
}

.h-title {
  height: var(--title-size);
  overflow: hidden;
}

.h-3text {
  height: calc((var(--square-size) / 3) - var(--title-size));
  overflow: hidden;
}

.h-2text {
  height: calc((var(--square-size) / 2) - var(--title-size));
  overflow: hidden;
}

.h-1text {
  height: calc(var(--square-size) - var(--title-size));
  overflow: hidden;
}