/* =============================================
   Red & Yellow Creative School of Business
   Timetable Stylesheet — Semester 2, 2026
   Filename: red-and-yellow-timetable.css
   ============================================= */

/* --- Google Font Import --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* --- CSS Variables --- */
:root {
  --color-bg:           #F8FAFC;
  --color-white:        #FFFFFF;
  --color-slate-100:    #F1F5F9;
  --color-slate-200:    #E2E8F0;
  --color-slate-400:    #94A3B8;
  --color-slate-600:    #475569;
  --color-slate-800:    #1E293B;
  --color-brand-red:    #DC2626;
  --color-brand-yellow: #F59E0B;
  --color-accent:       #6366F1;
  --color-room:         #1E40AF;
  --color-lunch-from:   #EA580C;
  --color-lunch-to:     #F97316;
  --color-grid-line:    #CBD5E1;

  /* Subject colours */
  --eco-bg:     #EEF2FF; --eco-border: #6366F1; --eco-text: #3730A3; --eco-tag: #6366F1;
  --bus-bg:     #F0FDF4; --bus-border: #22C55E; --bus-text: #14532D; --bus-tag: #22C55E;
  --cbc-bg:     #FFF7ED; --cbc-border: #F97316; --cbc-text: #7C2D12; --cbc-tag: #F97316;
  --vis-bg:     #FDF4FF; --vis-border: #A855F7; --vis-text: #581C87; --vis-tag: #A855F7;
  --cxp-bg:     #FFF1F2; --cxp-border: #F43F5E; --cxp-text: #881337; --cxp-tag: #F43F5E;
  --mkt-bg:     #ECFDF5; --mkt-border: #10B981; --mkt-text: #064E3B; --mkt-tag: #10B981;
  --fin-bg:     #EFF6FF; --fin-border: #3B82F6; --fin-text: #1E3A8A; --fin-tag: #3B82F6;
  --ent-bg:     #FEF9C3; --ent-border: #EAB308; --ent-text: #713F12; --ent-tag: #EAB308;
  --inf-bg:     #F0F9FF; --inf-border: #0EA5E9; --inf-text: #0C4A6E; --inf-tag: #0EA5E9;
  --clp-bg:     #FDF2F8; --clp-border: #EC4899; --clp-text: #831843; --clp-tag: #EC4899;
  --res-bg:     #FFF8F1; --res-border: #FB923C; --res-text: #7C2D12; --res-tag: #FB923C;
  --pjm-bg:     #F0FDFA; --pjm-border: #14B8A6; --pjm-text: #134E4A; --pjm-tag: #14B8A6;
  --bmg-bg:     #F7FEE7; --bmg-border: #84CC16; --bmg-text: #365314; --bmg-tag: #84CC16;
  --art-bg:     #FFF1F2; --art-border: #F43F5E; --art-text: #881337; --art-tag: #F43F5E;
  --ill-bg:     #EEF2FF; --ill-border: #818CF8; --ill-text: #312E81; --ill-tag: #818CF8;
  --phot-bg:    #FEF3C7; --phot-border: #F59E0B; --phot-text: #78350F; --phot-tag: #F59E0B;
  --gd-bg:      #F0FDF4; --gd-border:  #4ADE80; --gd-text:  #14532D; --gd-tag:  #4ADE80;
  --dd-bg:      #EFF6FF; --dd-border:  #60A5FA; --dd-text:  #1E3A8A; --dd-tag:  #60A5FA;
  --adv-bg:     #FDF4FF; --adv-border: #C084FC; --adv-text: #581C87; --adv-tag: #C084FC;
  --pro-bg:     #F8FAFC; --pro-border: #64748B; --pro-text: #1E293B; --pro-tag: #64748B;
  --dsk-bg:     #F0F9FF; --dsk-border: #38BDF8; --dsk-text: #0C4A6E; --dsk-tag: #38BDF8;
  --cdc-bg:     #FDF4FF; --cdc-border: #A855F7; --cdc-text: #581C87; --cdc-tag: #A855F7;
  --hcg-bg:     #FFF7ED; --hcg-border: #FB923C; --hcg-text: #7C2D12; --hcg-tag: #FB923C;
  --cp-bg:      #F0FDF4; --cp-border:  #22C55E; --cp-text:  #14532D; --cp-tag:  #22C55E;
  --erp-bg:     #EFF6FF; --erp-border: #3B82F6; --erp-text: #1E3A8A; --erp-tag: #3B82F6;
  --adm-bg:     #FDF2F8; --adm-border: #EC4899; --adm-text: #831843; --adm-tag: #EC4899;
  --rsd-bg:     #FEF3C7; --rsd-border: #F59E0B; --rsd-text: #78350F; --rsd-tag: #F59E0B;
  --ccp-bg:     #EEF2FF; --ccp-border: #6366F1; --ccp-text: #3730A3; --ccp-tag: #6366F1;
  --dtm-bg:     #FFF7ED; --dtm-border: #F97316; --dtm-text: #7C2D12; --dtm-tag: #F97316;
  --smb-bg:     #F0FDF4; --smb-border: #22C55E; --smb-text: #14532D; --smb-tag: #22C55E;
  --dsg-bg:     #FDF4FF; --dsg-border: #A855F7; --dsg-text: #581C87; --dsg-tag: #A855F7;
  --gen-bg:     #F8FAFC; --gen-border: #64748B; --gen-text: #1E293B; --gen-tag: #64748B;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--color-bg);
  color: var(--color-slate-800);
  padding: 2rem;
  font-size: 14px;
  line-height: 1.5;
}

/* --- Institution Header --- */
.tt-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.tt-logo-img { height: 48px; width: auto; display: block; }

.tt-header-text h1 {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--color-slate-800);
  line-height: 1.2;
}

.tt-header-text p {
  font-size: 0.8rem;
  color: var(--color-slate-400);
  margin-top: 0.2rem;
}

/* --- Programme Badge --- */
.tt-badge-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.tt-badge {
  background: var(--color-accent);
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(99,102,241,0.3);
}

.tt-badge-room {
  background: var(--color-slate-800);
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(30,41,59,0.3);
}

.tt-generated {
  font-size: 0.75rem;
  color: var(--color-slate-400);
}

/* --- Legend --- */
.tt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tt-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-slate-600);
}

.tt-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* --- Timetable Wrapper --- */
.tt-wrap {
  background: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  border: 1px solid var(--color-grid-line);
  overflow: hidden;
}

/* --- Main Table --- */
table.tt {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

table.tt col.time-col { width: 80px; }

/* --- Header Row --- */
table.tt thead tr { background: var(--color-slate-800); }

table.tt thead td,
table.tt thead th {
  padding: 0.75rem 1rem;
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  border-right: 1px solid #334155;
}

table.tt thead td:first-child {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-slate-400);
}

table.tt thead th .day-short {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--color-slate-400);
  display: block;
  margin-top: 2px;
}

/* --- Lunch Row --- */
tr.lunch-row td {
  background: linear-gradient(90deg, var(--color-lunch-from), var(--color-lunch-to), var(--color-lunch-from));
  text-align: center;
  padding: 0.55rem;
  border-top: 1px solid #fdba74;
  border-bottom: 1px solid #fdba74;
}

.lunch-label {
  color: white;
  font-weight: 900;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* --- Body Rows --- */
table.tt tbody tr { border-top: 1px solid var(--color-grid-line); }
table.tt tbody tr:nth-child(even):not(.lunch-row) { background: #f1f5f9; }
table.tt tbody tr:nth-child(odd):not(.lunch-row)  { background: var(--color-white); }

/* --- Time Label Cell --- */
td.time-label {
  padding: 0.75rem;
  border-right: 2px solid var(--color-grid-line);
  vertical-align: top;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-slate-800);
  white-space: nowrap;
}

/* --- Day Cells --- */
td.day-cell {
  border-right: 1px solid var(--color-grid-line);
  vertical-align: top;
  padding: 0.35rem;
  min-width: 130px;
}

td.day-cell:last-child { border-right: none; }

td.day-cell.empty {
  text-align: center;
  vertical-align: middle;
  color: var(--color-slate-200);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

/* --- Not Available Cell --- */
td.day-cell.not-available {
  background: repeating-linear-gradient(
    45deg,
    #f1f5f9,
    #f1f5f9 4px,
    #e2e8f0 4px,
    #e2e8f0 8px
  );
  text-align: center;
  vertical-align: middle;
}

.not-available-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-slate-400);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* --- Session Card --- */
.session-card {
  border-radius: 10px;
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.3rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border-left-width: 3px;
  border-left-style: solid;
}

.session-card:last-child { margin-bottom: 0; }

.session-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: white;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  margin-bottom: 0.3rem;
}

.session-subject {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  display: block;
}

.session-group {
  font-size: 0.68rem;
  color: var(--color-slate-400);
  display: block;
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-room {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-room);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

/* --- Subject colour classes --- */
.sub-eco  { background-color: var(--eco-bg);  border-left-color: var(--eco-border);  }
.sub-eco  .session-subject { color: var(--eco-text);  }
.sub-eco  .session-tag     { background: var(--eco-tag);  }

.sub-bus  { background-color: var(--bus-bg);  border-left-color: var(--bus-border);  }
.sub-bus  .session-subject { color: var(--bus-text);  }
.sub-bus  .session-tag     { background: var(--bus-tag);  }

.sub-cbc  { background-color: var(--cbc-bg);  border-left-color: var(--cbc-border);  }
.sub-cbc  .session-subject { color: var(--cbc-text);  }
.sub-cbc  .session-tag     { background: var(--cbc-tag);  }

.sub-vis  { background-color: var(--vis-bg);  border-left-color: var(--vis-border);  }
.sub-vis  .session-subject { color: var(--vis-text);  }
.sub-vis  .session-tag     { background: var(--vis-tag);  }

.sub-cxp  { background-color: var(--cxp-bg);  border-left-color: var(--cxp-border);  }
.sub-cxp  .session-subject { color: var(--cxp-text);  }
.sub-cxp  .session-tag     { background: var(--cxp-tag);  }

.sub-mkt  { background-color: var(--mkt-bg);  border-left-color: var(--mkt-border);  }
.sub-mkt  .session-subject { color: var(--mkt-text);  }
.sub-mkt  .session-tag     { background: var(--mkt-tag);  }

.sub-fin  { background-color: var(--fin-bg);  border-left-color: var(--fin-border);  }
.sub-fin  .session-subject { color: var(--fin-text);  }
.sub-fin  .session-tag     { background: var(--fin-tag);  }

.sub-ent  { background-color: var(--ent-bg);  border-left-color: var(--ent-border);  }
.sub-ent  .session-subject { color: var(--ent-text);  }
.sub-ent  .session-tag     { background: var(--ent-tag);  }

.sub-inf  { background-color: var(--inf-bg);  border-left-color: var(--inf-border);  }
.sub-inf  .session-subject { color: var(--inf-text);  }
.sub-inf  .session-tag     { background: var(--inf-tag);  }

.sub-clp  { background-color: var(--clp-bg);  border-left-color: var(--clp-border);  }
.sub-clp  .session-subject { color: var(--clp-text);  }
.sub-clp  .session-tag     { background: var(--clp-tag);  }

.sub-res  { background-color: var(--res-bg);  border-left-color: var(--res-border);  }
.sub-res  .session-subject { color: var(--res-text);  }
.sub-res  .session-tag     { background: var(--res-tag);  }

.sub-pjm  { background-color: var(--pjm-bg);  border-left-color: var(--pjm-border);  }
.sub-pjm  .session-subject { color: var(--pjm-text);  }
.sub-pjm  .session-tag     { background: var(--pjm-tag);  }

.sub-bmg  { background-color: var(--bmg-bg);  border-left-color: var(--bmg-border);  }
.sub-bmg  .session-subject { color: var(--bmg-text);  }
.sub-bmg  .session-tag     { background: var(--bmg-tag);  }

.sub-art  { background-color: var(--art-bg);  border-left-color: var(--art-border);  }
.sub-art  .session-subject { color: var(--art-text);  }
.sub-art  .session-tag     { background: var(--art-tag);  }

.sub-ill  { background-color: var(--ill-bg);  border-left-color: var(--ill-border);  }
.sub-ill  .session-subject { color: var(--ill-text);  }
.sub-ill  .session-tag     { background: var(--ill-tag);  }

.sub-phot { background-color: var(--phot-bg); border-left-color: var(--phot-border); }
.sub-phot .session-subject { color: var(--phot-text); }
.sub-phot .session-tag     { background: var(--phot-tag); }

.sub-gd   { background-color: var(--gd-bg);   border-left-color: var(--gd-border);   }
.sub-gd   .session-subject { color: var(--gd-text);   }
.sub-gd   .session-tag     { background: var(--gd-tag);   }

.sub-dd   { background-color: var(--dd-bg);   border-left-color: var(--dd-border);   }
.sub-dd   .session-subject { color: var(--dd-text);   }
.sub-dd   .session-tag     { background: var(--dd-tag);   }

.sub-adv  { background-color: var(--adv-bg);  border-left-color: var(--adv-border);  }
.sub-adv  .session-subject { color: var(--adv-text);  }
.sub-adv  .session-tag     { background: var(--adv-tag);  }

.sub-pro  { background-color: var(--pro-bg);  border-left-color: var(--pro-border);  }
.sub-pro  .session-subject { color: var(--pro-text);  }
.sub-pro  .session-tag     { background: var(--pro-tag);  }

.sub-dsk  { background-color: var(--dsk-bg);  border-left-color: var(--dsk-border);  }
.sub-dsk  .session-subject { color: var(--dsk-text);  }
.sub-dsk  .session-tag     { background: var(--dsk-tag);  }

.sub-cdc  { background-color: var(--cdc-bg);  border-left-color: var(--cdc-border);  }
.sub-cdc  .session-subject { color: var(--cdc-text);  }
.sub-cdc  .session-tag     { background: var(--cdc-tag);  }

.sub-hcg  { background-color: var(--hcg-bg);  border-left-color: var(--hcg-border);  }
.sub-hcg  .session-subject { color: var(--hcg-text);  }
.sub-hcg  .session-tag     { background: var(--hcg-tag);  }

.sub-cp   { background-color: var(--cp-bg);   border-left-color: var(--cp-border);   }
.sub-cp   .session-subject { color: var(--cp-text);   }
.sub-cp   .session-tag     { background: var(--cp-tag);   }

.sub-erp  { background-color: var(--erp-bg);  border-left-color: var(--erp-border);  }
.sub-erp  .session-subject { color: var(--erp-text);  }
.sub-erp  .session-tag     { background: var(--erp-tag);  }

.sub-adm  { background-color: var(--adm-bg);  border-left-color: var(--adm-border);  }
.sub-adm  .session-subject { color: var(--adm-text);  }
.sub-adm  .session-tag     { background: var(--adm-tag);  }

.sub-rsd  { background-color: var(--rsd-bg);  border-left-color: var(--rsd-border);  }
.sub-rsd  .session-subject { color: var(--rsd-text);  }
.sub-rsd  .session-tag     { background: var(--rsd-tag);  }

.sub-ccp  { background-color: var(--ccp-bg);  border-left-color: var(--ccp-border);  }
.sub-ccp  .session-subject { color: var(--ccp-text);  }
.sub-ccp  .session-tag     { background: var(--ccp-tag);  }

.sub-dtm  { background-color: var(--dtm-bg);  border-left-color: var(--dtm-border);  }
.sub-dtm  .session-subject { color: var(--dtm-text);  }
.sub-dtm  .session-tag     { background: var(--dtm-tag);  }

.sub-smb  { background-color: var(--smb-bg);  border-left-color: var(--smb-border);  }
.sub-smb  .session-subject { color: var(--smb-text);  }
.sub-smb  .session-tag     { background: var(--smb-tag);  }

.sub-dsg  { background-color: var(--dsg-bg);  border-left-color: var(--dsg-border);  }
.sub-dsg  .session-subject { color: var(--dsg-text);  }
.sub-dsg  .session-tag     { background: var(--dsg-tag);  }

.sub-gen  { background-color: var(--gen-bg);  border-left-color: var(--gen-border);  }
.sub-gen  .session-subject { color: var(--gen-text);  }
.sub-gen  .session-tag     { background: var(--gen-tag);  }

/* --- Footer --- */
.tt-footer {
  background: var(--color-slate-200);
  border-top: 1px solid var(--color-grid-line);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--color-slate-600);
}

/* --- Navigation / Back link --- */
.tt-nav { margin-bottom: 1.5rem; }
.tt-nav a, .tt-back a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8rem;
}
.tt-nav a:hover, .tt-back a:hover { text-decoration: underline; }
.tt-back { margin-top: 1.5rem; font-size: 0.8rem; }

/* --- Pin icon helper --- */
.pin-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e40af' stroke-width='2.5'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* --- Print --- */
@media print {
  body { padding: 0.5rem; background: white; }
  .tt-nav, .tt-back { display: none; }
  .tt-wrap { box-shadow: none; border: 1px solid #ccc; border-radius: 0; }
}