/* =========================================================
   TIME TABLE PAGE — page-specific only.
   Loaded solely by time-table.php via $pageExtraCss.

   No persistent sidebar this time — the wide, real timetable
   tables need the full page width, so B.Pharm / M.Pharm / D.Pharm
   are three separate full-width sections (same alternating-tint
   rhythm as syllabus.css), each with its own Year tabs -> Section
   pills -> table, reached via a slim top jump strip instead of a
   fixed-width side column.
   ========================================================= */

/* ---- Jump strip (replaces the sidebar) ---- */
.tt-jump-strip{
  position:sticky;
  top:0;
  z-index:20;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 12px rgba(10,61,38,.06);
}
.tt-jump-strip-inner{
  display:flex;
  gap:8px;
  padding:14px 24px;
}
.tt-jump-strip a{
  font-size:.86rem;
  font-weight:700;
  color:var(--green-700);
  background:var(--green-100);
  border-radius:999px;
  padding:8px 18px;
  transition:background .15s ease, color .15s ease;
}
.tt-jump-strip a:hover{ background:var(--green-700); color:#fff; }

/* ---- Programme sections (full width, alternating tint) ---- */
.tt-prog-section{ padding:64px 0; border-bottom:1px solid var(--line); scroll-margin-top:70px; }
.tt-prog-section:last-of-type{ border-bottom:none; }
.tt-prog-section--tint{ background:var(--cream); }

.tt-level{
  display:flex;
  align-items:flex-start;
  gap:22px;
  max-width:760px;
  margin-bottom:32px;
}
.tt-level-icon{
  flex-shrink:0;
  width:56px; height:56px;
  border-radius:16px;
  background:var(--green-900);
  color:var(--gold-500);
  display:flex;
  align-items:center;
  justify-content:center;
}
.tt-level-icon svg{ width:26px; height:26px; }
.tt-level-tag{
  display:inline-block;
  font-size:.74rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green-700); margin-bottom:8px;
}
.tt-heading{
  font-size:clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight:800; color:var(--green-900); margin:0 0 8px;
}
.tt-lede{ margin:0; font-size:.94rem; line-height:1.65; color:var(--ink-soft); }

/* ---- Year tabs (top-level, full width) ---- */
.tt-year-tabs{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:28px;
  border-bottom:1px solid var(--line);
  padding-bottom:18px;
}
.tt-year-btn{
  font-size:.88rem; font-weight:700;
  color:var(--ink-soft);
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 20px;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.tt-year-btn:hover{ border-color:var(--green-700); color:var(--green-800); }
.tt-year-btn.is-active{
  background:var(--green-800);
  border-color:var(--green-800);
  color:#fff;
}

.tt-year-panel{ display:none; }
.tt-year-panel.is-active{ display:block; }

/* ---- Section pills ---- */
.tt-pill-row{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:20px;
}
.tt-pill{
  font-size:.8rem; font-weight:600;
  color:var(--green-700);
  background:var(--green-100);
  border-radius:999px;
  padding:8px 16px;
  transition:background .15s ease, color .15s ease;
}
.tt-pill:hover{ background:var(--green-700); color:#fff; }
.tt-pill.is-active{ background:var(--green-800); color:#fff; }

.tt-table-panel{ display:none; }
.tt-table-panel.is-active{ display:block; }

/* ---- No-data placeholder ---- */
.tt-empty{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:12px;
  padding:52px 24px;
  background:#fff;
  border:1px dashed var(--line);
  border-radius:var(--radius-lg);
  color:var(--ink-soft);
}
.tt-prog-section--tint .tt-empty{ background:#fff; }
.tt-empty svg{ width:34px; height:34px; color:var(--green-700); opacity:.6; }
.tt-empty p{ margin:0; font-size:.92rem; max-width:360px; }

/* ---- Table container: scrolls horizontally ONLY when the table
   genuinely doesn't fit (narrow viewports), never because of a
   sidebar eating width. ---- */
.table-responsive{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:10px;
}

/* ---- The timetable itself — full width up to the page container,
   no artificial 1100px cap fighting the wider space now available. ---- */
.timetable{
  border-collapse:collapse;
  width:100%;
  margin:0 auto;

  font-size:9.5pt;
}
.timetable td{
  border:1px solid var(--line);
  vertical-align:middle;
  padding:4px 6px;
  text-align:center;
  color:var(--ink);
}
.timetable tr:nth-child(1) td,
.timetable tr:nth-child(2) td{
  font-size:12pt; font-weight:700; padding:10px; color:var(--green-900);
}
.timetable tr:nth-child(4) td{
  font-size:10.5pt; padding:10px; font-weight:600;
}
.timetable tr:nth-child(5) td{
  background-color:var(--green-100);
  font-weight:700; font-size:9pt; padding:6px 4px; color:var(--green-800);
}
.timetable td[rowspan][style*="background-color: #fff2cc"],
.timetable tr td:first-child[style*="background-color: #fff2cc"]{
  background-color:var(--green-100);
  font-weight:700;
}
/* The D.Pharm source table used inline background:#fff2cc directly on
   the time-header row/cells (rather than nth-child) — cover that too. */
.timetable tr[style*="background-color: #fff2cc"] td,
.timetable td[style*="background-color: #fff2cc"]{
  background-color:var(--green-100) !important;
}

@media (max-width:900px){
  .tt-jump-strip-inner{ padding:12px 20px; overflow-x:auto; }
}
@media (max-width:640px){
  .tt-year-btn{ padding:8px 16px; font-size:.84rem; }
}