/* ===========================================================================
   Timetable themes. Each theme is a set of CSS custom properties applied to
   the #timetable container via [data-theme="…"]. The JS toggles the attribute.
   Free themes: classic, minimal, dark.  Premium (unlock by sign-up): the rest.
   =========================================================================== */

.tt-theme {
  --tt-bg:        #ffffff;
  --tt-fg:        #0f172a;
  --tt-muted:     #64748b;
  --tt-line:      #e2e8f0;
  --tt-head-bg:   #1d3a8a;
  --tt-head-fg:   #ffffff;
  --tt-cell-bg:   #f1f5f9;   /* a slot with a class */
  --tt-cell-fg:   #0f172a;
  --tt-accent:    #1d3a8a;
  --tt-radius:    14px;
  --tt-font:      'Inter', system-ui, sans-serif;
  --tt-card-shadow: 0 1px 2px rgba(0,0,0,.06);
  background: transparent;
  color: var(--tt-fg);
  font-family: var(--tt-font);
}

/* ---- Free themes ---- */
.tt-theme[data-theme="minimal"] {
  --tt-head-bg:#0f172a; --tt-cell-bg:#f8fafc; --tt-accent:#0f172a; --tt-radius:8px;
  --tt-card-shadow:none;
}
.tt-theme[data-theme="dark"] {
  --tt-bg:#0b1220; --tt-fg:#e2e8f0; --tt-muted:#94a3b8; --tt-line:#1e293b;
  --tt-head-bg:#3b82f6; --tt-head-fg:#fff; --tt-cell-bg:#16233b; --tt-cell-fg:#e2e8f0;
  --tt-accent:#60a5fa;
}

/* ---- Premium themes ---- */
.tt-theme[data-theme="ocean"] {
  --tt-head-bg:#0e7490; --tt-cell-bg:#ecfeff; --tt-accent:#0891b2; --tt-radius:18px;
}
.tt-theme[data-theme="sunset"] {
  --tt-head-bg:#9a3412; --tt-cell-bg:#fff7ed; --tt-accent:#ea580c; --tt-radius:18px;
}
.tt-theme[data-theme="forest"] {
  --tt-head-bg:#166534; --tt-cell-bg:#f0fdf4; --tt-accent:#16a34a; --tt-radius:12px;
}
.tt-theme[data-theme="grape"] {
  --tt-head-bg:#6b21a8; --tt-cell-bg:#faf5ff; --tt-accent:#9333ea; --tt-radius:18px;
}
.tt-theme[data-theme="neon"] {
  --tt-bg:#0a0a0f; --tt-fg:#e5fff5; --tt-muted:#6ee7b7; --tt-line:#1f2937;
  --tt-head-bg:#10b981; --tt-head-fg:#04130c; --tt-cell-bg:#0f1f1a; --tt-cell-fg:#a7f3d0;
  --tt-accent:#34d399; --tt-radius:10px;
}
.tt-theme[data-theme="serif"] {
  --tt-font:'Lora', Georgia, serif; --tt-head-bg:#7a1f3d; --tt-cell-bg:#fdf2f6;
  --tt-accent:#7a1f3d; --tt-radius:6px;
}
/* Exact match to the official PGP class-schedule PDF: black on white, thin
   black gridlines, light-gray header / week / day bands, Arial. Used for the
   downloadable timetable. */
.tt-theme[data-theme="pdf"] {
  --tt-bg:#fff; --tt-fg:#000; --tt-muted:#000; --tt-line:#000;
  --tt-head-bg:#d9d9d9; --tt-head-fg:#000; --tt-cell-bg:#fff; --tt-cell-fg:#000;
  --tt-accent:#000; --tt-radius:0; --tt-card-shadow:none;
  --tt-font:Arial, Helvetica, sans-serif;
}
.tt-theme[data-theme="pdf"] .tt-sheet { border-color:#000; }
.tt-theme[data-theme="pdf"] td.tt-has { box-shadow:none; background:#fff; font-weight:600; }
.tt-theme[data-theme="pdf"] .tt-sec { color:#000; }
.tt-theme[data-theme="pdf"] .tt-week-label {
  background:#d9d9d9; color:#000; border:1px solid #000; border-bottom:0;
  padding:3px 8px; margin:0; letter-spacing:0; text-transform:none; font-size:12px;
}
.tt-theme[data-theme="pdf"] .tt-special-cell { background:#f2f2f2; color:#000; font-weight:700; }

/* ===========================================================================
   Layout (shared by all themes)
   =========================================================================== */
.tt-card {
  background: var(--tt-bg);
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius);
  padding: 16px;
  box-shadow: var(--tt-card-shadow);
}

/* Weekly grid — laid out like the official PGP class schedule */
.tt-sheet {
  border:1px solid var(--tt-line); border-radius:var(--tt-radius);
  overflow:hidden; box-shadow:var(--tt-card-shadow); margin-bottom:8px;
}
.tt-table { width:100%; border-collapse:collapse; background:var(--tt-bg); }
.tt-table th, .tt-table td {
  border:1px solid var(--tt-line); padding:0; text-align:center; vertical-align:middle;
}
.tt-table thead th {
  background:var(--tt-head-bg); color:var(--tt-head-fg);
  padding:7px 4px; font-weight:600; line-height:1.2;
}
.tt-snum { display:block; font-size:13px; font-weight:700; }
.tt-stime { display:block; font-size:10px; font-weight:500; opacity:.85; font-variant-numeric:tabular-nums; }
.tt-corner { width:74px; }
.tt-dayhead {
  background:var(--tt-head-bg); color:var(--tt-head-fg);
  padding:6px 8px; white-space:nowrap; text-align:left;
}
.tt-dayhead span { display:block; font-weight:700; font-size:13px; }
.tt-dayhead small { display:block; font-weight:500; font-size:10px; opacity:.85; font-variant-numeric:tabular-nums; }
.tt-table td { height:42px; background:var(--tt-bg); }
.tt-table td.tt-has { background:transparent; padding:4px 5px; }
.tt-code { font-weight:700; font-size:13px; }
.tt-sec  { font-weight:600; font-size:11px; opacity:.7; margin-left:3px; }
.tt-clash { height:3px; }

/* Colour-coded subject pill (grid + list). Neutral by default; filled with the
   subject's colour when colour coding is on. */
.tt-pill {
  display:inline-block; padding:2px 8px; border-radius:7px; line-height:1.35;
  background:var(--tt-cell-bg); color:var(--tt-cell-fg);
  border-left:3px solid var(--tt-accent);
}
body.colorcode .tt-pill { background:var(--c); color:#0f172a; border-left:0; }
body.colorcode .tt-pill .tt-sec { color:#0f172a; }
.tt-subj .tt-pill { margin-right:4px; }
.tt-special-cell {
  background:var(--tt-accent); color:#fff; font-weight:600;
  font-size:12px; letter-spacing:.03em; text-transform:uppercase; height:40px;
}

/* Day-list view */
.tt-day {
  background:var(--tt-bg); border:1px solid var(--tt-line);
  border-radius:var(--tt-radius); padding:12px 14px; margin-bottom:10px;
  box-shadow:var(--tt-card-shadow);
}
.tt-day h4 { color:var(--tt-accent); font-weight:700; font-size:14px; margin-bottom:8px; }
/* Compact off-day row: heading and "No classes" tag on one line */
.tt-day.tt-off { display:flex; align-items:center; justify-content:space-between;
  padding:8px 14px; opacity:.7; }
.tt-day.tt-off h4 { margin:0; font-weight:600; }
.tt-offtag { font-size:12px; color:var(--tt-muted); font-weight:500; }
.tt-row { display:flex; gap:10px; align-items:center; padding:6px 0; border-top:1px dashed var(--tt-line); }
.tt-row:first-of-type { border-top:0; }
.tt-time { font-variant-numeric:tabular-nums; color:var(--tt-muted); font-size:12px; min-width:96px; }
.tt-subj { font-weight:700; }
.tt-subj small { color:var(--tt-muted); font-weight:500; margin-left:6px; }

.tt-week-label {
  font-size:12px; font-weight:700; color:var(--tt-muted);
  text-transform:uppercase; letter-spacing:.05em; margin:18px 0 8px;
}
.tt-special {
  background:var(--tt-accent); color:#fff; border-radius:8px;
  padding:8px 12px; font-weight:600; font-size:13px;
}
.tt-empty-state { color:var(--tt-muted); text-align:center; padding:40px 16px; }

.tt-week { margin-bottom: 4px; }

/* ---- Mobile: the weekly grid is too wide for a phone, so let each week
   scroll horizontally while keeping columns readable. The day-list view
   (default on small screens, set in JS) needs no horizontal scroll. ---- */
@media (max-width: 640px) {
  body:not(.pdfprint) .tt-sheet { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body:not(.pdfprint) .tt-table { min-width: 560px; }
  .tt-week-label { margin: 14px 0 6px; }
  .tt-day { padding: 11px 12px; }
  .tt-row { flex-wrap: wrap; gap: 2px 10px; }
  .tt-time { min-width: 84px; }
}

@media print {
  header, footer, #resources, .no-print, #lockNote { display:none !important; }
  body { background:#fff; }
  main { padding:0 !important; }
}
@page { size: A4 portrait; margin: 8mm; }

/* ===========================================================================
   Downloadable PDF (.pdf-doc): a dense, continuous schedule that mirrors the
   official PGP class-schedule PDF — compact rows, Day|Date columns, Session
   headers with times, gray Week bands / weekends / holidays. Flows across
   landscape pages (many weeks per page) like the original. When body.pdfprint
   is set, only this block is shown.
   =========================================================================== */
body.pdfprint > * { display:none !important; }
body.pdfprint > .pdf-doc { display:block !important; }

.pdf-doc { display:none; font-family:Arial, Helvetica, sans-serif; color:#000;
  width:730px; margin:0 auto; background:#fff; }   /* A4 portrait usable width */
/* force colours to render in the printed/saved PDF */
.pdf-doc, .pdf-doc * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.pdf-legend { display:flex; flex-wrap:wrap; gap:3px 12px; margin:4px 1px 6px; font-size:10px; font-weight:700; }
.pdf-leg { display:inline-flex; align-items:center; gap:4px; }
.pdf-leg .sw { display:inline-block; width:12px; height:12px; border:1px solid rgba(0,0,0,.4); border-radius:2px; }
.pdf-title { text-align:center; line-height:1.25; margin-bottom:4px; }
.pdf-title .dev { font-size:13px; font-weight:700; }
.pdf-title .en  { font-size:16px; font-weight:700; }
.pdf-title .sub { font-size:12px; }
.pdf-unofficial { font-size:10px; font-weight:700; color:#374151; margin-top:2px; }
.pdf-foot { font-size:9px; color:#4b5563; text-align:center; margin-top:8px;
  border-top:1px solid #999; padding-top:4px; }
.pdf-meta { display:flex; justify-content:space-between; font-size:11px;
  font-weight:700; margin:3px 1px 2px; }
.pdf-secbar { background:#d9d9d9; border:1px solid #000; text-align:center;
  font-weight:700; font-size:13px; padding:3px; margin-bottom:2px; }

.pdf-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.pdf-table th, .pdf-table td { border:1px solid #000; font-size:10px;
  padding:1px 3px; text-align:center; overflow:hidden; line-height:1.25; }
.pdf-table thead th { background:#d9d9d9; font-weight:700; line-height:1.15; }
.pdf-table thead th .t { font-weight:400; font-size:9px; white-space:nowrap; }
.pdf-table td.pdf-has, .pdf-table td.pdf-has .pdf-sec { font-weight:700; }   /* lecture text bold */
.pdf-table th.day, .pdf-table td.day { width:40px; text-align:left; font-weight:700; }
.pdf-table th.date, .pdf-table td.date { width:64px; text-align:left; white-space:nowrap; }
.pdf-sec { font-size:9px; }
.pdf-wk td { background:#d9d9d9; font-weight:700; text-align:left; }
.pdf-wknd td { background:#f2f2f2; }
.pdf-special td { background:#ededed; font-weight:600; text-align:left; }
.pdf-table tr { page-break-inside:avoid; }

/* On-screen schedule — the SAME dense table as the emailed PDF (gray headers,
   black borders, colour-coded cells), just a touch larger for the screen. */
.sched { color:#000; font-family:Arial, Helvetica, sans-serif; }
.sched-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid #cbd5e1; border-radius:10px; }
.sched .pdf-table th, .sched .pdf-table td { font-size:12px; padding:4px 7px; }
.sched .pdf-table th.day, .sched .pdf-table td.day { width:48px; }
.sched .pdf-table th.date, .sched .pdf-table td.date { width:74px; }
.sched .pdf-legend { font-size:12px; margin:2px 2px 12px; }