/* =====================================================
   TIMETABLE WRAPPER
===================================================== */

.academic-timetable{
  display:grid;
  grid-template-columns:
    170px
    repeat(6, 1fr);

  border:1px solid #cfd8dc;
  margin:30px 0;
  overflow:hidden;
  border-radius:14px;
  background:#fff;
}


/* =====================================================
   HEADER
===================================================== */

.tt-head{
  background:linear-gradient(135deg,#2d839e,#17657c);
  color:#fff;

  padding:16px 10px;

  border-right:1px solid rgba(255,255,255,.2);
  border-bottom:1px solid rgba(255,255,255,.2);

  text-align:center;

  min-height:120px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}


/* =====================================================
   FIRST HEADER
===================================================== */

.first-head{
  font-size:22px;
  font-weight:700;
}


/* =====================================================
   PERIOD NUMBER
===================================================== */

.period-no{
  display:block;

  font-size:34px;
  font-weight:700;

  line-height:1;

  margin-bottom:10px;
}


/* =====================================================
   PERIOD TIME
===================================================== */

.period-time{
  font-size:16px;
  font-weight:500;
  line-height:1.5;
}


/* =====================================================
   INLINE LUNCH
===================================================== */

.lunch-inline{
  margin-top:12px;
  padding-top:12px;

  width:100%;

  border-top:1px solid rgba(255,255,255,.3);

  font-size:14px;
  font-weight:600;
  line-height:1.5;

  color:#fff;
}


/* =====================================================
   DAY COLUMN
===================================================== */

.tt-day{
  padding:18px 16px;

  border-right:1px solid #cfd8dc;
  border-bottom:1px solid #cfd8dc;

  background:#f8fafc;

  font-size:22px;
  font-weight:600;
  color:#111827;

  display:flex;
  align-items:center;
}


/* =====================================================
   TABLE CELL
===================================================== */

.tt-cell{
  padding:18px 10px;

  border-right:1px solid #cfd8dc;
  border-bottom:1px solid #cfd8dc;

  min-height:90px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#fff;

  transition:.3s;
}

.tt-cell:hover{
  background:#f8fbff;
}


/* =====================================================
   COURSE LINK
===================================================== */

.tt-cell a{
  color:#0057ff;

  text-decoration:none;

  font-size:24px;
  font-weight:600;

  transition:.3s;
}

.tt-cell a:hover{
  color:#003dcc;
  text-decoration:underline;
}


/* =====================================================
   MODAL
===================================================== */

.modal-dialog{
  max-width:900px;
}

.modal-content{
  border:none;
  border-radius:22px;
  overflow:hidden;

  box-shadow:0 20px 60px rgba(0,0,0,.18);
}


/* =====================================================
   MODAL HEADER
===================================================== */

.modal-header{
  background:linear-gradient(135deg,#2d839e,#17657c);

  color:#fff;

  padding:22px 28px;

  border:none;
}

.modal-title{
  font-size:34px;
  font-weight:700;
  letter-spacing:.5px;
}

.btn-close{
  filter:brightness(0) invert(1);
  opacity:1;
}


/* =====================================================
   MODAL BODY
===================================================== */

.modal-body{
  padding:30px;
  background:#f7fafc;
}


/* =====================================================
   COURSE GRID
===================================================== */

.course-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}


/* =====================================================
   COURSE CARD
===================================================== */

.course-card{
  background:#fff;

  border-radius:18px;

  padding:22px;

  box-shadow:0 4px 18px rgba(0,0,0,.06);

  border-left:5px solid #2d839e;

  transition:.3s;
}

.course-card:hover{
  transform:translateY(-3px);
}


/* =====================================================
   LABEL
===================================================== */

.course-label{
  font-size:13px;
  font-weight:700;

  text-transform:uppercase;

  color:#6b7280;

  margin-bottom:8px;

  letter-spacing:.5px;
}


/* =====================================================
   VALUE
===================================================== */

.course-value{
  font-size:24px;
  font-weight:700;

  color:#111827;

  line-height:1.5;
}


/* =====================================================
   FULL WIDTH CARD
===================================================== */

.course-card.full{
  grid-column:1 / -1;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:991px){

  .academic-timetable{
    overflow-x:auto;
    display:block;
    white-space:nowrap;
  }

}


@media(max-width:768px){

  .course-grid{
    grid-template-columns:1fr;
  }

  .modal-title{
    font-size:24px;
  }

  .course-value{
    font-size:20px;
  }

  .tt-day{
    font-size:18px;
  }

  .tt-cell a{
    font-size:18px;
  }

  .period-no{
    font-size:26px;
  }

  .period-time{
    font-size:14px;
  }

}

/* =========================================
   MODAL TABLE DESIGN
========================================= */

.timetable-modal{
  border:none;
  border-radius:18px;
  overflow:hidden;

  box-shadow:0 20px 50px rgba(0,0,0,.18);
}

/* =========================================
   HEADER
========================================= */

.timetable-modal .modal-header{
  background:#1aa6d9;
  color:#000;

  border:none;

  padding:18px 24px;
}

.timetable-modal .modal-title{
  font-size:30px;
  font-weight:700;
}

.timetable-modal .btn-close{
  opacity:1;
}

/* =========================================
   TABLE
========================================= */

.timetable-course-table{
  width:100%;
  border-collapse:collapse;
}

/* =========================================
   TABLE ROW
========================================= */

.timetable-course-table tr{
  border-bottom:1px solid #dbe3e8;
}

/* =========================================
   TABLE HEADER
========================================= */

.timetable-course-table th{
  width:260px;

  background:#f4f8fb;

  padding:18px 22px;

  font-size:18px;
  font-weight:700;

  color:#111827;

  border-right:1px solid #dbe3e8;
}

/* =========================================
   TABLE DATA
========================================= */

.timetable-course-table td{
  padding:18px 22px;

  font-size:18px;
  font-weight:500;

  color:#374151;

  background:#fff;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:768px){

  .timetable-course-table th,
  .timetable-course-table td{
    display:block;
    width:100%;
  }

  .timetable-course-table th{
    border-right:none;
    border-bottom:1px solid #dbe3e8;
  }

}