/* ==========================================
   teacher-availability-public.css
   Matches admin aesthetic (pink wavy nav, soft pastel table)
   ========================================== */

/* ----- GLOBAL RESET & FONTS ----- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background-image: url('classroom.png'); 
  min-height: 100vh;
}

/* ----- PINK WAVY NAVBAR (identical to admin) ----- */
.public-nav {
  background-color: #f4cce0;
  padding: 15px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 0 50px 0;
  position: relative;
  z-index: 10;
}

.public-nav::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 25px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23f4cce0'%3E%3C/path%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.back-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #532561;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s, color 0.2s;
}

.back-icon:hover {
  transform: translateX(-4px);
  color: #00afee;
}

.brand-logo-img {
  height: 60px;
  width: auto;
  object-fit: contain;
}

.nav-right .page-title {
  font-weight: 700;
  color: #532561;
  font-size: 1.1rem;
  letter-spacing: 1px;
}

/* ----- MAIN CONTENT (same spacing as admin) ----- */
.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 25px 40px;
}

h1 {
  color: #532561;
  text-align: center;
  font-size: 2.4rem;
  margin-bottom: 25px;
  font-weight: 600;
}

/* ----- TIMETABLE CONTAINER (matches admin) ----- */
.timetable-container {
  overflow-x: auto;
  margin: 20px 0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  background: white;
}

#timetable {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
}

/* Cells – same padding and border as admin */
#timetable th,
#timetable td {
  border: 1px solid #f0e6d2;
  padding: 12px 10px;
  text-align: center;
  vertical-align: middle;
  min-width: 90px;
}

/* Header – pink background */
#timetable th {
  background: #f4cce0;
  color: #532561;
  font-weight: 600;
  font-size: 1rem;
}

/* Time slot column – yellow background */
.slot-header {
  background: #FCEBA7 !important;
  font-weight: 600;
  color: #532561;
}

/* ----- SLOT STATUS CARDS (public‑only) ----- */
.slot-status {
  cursor: pointer;
  font-weight: 600;
  padding: 8px 5px;
  border-radius: 30px;
  transition: background 0.2s;
}

.slot-status.available {
  color: #2e7d32;
  background: #e8f5e9;
}

.slot-status.full {
  color: #c62828;
  background: #ffebee;
}

.slot-status span {
  display: block;
  font-size: 0.9rem;
}

.slot-status.available:hover {
  background: #c8e6c9;
}

/* ----- MODAL (public version – clean popup) ----- */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(83, 37, 97, 0.3);
  backdrop-filter: blur(4px);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 30px 25px;
  border-radius: 30px;
  width: 90%;
  max-width: 500px;
  max-height: 70vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  border: 1px solid #f4cce0;
}

.modal-content h3 {
  color: #532561;
  font-size: 1.6rem;
  margin-bottom: 20px;
  font-weight: 600;
}

.teacher-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 25px 0;
}

.teacher-card {
  text-align: center;
  width: 140px;                /* increased from 100px */
}

.teacher-card img {
  width: 120px;               /* increased from 90px */
  height: 120px;              /* now square */
  border-radius: 16px;        /* slightly rounded corners, not a circle */
  object-fit: cover;
  border: 4px solid #FCEBA7;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}


.teacher-card p {
  margin-top: 10px;
  font-weight: 600;
  color: #532561;
  font-size: 1rem;
}

.close-btn {
  background: #532561;
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 40px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 10px;
}

.close-btn:hover {
  background: #3e1c4a;
  transform: translateY(-2px);
}

/* ----- COLUMN WIDTHS (same as admin) ----- */
#timetable th:nth-child(1),
#timetable td:nth-child(1) {
  min-width: 140px !important;
  max-width: 160px !important;
}

#timetable th:nth-child(2),
#timetable td:nth-child(2),
#timetable th:nth-child(3),
#timetable td:nth-child(3),
#timetable th:nth-child(4),
#timetable td:nth-child(4),
#timetable th:nth-child(5),
#timetable td:nth-child(5),
#timetable th:nth-child(6),
#timetable td:nth-child(6),
#timetable th:nth-child(7),
#timetable td:nth-child(7),
#timetable th:nth-child(8),
#timetable td:nth-child(8) {
  min-width: 120px !important;
  max-width: 140px !important;
}

/* ----- RESPONSIVE ----- */
@media (max-width: 700px) {
  .public-nav { padding: 15px 20px; }
  .brand-logo-img { height: 45px; }
  h1 { font-size: 2rem; }
}


/* ==========================================
   MOBILE – dynamic fit via JavaScript (fixed CSS only)
   ========================================== */
@media (max-width: 480px) {

  /* Make the main heading fit on small screens */
  h1 {
    font-size: 2.0rem !important;        /* reduce from 2.4rem */
    word-wrap: break-word;
    padding: 0 10px;                     /* small side margins */
    line-height: 1.5;
  }

  /* If your header is inside .page-title or another class, also adjust it */
  .nav-right .page-title {
    font-size: 0.9rem !important;        /* shrink the navbar title if needed */
    letter-spacing: 0.5px;
    white-space: normal;                 /* allow wrapping */
    text-align: right;
  }

  /* Ensure the navbar itself doesn't overflow */
  .public-nav {
    padding: 10px 15px;                  /* reduce padding on mobile */
    flex-wrap: wrap;                     /* allow items to wrap if necessary */
  }

  .brand-logo-img {
    height: 40px;                        /* slightly smaller logo */
  }

  /* Outer wrapper allows pinch‑zoom on the scaled table */
    .timetable-outer-wrapper {
    width: 100%;
    overflow-x: auto;          /* allow horizontal scroll */
    -webkit-overflow-scrolling: touch;   /* smooth scrolling on iOS */
  }

  /* Container will be scaled by JavaScript – NO fixed width/transform here */
  .timetable-container {
    transform-origin: top left;
    margin: 0 auto;
    margin-bottom: 10px;
  }

  /* The table itself keeps its natural layout */
  #timetable {
    width: 100%;
    min-width: auto !important;
    table-layout: auto;
    font-size: 1rem;               /* base size, then scaled down by the container */
  }

  /* Columns – keep the exact desktop widths so nothing breaks */
  #timetable th,
  #timetable td {
    min-width: 120px !important;   /* day columns */
    max-width: none !important;
    padding: 6px 2px !important;
  }

  /* Time column (first) */
  #timetable th:first-child,
  #timetable td:first-child {
    min-width: 100px !important;
    max-width: 140px !important;
  }

  /* Buttons and chips remain touch‑friendly */
  .add-btn {
    font-size: 0.75rem;
    padding: 4px 6px;
  }

  .teacher-chip {
    font-size: 0.7rem;
    padding: 2px 5px;
  }

  .teacher-chip img {
    width: 16px;
    height: 16px;
  }

  /* Save button full width */
  .save-bar {
    justify-content: center;
  }
  #saveBtn {
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
    padding: 12px;
  }

  /* Modal */
  .modal-content {
    width: 95%;
    padding: 20px;
  }
}