/* IPAM public web — shared layout, spacing, responsiveness */

:root {
  --ipam-space-xs: 8px;
  --ipam-space-sm: 12px;
  --ipam-space-md: 16px;
  --ipam-space-lg: 24px;
  --ipam-space-xl: 32px;
  --ipam-card-gap: 28px;
  --ipam-page-gutter: clamp(16px, 4vw, 48px);
  --ipam-header-max: 1400px;
  --ipam-content-max: 1400px;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

body.public-site {
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --text-muted: #475569;
  --border: #e2e8f0;
  --primary: #1b5e20;
  --primary-light: #2e7d32;
  --primary-dark: #0d3d14;
  --accent: #c5a028;
  --on-primary: #ffffff;
  --on-surface: #0f172a;
  --on-surface-muted: #475569;
  --tab-counter-bg: linear-gradient(145deg, #fef08a 0%, #facc15 100%);
  --tab-counter-text: #14532d;
  --tab-counter-hover-bg: linear-gradient(145deg, #fbbf24 0%, #f59e0b 100%);
  --tab-counter-hover-text: #ffffff;
  --tab-counter-active-bg: linear-gradient(145deg, #166534 0%, #1b5e20 100%);
  --tab-counter-active-text: #fef9c3;
  --tab-counter-on-pill-bg: linear-gradient(145deg, #d97706 0%, #f59e0b 100%);
  --tab-counter-on-pill-text: #ffffff;
  --tab-hover-brand-bg: rgba(255, 255, 255, 0.26);
  --tab-hover-brand-border: rgba(254, 240, 138, 0.85);
  --tab-hover-light-bg: #ecfdf5;
  --tab-hover-light-text: #166534;
  --tab-hover-light-border: #86efac;
  /* Notification cards — type chips & icon wells */
  --notif-timetable-bg: #dbeafe;
  --notif-timetable-text: #1e3a8a;
  --notif-timetable-icon: linear-gradient(145deg, #38bdf8 0%, #0284c7 100%);
  --notif-warning-bg: #ffedd5;
  --notif-warning-text: #9a3412;
  --notif-warning-icon: linear-gradient(145deg, #fb923c 0%, #ea580c 100%);
  --notif-announcement-bg: #d1fae5;
  --notif-announcement-text: #065f46;
  --notif-announcement-icon: linear-gradient(145deg, #34d399 0%, #059669 100%);
  --notif-info-bg: #e0e7ff;
  --notif-info-text: #3730a3;
  --notif-info-icon: linear-gradient(145deg, #818cf8 0%, #4f46e5 100%);
  --notif-event-bg: #ffe4e6;
  --notif-event-text: #9f1239;
  --notif-event-icon: linear-gradient(145deg, #fb7185 0%, #e11d48 100%);
  --notif-icon-fg: #ffffff;
  /* Class card detail icon chips */
  --detail-lecturer-icon: linear-gradient(145deg, #64748b 0%, #475569 100%);
  --detail-venue-icon: linear-gradient(145deg, #f59e0b 0%, #d97706 100%);
  --detail-level-icon: linear-gradient(145deg, #22c55e 0%, #15803d 100%);
  --detail-icon-fg: #ffffff;
  overflow-x: hidden;
  background-color: var(--bg);
  color: var(--on-surface);
}

body.public-site img,
body.public-site svg {
  max-width: 100%;
  height: auto;
}

body.public-site .detail-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

body.public-site .detail-label,
body.public-site .detail-value {
  display: block;
}

body.public-site .detail-value {
  line-height: 1.4;
  word-break: break-word;
}

/* —— Card & list spacing —— */
.class-grid {
  gap: var(--ipam-card-gap) !important;
  row-gap: var(--ipam-card-gap) !important;
}

.classes-list {
  display: flex;
  flex-direction: column;
  gap: var(--ipam-card-gap);
}

.classes-list .class-card,
.class-grid .class-card {
  margin: 0;
}

.shift-section {
  margin-bottom: var(--ipam-space-xl) !important;
}

.shift-section:last-child {
  margin-bottom: 0 !important;
}

body.public-site .shift-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

body.public-site .shift-line {
  flex: 1;
  height: 3px;
  min-width: 3rem;
  border-radius: 3px;
}

body.public-site .shift-badge {
  flex-shrink: 0;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid transparent;
}

/* Shift A — blue */
body.public-site .shift-header.shift-a .shift-badge,
body.public-site .shift-tag.shift-a {
  background-color: #dbeafe;
  color: #1e40af;
  border-color: #93c5fd;
}

body.public-site .shift-header.shift-a .shift-line {
  background: linear-gradient(to right, #2563eb 0%, #93c5fd 45%, transparent 100%);
}

/* Shift B — amber */
body.public-site .shift-header.shift-b .shift-badge,
body.public-site .shift-tag.shift-b {
  background-color: #fef3c7;
  color: #b45309;
  border-color: #fcd34d;
}

body.public-site .shift-header.shift-b .shift-line {
  background: linear-gradient(to right, #d97706 0%, #fbbf24 45%, transparent 100%);
}

/* Regular / default — green */
body.public-site .shift-header.shift-regular .shift-badge,
body.public-site .shift-tag.shift-regular {
  background-color: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

body.public-site .shift-header.shift-regular .shift-line {
  background: linear-gradient(to right, #16a34a 0%, #4ade80 45%, transparent 100%);
}

/* Exams — red */
body.public-site .shift-header.shift-exam .shift-badge,
body.public-site .shift-tag.shift-exam {
  background-color: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

body.public-site .shift-header.shift-exam .shift-line {
  background: linear-gradient(to right, #dc2626 0%, #f87171 45%, transparent 100%);
}

.course-grid {
  gap: var(--ipam-card-gap) !important;
}

.notifications-list {
  gap: var(--ipam-card-gap) !important;
}

.notification-card + .notification-card,
.course-card + .course-card {
  margin-top: 0;
}

/* —— Lecturer page layout —— */
.lecturer-results {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: var(--ipam-space-xl);
  margin-top: -32px;
  align-items: start;
}

.lecturer-results #schedule-section {
  min-width: 0;
}

.lecturer-results #schedule-section .schedule-section {
  min-width: 0;
}

.lecturer-results .profile-card {
  position: sticky;
  top: 96px;
}

.lecturer-results .class-title,
.lecturer-results .class-program {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.lecturer-results .schedule-header {
  flex-wrap: wrap;
  gap: var(--ipam-space-md);
}

.lecturer-results .day-tabs {
  width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Search suggestions below hero */
#lecturer-suggestions {
  margin-top: var(--ipam-space-md);
  max-height: min(50vh, 320px);
  overflow-y: auto;
}

/* —— Public site responsive (all pages) —— */
body.public-site .main-content,
body.public-site .filter-section,
body.public-site .hero-content,
body.public-site .page-header-content {
  width: 100%;
  max-width: var(--ipam-content-max);
  box-sizing: border-box;
}

body.public-site .search-container {
  width: 100%;
  max-width: 100%;
}

body.public-site .course-grid,
body.public-site .class-grid,
body.public-site .classes-list,
body.public-site .notifications-list,
body.public-site #timetable-content,
body.public-site #schedule-content,
body.public-site #course-grid {
  max-width: 100%;
}

body.public-site .class-card,
body.public-site .course-card,
body.public-site .notification-card {
  max-width: 100%;
  min-width: 0;
}

body.public-site:has(.floating-btn) .main-content {
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width: 1200px) {
  body.public-site .course-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 900px) {
  body.public-site .header-inner,
  body.public-site .header-top {
    padding-left: var(--ipam-page-gutter) !important;
    padding-right: var(--ipam-page-gutter) !important;
  }

  body.public-site .header-inner {
    flex-wrap: wrap;
    height: auto !important;
    min-height: 64px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    gap: var(--ipam-space-md);
  }

  body.public-site .header-nav {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  body.public-site .hero,
  body.public-site .page-header {
    padding-left: var(--ipam-page-gutter) !important;
    padding-right: var(--ipam-page-gutter) !important;
  }

  body.public-site .filter-section {
    padding-left: var(--ipam-page-gutter) !important;
    padding-right: var(--ipam-page-gutter) !important;
  }

  body.public-site .main-content {
    padding-left: var(--ipam-page-gutter) !important;
    padding-right: var(--ipam-page-gutter) !important;
  }
}

@media (max-width: 1024px) {
  body.public-site .lecturer-results {
    grid-template-columns: 1fr;
    margin-top: -24px;
    gap: var(--ipam-space-lg);
  }

  body.public-site .lecturer-results .profile-card {
    position: static;
  }

  body.public-site .class-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  body.public-site .nav-link span:not(.nav-badge) {
    display: none;
  }

  body.public-site .logo-text span {
    display: none;
  }

  body.public-site .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ipam-space-sm);
  }

  body.public-site .class-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ipam-space-sm);
  }

  body.public-site .shift-tag {
    align-self: flex-start;
  }

  body.public-site .course-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ipam-space-md);
  }

  body.public-site .duration-badge {
    align-self: flex-start;
  }

  body.public-site .breadcrumb {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  body.public-site .class-content,
  body.public-site .notification-content {
    min-width: 0;
  }

  body.public-site .lecturer-results {
    margin-top: -16px;
  }

  body.public-site .lecturer-results .schedule-section {
    padding: 20px 16px !important;
    border-radius: 16px;
  }

  body.public-site .lecturer-results .profile-card {
    padding: 20px 16px !important;
  }

  body.public-site .lecturer-results .profile-stat-value {
    font-size: 22px !important;
  }

  body.public-site .floating-btn {
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    right: max(16px, env(safe-area-inset-right)) !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
  }

  body.public-site .schedule-header,
  body.public-site .filter-bar {
    flex-direction: column;
    align-items: stretch !important;
  }

  body.public-site .filter-card {
    flex-direction: column;
    align-items: stretch;
  }

  body.public-site .filter-label {
    width: 100%;
  }

  body.public-site .day-tabs,
  body.public-site .tabs-container,
  body.public-site .filter-tabs,
  body.public-site .track-tabs-container {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    scrollbar-width: thin;
  }

  body.public-site .track-tabs {
    flex-wrap: nowrap;
    display: inline-flex;
  }

  body.public-site .track-tab,
  body.public-site .day-tab,
  body.public-site .filter-tab,
  body.public-site .tab-btn {
    flex-shrink: 0;
  }

  body.public-site .filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ipam-space-sm);
    width: 100%;
  }

  body.public-site .filter-actions .filter-btn,
  body.public-site .filter-actions .mark-all-btn {
    flex: 1 1 calc(50% - var(--ipam-space-sm));
    min-width: 0;
    justify-content: center;
  }

  body.public-site .course-grid {
    grid-template-columns: 1fr !important;
  }

  body.public-site .notification-card {
    flex-direction: column;
  }

  body.public-site .notification-header,
  body.public-site .notification-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  body.public-site .class-card {
    flex-direction: column;
  }

  body.public-site .time-sidebar {
    flex-direction: row;
    gap: 8px;
    padding: 16px !important;
    min-width: 0 !important;
    width: 100%;
  }

  body.public-site .search-box {
    flex-direction: column;
    padding: 12px;
  }

  body.public-site .search-box input {
    width: 100%;
    min-width: 0;
  }

  body.public-site .search-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  :root {
    --ipam-card-gap: 20px;
  }

  body.public-site .logo-text h1 {
    font-size: 18px !important;
  }

  body.public-site .hero h2,
  body.public-site .page-title {
    font-size: 1.35rem !important;
    line-height: 1.25;
  }

  body.public-site .class-card .class-content,
  body.public-site .lecturer-results .class-content {
    padding: 16px !important;
  }

  body.public-site .main-content {
    padding-top: 24px !important;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.public-site .filter-tab,
  body.public-site .filter-btn,
  body.public-site .day-tab,
  body.public-site .tab-btn,
  body.public-site .search-btn,
  body.public-site .lecturer-option {
    min-height: 44px;
  }

  body.public-site .track-tabs {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  body.public-site .footer-content {
    flex-direction: column;
    text-align: center;
    gap: var(--ipam-space-md);
  }

  body.public-site .filter-actions .filter-btn,
  body.public-site .filter-actions .mark-all-btn {
    flex: 1 1 100%;
  }
}

/* —— Utilities —— */
/* —— Notifications page: icon wells & type tags —— */
body.public-site .notification-icon {
  color: var(--notif-icon-fg);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

body.public-site .notification-icon svg {
  stroke: currentColor;
  fill: none;
}

body.public-site .notification-icon.timetable {
  background: var(--notif-timetable-icon);
}

body.public-site .notification-icon.warning {
  background: var(--notif-warning-icon);
}

body.public-site .notification-icon.announcement {
  background: var(--notif-announcement-icon);
}

body.public-site .notification-icon.info {
  background: var(--notif-info-icon);
}

body.public-site .notification-icon.event {
  background: var(--notif-event-icon);
}

body.public-site .notification-tag {
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

body.public-site .notification-tag.timetable {
  background-color: var(--notif-timetable-bg);
  color: var(--notif-timetable-text);
  border-color: rgba(30, 64, 175, 0.12);
}

body.public-site .notification-tag.warning {
  background-color: var(--notif-warning-bg);
  color: var(--notif-warning-text);
  border-color: rgba(154, 52, 18, 0.12);
}

body.public-site .notification-tag.announcement {
  background-color: var(--notif-announcement-bg);
  color: var(--notif-announcement-text);
  border-color: rgba(6, 95, 70, 0.12);
}

body.public-site .notification-tag.info {
  background-color: var(--notif-info-bg);
  color: var(--notif-info-text);
  border-color: rgba(55, 48, 163, 0.12);
}

body.public-site .notification-tag.event {
  background-color: var(--notif-event-bg);
  color: var(--notif-event-text);
  border-color: rgba(159, 18, 57, 0.12);
}

body.public-site .notification-card {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

body.public-site .notification-card:hover {
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
}

html:not([data-theme="dark"]) body.public-site .notification-card.unread {
  background: linear-gradient(90deg, #ecfdf5 0%, #ffffff 12%);
  border-left-color: var(--primary-light);
}

body.public-site .notification-time svg {
  color: var(--text-muted, var(--on-surface-muted));
  stroke: currentColor;
}

.ipam-loading,
.ipam-empty,
.ipam-message {
  padding: 24px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  text-align: center;
  color: #64748b;
  font-weight: 500;
}

.ipam-message-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

body.public-site .lecturer-no-data {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ipam-space-sm);
  min-height: 220px;
  padding: 48px 24px;
}

body.public-site .lecturer-no-data-icon {
  width: 48px;
  height: 48px;
  color: var(--text-muted);
  opacity: 0.7;
}

body.public-site .lecturer-no-data-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
}

body.public-site .lecturer-no-data-text {
  margin: 0;
  max-width: 360px;
  line-height: 1.5;
}

.lecturer-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  margin-bottom: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font: inherit;
}

.lecturer-option:hover {
  border-color: #1b5e20;
  background: #e8f5e9;
}

#schedule-section[hidden] {
  display: none !important;
}

#schedule-section:not([hidden]) {
  display: block;
  width: 100%;
}

.suggestions-label {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* —— Tab counters (shared chip) —— */
body.public-site .count,
body.public-site .day-count,
body.public-site .tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  padding: 2px 9px;
  margin-left: 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  opacity: 1;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}

body.public-site .tab-btn,
body.public-site .track-tab,
body.public-site .day-tab,
body.public-site .filter-tab,
body.public-site .filter-btn {
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

body.public-site .tab-btn:hover:not(.active),
body.public-site .track-tab:hover:not(.active),
body.public-site .day-tab:hover:not(.active),
body.public-site .filter-tab:hover:not(.active),
body.public-site .filter-btn:hover:not(.active) {
  transform: translateY(-1px);
}

.site-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  background: #fff;
}

.site-logo-footer {
  filter: none;
}

.logo-icon img,
.footer-logo-icon img {
  padding: 4px;
}

.floating-btn {
  border: none;
  cursor: pointer;
  font: inherit;
}

.floating-btn.is-exams {
  background-color: #b91c1c;
  box-shadow: 0 8px 24px rgba(185, 28, 28, 0.35);
}

/* —— Hero institution title: 3D gold gradient (home page) —— */
body.public-site .hero-institution {
  position: relative;
  margin: 0 0 18px;
  padding: 0;
  max-width: min(920px, 100%);
  font-size: clamp(1.05rem, 2.6vw, 1.72rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.38;
  color: transparent;
}

body.public-site .hero-institution-shadow,
body.public-site .hero-institution-text {
  display: block;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

body.public-site .hero-institution-shadow {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 0;
  color: rgba(13, 61, 20, 0.92);
  transform: translate(0.14em, 0.16em) scale(1);
  filter: blur(0.35px);
  user-select: none;
  pointer-events: none;
}

body.public-site .hero-institution-text {
  position: relative;
  z-index: 1;
  background: linear-gradient(
    165deg,
    #ffffff 0%,
    #fffef0 12%,
    #fef9c3 26%,
    #fde68a 42%,
    #fbbf24 56%,
    #f59e0b 72%,
    #d97706 88%,
    #b45309 100%
  );
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55))
    drop-shadow(0 2px 0 rgba(13, 61, 20, 0.75))
    drop-shadow(0 4px 3px rgba(13, 61, 20, 0.55))
    drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
  transform: perspective(720px) rotateX(7deg);
  transform-origin: center top;
}

@media (prefers-reduced-motion: no-preference) {
  body.public-site .hero-institution-text {
    animation: hero-institution-shine 9s ease-in-out infinite;
  }
}

@keyframes hero-institution-shine {
  0%,
  100% {
    background-position: 0% 42%;
  }
  50% {
    background-position: 100% 58%;
  }
}

html[data-theme="dark"] body.public-site .hero-institution-shadow {
  color: rgba(0, 0, 0, 0.72);
  transform: translate(0.12em, 0.14em);
}

html[data-theme="dark"] body.public-site .hero-institution-text {
  background: linear-gradient(
    165deg,
    #fffef5 0%,
    #fef08a 18%,
    #facc15 38%,
    #eab308 55%,
    #ca8a04 72%,
    #a16207 100%
  );
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35))
    drop-shadow(0 3px 0 rgba(0, 0, 0, 0.65))
    drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}

@media (max-width: 600px) {
  body.public-site .hero-institution {
    font-size: clamp(0.95rem, 4.2vw, 1.2rem);
    letter-spacing: 0.03em;
  }

  body.public-site .hero-institution-text {
    transform: perspective(520px) rotateX(4deg);
  }

  body.public-site .hero-institution-shadow {
    transform: translate(0.1em, 0.12em);
  }
}

/* —— Light theme: text/icons white on brand surfaces, black on light surfaces —— */
/* White text on brand green surfaces (light & dark) */
body.public-site .header,
body.public-site .header a,
body.public-site .header .logo,
body.public-site .header .nav-link,
body.public-site .hero,
body.public-site .hero h2,
body.public-site .hero p,
body.public-site .page-header,
body.public-site .page-header .page-title,
body.public-site .page-header .page-subtitle,
body.public-site .page-header .breadcrumb,
body.public-site .page-header .breadcrumb a,
body.public-site .page-header .breadcrumb span {
  color: var(--on-primary);
}

/* Icons on green brand surfaces → white (theme toggle uses gold, set separately) */
html:not([data-theme="dark"]) body.public-site .header .nav-link:not(.theme-toggle-btn),
html:not([data-theme="dark"]) body.public-site .header .nav-link:not(.theme-toggle-btn) svg,
html:not([data-theme="dark"]) body.public-site .header .back-btn,
html:not([data-theme="dark"]) body.public-site .header .back-btn svg,
html:not([data-theme="dark"]) body.public-site .hero .search-btn svg,
html:not([data-theme="dark"]) body.public-site .page-header svg,
html:not([data-theme="dark"]) body.public-site .filter-bar .mark-all-btn svg,
html:not([data-theme="dark"]) body.public-site .floating-btn svg,
html:not([data-theme="dark"]) body.public-site .profile-avatar svg,
html:not([data-theme="dark"]) body.public-site .course-meta svg {
  stroke: currentColor;
  color: var(--on-primary);
}

html:not([data-theme="dark"]) body.public-site .search-btn,
html:not([data-theme="dark"]) body.public-site .btn-primary,
html:not([data-theme="dark"]) body.public-site .course-btn,
html:not([data-theme="dark"]) body.public-site .filter-tab.active,
html:not([data-theme="dark"]) body.public-site .day-tab.active,
html:not([data-theme="dark"]) body.public-site .filter-btn.active,
html:not([data-theme="dark"]) body.public-site .mark-all-btn.active {
  color: var(--on-primary);
}

html:not([data-theme="dark"]) body.public-site .search-btn svg,
html:not([data-theme="dark"]) body.public-site .btn-primary svg,
html:not([data-theme="dark"]) body.public-site .course-btn svg {
  stroke: currentColor;
  color: var(--on-primary);
}

html:not([data-theme="dark"]) body.public-site .page-header .track-tab {
  color: rgba(255, 255, 255, 0.92);
}

html:not([data-theme="dark"]) body.public-site .page-header .track-tab:hover:not(.active) {
  color: #ffffff;
  background-color: var(--tab-hover-brand-bg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

html:not([data-theme="dark"]) body.public-site .page-header .track-tab.active {
  color: #14532d;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}

html:not([data-theme="dark"]) body.public-site .page-header .tab-btn {
  color: rgba(255, 255, 255, 0.92);
}

html:not([data-theme="dark"]) body.public-site .page-header .tab-btn:hover:not(.active) {
  color: #ffffff;
  background-color: var(--tab-hover-brand-bg);
  border-color: var(--tab-hover-brand-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

html:not([data-theme="dark"]) body.public-site .page-header .tab-btn.active {
  color: var(--primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}

html:not([data-theme="dark"]) body.public-site .page-header .tab-btn .count,
html:not([data-theme="dark"]) body.public-site .page-header .track-tab .count {
  background: var(--tab-counter-bg);
  color: var(--tab-counter-text);
  box-shadow: 0 1px 3px rgba(20, 83, 45, 0.15);
}

html:not([data-theme="dark"]) body.public-site .page-header .tab-btn:hover:not(.active) .count,
html:not([data-theme="dark"]) body.public-site .page-header .track-tab:hover:not(.active) .count {
  background: var(--tab-counter-hover-bg);
  color: var(--tab-counter-hover-text);
  box-shadow: 0 2px 6px rgba(180, 83, 9, 0.25);
}

html:not([data-theme="dark"]) body.public-site .page-header .tab-btn.active .count {
  background: var(--tab-counter-active-bg);
  color: var(--tab-counter-active-text);
}

html:not([data-theme="dark"]) body.public-site .page-header .track-tab.active .count {
  background: var(--tab-counter-on-pill-bg);
  color: var(--tab-counter-on-pill-text);
  box-shadow: 0 2px 6px rgba(180, 83, 9, 0.3);
}

html:not([data-theme="dark"]) body.public-site .search-box input {
  color: var(--on-surface);
}

html:not([data-theme="dark"]) body.public-site .search-box input::placeholder {
  color: var(--on-surface-muted);
}

html:not([data-theme="dark"]) body.public-site .class-card,
html:not([data-theme="dark"]) body.public-site .course-card,
html:not([data-theme="dark"]) body.public-site .notification-card,
html:not([data-theme="dark"]) body.public-site .profile-card,
html:not([data-theme="dark"]) body.public-site .schedule-section,
html:not([data-theme="dark"]) body.public-site .filter-card,
html:not([data-theme="dark"]) body.public-site .filter-bar,
html:not([data-theme="dark"]) body.public-site .main-content {
  color: var(--on-surface);
}

html:not([data-theme="dark"]) body.public-site .class-title,
html:not([data-theme="dark"]) body.public-site .course-title,
html:not([data-theme="dark"]) body.public-site .notification-title,
html:not([data-theme="dark"]) body.public-site .section-title,
html:not([data-theme="dark"]) body.public-site .profile-info h2,
html:not([data-theme="dark"]) body.public-site .detail-value,
html:not([data-theme="dark"]) body.public-site .footer-logo span {
  color: var(--on-surface);
}

html:not([data-theme="dark"]) body.public-site .class-code,
html:not([data-theme="dark"]) body.public-site .class-program,
html:not([data-theme="dark"]) body.public-site .course-code,
html:not([data-theme="dark"]) body.public-site .detail-label,
html:not([data-theme="dark"]) body.public-site .notification-body,
html:not([data-theme="dark"]) body.public-site .notification-time,
html:not([data-theme="dark"]) body.public-site .footer-text,
html:not([data-theme="dark"]) body.public-site .filter-label,
html:not([data-theme="dark"]) body.public-site .suggestions-label,
html:not([data-theme="dark"]) body.public-site .lecturer-no-data-text,
html:not([data-theme="dark"]) body.public-site .ipam-loading,
html:not([data-theme="dark"]) body.public-site .ipam-empty {
  color: var(--on-surface-muted);
}

html:not([data-theme="dark"]) body.public-site .lecturer-no-data-title {
  color: var(--on-surface);
}

html:not([data-theme="dark"]) body.public-site .lecturer-no-data-icon {
  color: var(--primary);
  stroke: currentColor;
}

html:not([data-theme="dark"]) body.public-site .filter-label svg {
  color: #166534;
  stroke: currentColor;
}

html:not([data-theme="dark"]) body.public-site .time-text {
  color: var(--on-surface);
}

html:not([data-theme="dark"]) body.public-site .profile-stat {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: var(--on-primary);
}

html:not([data-theme="dark"]) body.public-site .profile-stat-value,
html:not([data-theme="dark"]) body.public-site .profile-stat-label {
  color: var(--on-primary);
}

html:not([data-theme="dark"]) body.public-site .course-header .course-logo svg {
  color: var(--primary);
  stroke: currentColor;
}

html:not([data-theme="dark"]) body.public-site .detail-item span,
html:not([data-theme="dark"]) body.public-site .detail-item strong {
  color: var(--on-surface);
}

/* Class card detail icons — white glyphs on colored chips (light + dark) */
body.public-site .class-card .detail-icon,
body.public-site #timetable-content .detail-icon,
body.public-site .lecturer-results .detail-icon {
  color: var(--detail-icon-fg) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.14);
}

body.public-site .class-card .detail-icon svg,
body.public-site #timetable-content .detail-icon svg,
body.public-site .lecturer-results .detail-icon svg {
  stroke: currentColor !important;
  color: var(--detail-icon-fg) !important;
  fill: none !important;
}

body.public-site .class-card .detail-icon.lecturer,
body.public-site #timetable-content .detail-icon.lecturer,
body.public-site .lecturer-results .detail-icon.lecturer {
  background: var(--detail-lecturer-icon) !important;
}

body.public-site .class-card .detail-icon.venue,
body.public-site #timetable-content .detail-icon.venue,
body.public-site .lecturer-results .detail-icon.venue {
  background: var(--detail-venue-icon) !important;
}

body.public-site .class-card .detail-icon.level,
body.public-site #timetable-content .detail-icon.level,
body.public-site .lecturer-results .detail-icon.level {
  background: var(--detail-level-icon) !important;
}

/* Never inherit muted card text color onto timetable detail icons */
body.public-site .class-card .detail-icon,
body.public-site .class-card .detail-icon * {
  --detail-icon-fg: #ffffff;
}

html:not([data-theme="dark"]) body.public-site .detail-item.lecturer > svg {
  color: #475569;
  stroke: #475569;
}

/* shift-tag / shift-badge colors come from .shift-a | .shift-b | .shift-regular | .shift-exam above */

/* Course department strip — brand green in light & dark */
body.public-site .course-meta {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: var(--on-primary);
}

body.public-site .course-meta span {
  color: var(--on-primary);
}

/* Timetable / notifications filter chrome (brand bar) — same green in light & dark */
body.public-site .schedule-header,
body.public-site .filter-bar {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: var(--on-primary);
}

html:not([data-theme="dark"]) body.public-site .schedule-header .class-count,
html:not([data-theme="dark"]) body.public-site .filter-bar .filter-count,
html:not([data-theme="dark"]) body.public-site .filter-bar .filter-count strong,
html:not([data-theme="dark"]) body.public-site .filter-bar .unread-count {
  color: var(--on-primary);
}

html:not([data-theme="dark"]) body.public-site .schedule-header .class-count {
  background-color: rgba(255, 255, 255, 0.18);
  color: var(--on-primary);
}

html:not([data-theme="dark"]) body.public-site .filter-bar .filter-divider {
  background-color: rgba(255, 255, 255, 0.35);
}

html:not([data-theme="dark"]) body.public-site .schedule-header .day-tab,
html:not([data-theme="dark"]) body.public-site .schedule-section > .day-tabs .day-tab {
  color: var(--on-primary);
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}

html:not([data-theme="dark"]) body.public-site .schedule-header .day-tab svg,
html:not([data-theme="dark"]) body.public-site .schedule-section > .day-tabs .day-tab svg {
  color: var(--on-primary);
  stroke: currentColor;
}

html:not([data-theme="dark"]) body.public-site .schedule-header .day-tab .count,
html:not([data-theme="dark"]) body.public-site .schedule-header .day-tab .day-count,
html:not([data-theme="dark"]) body.public-site .schedule-section > .day-tabs .day-tab .count,
html:not([data-theme="dark"]) body.public-site .schedule-section > .day-tabs .day-tab .day-count {
  background: var(--tab-counter-bg);
  color: var(--tab-counter-text);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

html:not([data-theme="dark"]) body.public-site .schedule-header .day-tab.active,
html:not([data-theme="dark"]) body.public-site .schedule-section > .day-tabs .day-tab.active {
  background-color: var(--on-primary);
  color: var(--primary);
  border-color: var(--on-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

html:not([data-theme="dark"]) body.public-site .schedule-header .day-tab.active .count,
html:not([data-theme="dark"]) body.public-site .schedule-header .day-tab.active .day-count,
html:not([data-theme="dark"]) body.public-site .schedule-section > .day-tabs .day-tab.active .count,
html:not([data-theme="dark"]) body.public-site .schedule-section > .day-tabs .day-tab.active .day-count {
  background: var(--tab-counter-active-bg);
  color: var(--tab-counter-active-text);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15);
}

html:not([data-theme="dark"]) body.public-site .schedule-section > .schedule-header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 16px;
}

html:not([data-theme="dark"]) body.public-site .schedule-section .schedule-title {
  color: var(--on-primary);
}

html:not([data-theme="dark"]) body.public-site .schedule-section > .day-tabs {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  padding: 14px 16px;
  border-radius: 12px;
}

html:not([data-theme="dark"]) body.public-site .filter-bar .filter-btn:not(.active),
html:not([data-theme="dark"]) body.public-site .filter-bar .mark-all-btn {
  color: var(--on-primary);
  border-color: rgba(255, 255, 255, 0.45);
  background-color: rgba(255, 255, 255, 0.1);
}

html:not([data-theme="dark"]) body.public-site .filter-bar .filter-btn:not(.active):hover,
html:not([data-theme="dark"]) body.public-site .filter-bar .mark-all-btn:hover {
  color: var(--on-primary);
  background-color: var(--tab-hover-brand-bg);
  border-color: var(--tab-hover-brand-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

html:not([data-theme="dark"]) body.public-site .filter-bar .filter-btn.active {
  background-color: var(--on-primary);
  color: var(--primary);
  border-color: var(--on-primary);
}

html:not([data-theme="dark"]) body.public-site .filter-bar .mark-all-btn svg {
  color: var(--on-primary);
  stroke: currentColor;
}

html:not([data-theme="dark"]) body.public-site .filter-card .filter-tab:not(.active) {
  color: var(--on-surface);
  border: 1px solid transparent;
}

html:not([data-theme="dark"]) body.public-site .filter-card .filter-tab:hover:not(.active) {
  color: var(--tab-hover-light-text);
  background-color: var(--tab-hover-light-bg);
  border-color: var(--tab-hover-light-border);
  box-shadow: 0 2px 10px rgba(22, 101, 52, 0.1);
}

html:not([data-theme="dark"]) body.public-site .filter-card .filter-tab.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: var(--on-primary);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(27, 94, 32, 0.25);
}

html:not([data-theme="dark"]) body.public-site .filter-card .filter-tab .tab-count {
  background: var(--tab-counter-bg);
  color: var(--tab-counter-text);
}

html:not([data-theme="dark"]) body.public-site .filter-card .filter-tab:hover:not(.active) .tab-count {
  background: var(--tab-counter-hover-bg);
  color: var(--tab-counter-hover-text);
}

html:not([data-theme="dark"]) body.public-site .filter-card .filter-tab.active .tab-count {
  background: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

html:not([data-theme="dark"]) body.public-site .mark-read-btn,
html:not([data-theme="dark"]) body.public-site .lecturer-option {
  color: var(--on-surface);
}

html:not([data-theme="dark"]) body.public-site .lecturer-option:hover {
  color: var(--on-surface);
}

html:not([data-theme="dark"]) body.public-site .schedule-header .day-tab:not(.active):hover,
html:not([data-theme="dark"]) body.public-site .schedule-section > .day-tabs .day-tab:not(.active):hover {
  color: var(--on-primary);
  background-color: var(--tab-hover-brand-bg);
  border-color: var(--tab-hover-brand-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

html:not([data-theme="dark"]) body.public-site .schedule-header .day-tab:not(.active):hover .count,
html:not([data-theme="dark"]) body.public-site .schedule-header .day-tab:not(.active):hover .day-count,
html:not([data-theme="dark"]) body.public-site .schedule-section > .day-tabs .day-tab:not(.active):hover .count,
html:not([data-theme="dark"]) body.public-site .schedule-section > .day-tabs .day-tab:not(.active):hover .day-count {
  background: var(--tab-counter-hover-bg);
  color: var(--tab-counter-hover-text);
  box-shadow: 0 2px 8px rgba(180, 83, 9, 0.28);
}

html:not([data-theme="dark"]) body.public-site .floating-btn {
  color: #1e293b;
}

html:not([data-theme="dark"]) body.public-site .floating-btn svg {
  color: #1e293b;
  stroke: currentColor;
}

html:not([data-theme="dark"]) body.public-site .floating-btn.is-exams {
  color: #ffffff;
}

html:not([data-theme="dark"]) body.public-site .floating-btn.is-exams svg {
  color: #ffffff;
  stroke: currentColor;
}

html[data-theme="dark"] body.public-site .floating-btn {
  color: #0f172a;
}

html[data-theme="dark"] body.public-site .floating-btn svg {
  color: #0f172a;
  stroke: currentColor;
}

html[data-theme="dark"] body.public-site .floating-btn.is-exams,
html[data-theme="dark"] body.public-site .floating-btn.is-exams svg {
  color: #ffffff;
  stroke: currentColor;
}

html:not([data-theme="dark"]) body.public-site .course-header,
html:not([data-theme="dark"]) body.public-site .course-header h3,
html:not([data-theme="dark"]) body.public-site .course-header span,
html:not([data-theme="dark"]) body.public-site .course-header .duration-badge,
html:not([data-theme="dark"]) body.public-site .course-header .course-code {
  color: var(--on-primary);
}

html:not([data-theme="dark"]) body.public-site .mark-all-btn:hover {
  color: var(--on-primary);
}

html:not([data-theme="dark"]) body.public-site .ipam-message-error {
  color: #7f1d1d;
}

/* —— Theme toggle (header) —— */
body.public-site .theme-toggle-btn {
  cursor: pointer;
  border: none;
  font: inherit;
  font-family: inherit;
}

html:not([data-theme="dark"]) body.public-site .header .theme-toggle-btn {
  color: #fde68a;
  background-color: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(250, 204, 21, 0.55);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

html:not([data-theme="dark"]) body.public-site .header .theme-toggle-btn:hover {
  color: #fef9c3;
  background-color: rgba(0, 0, 0, 0.32);
  border-color: #facc15;
}

html:not([data-theme="dark"]) body.public-site .header .theme-toggle-btn svg,
html:not([data-theme="dark"]) body.public-site .header .theme-toggle-btn .theme-icon {
  color: #fde68a;
  stroke: currentColor;
}

html:not([data-theme="dark"]) body.public-site .header .theme-toggle-btn:hover svg,
html:not([data-theme="dark"]) body.public-site .header .theme-toggle-btn:hover .theme-icon {
  color: #fef9c3;
}

html[data-theme="dark"] body.public-site .header .theme-toggle-btn {
  color: #fde68a;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(250, 204, 21, 0.45);
}

html[data-theme="dark"] body.public-site .header .theme-toggle-btn:hover {
  color: #fef9c3;
  background-color: rgba(255, 255, 255, 0.14);
  border-color: #facc15;
}

html[data-theme="dark"] body.public-site .header .theme-toggle-btn svg,
html[data-theme="dark"] body.public-site .header .theme-toggle-btn .theme-icon {
  color: #fde68a;
  stroke: currentColor;
}

body.public-site .theme-toggle-btn .theme-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

body.public-site .theme-toggle-btn .theme-icon-sun {
  display: none;
}

html[data-theme="dark"] body.public-site .theme-toggle-btn .theme-icon-moon {
  display: none;
}

html[data-theme="dark"] body.public-site .theme-toggle-btn .theme-icon-sun {
  display: block;
}

@media (max-width: 640px) {
  body.public-site .theme-toggle-btn .theme-toggle-label {
    display: none;
  }
}

/* —— Dark theme (user-selected) —— */
html[data-theme="dark"] body.public-site {
  --bg: #0f172a;
  --card: #1e293b;
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --border: #334155;
  /* Same IPAM brand greens as light theme */
  --primary: #1b5e20;
  --primary-light: #2e7d32;
  --primary-dark: #0d3d14;
  --accent: #c5a028;
  --on-primary: #ffffff;
  --time-color: #ffffff;
  --detail-lecturer-icon: linear-gradient(145deg, #64748b 0%, #475569 100%);
  --detail-venue-icon: linear-gradient(145deg, #f59e0b 0%, #d97706 100%);
  --detail-level-icon: linear-gradient(145deg, #2e7d32 0%, #1b5e20 100%);
}

  body.public-site .ipam-loading,
  body.public-site .ipam-empty,
  body.public-site .ipam-message {
    background: var(--card);
    border-color: var(--border);
    color: var(--text-muted);
  }

  body.public-site .ipam-message-error {
    border-color: #7f1d1d;
    background: #450a0a;
    color: #fecaca;
  }

  body.public-site .lecturer-option {
    background: var(--card);
    border-color: var(--border);
    color: var(--text);
  }

  body.public-site .lecturer-option:hover {
    border-color: var(--primary-light);
    background: #14532d;
    color: #ecfdf5;
  }

  body.public-site .suggestions-label {
    color: var(--text-muted);
  }

  body.public-site .site-logo {
    background: var(--card);
  }

  /* Search */
  body.public-site .search-box {
    background-color: var(--card);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  }

  body.public-site .search-box input {
    color: var(--text);
  }

  body.public-site .search-box input::placeholder {
    color: var(--text-muted);
  }

  /* Filters & schedule chrome */
  body.public-site .filter-card,
  body.public-site .filter-bar,
  body.public-site .schedule-header,
  body.public-site .profile-card,
  body.public-site .schedule-section,
  body.public-site .class-count {
    background-color: var(--card);
    border-color: var(--border);
    color: var(--text-muted);
  }

  body.public-site .filter-tab,
  body.public-site .day-tab {
    background-color: var(--card);
    color: var(--text);
    border-color: var(--border);
  }

  body.public-site .filter-card .filter-tab:hover:not(.active) {
    border-color: var(--primary-light);
    background-color: #14532d;
    color: #ecfdf5;
  }

  body.public-site .filter-card .filter-tab.active {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-light) 100%);
    color: #ecfdf5;
    border-color: var(--primary-light);
  }

  body.public-site .schedule-section > .schedule-header {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-light) 100%);
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 16px;
  }

  body.public-site .schedule-section .schedule-title {
    color: #ecfdf5;
  }

  body.public-site .schedule-header .day-tab:hover:not(.active),
  body.public-site .schedule-section > .day-tabs .day-tab:hover:not(.active) {
    border-color: var(--primary-light);
    background-color: #263548;
  }

  body.public-site .schedule-header .day-tab.active,
  body.public-site .schedule-section > .day-tabs .day-tab.active {
    background-color: var(--primary-dark);
    color: #ecfdf5;
    border-color: var(--primary-light);
  }

  body.public-site .schedule-header .day-tab .count,
  body.public-site .schedule-header .day-tab .day-count,
  body.public-site .schedule-section > .day-tabs .day-tab .count,
  body.public-site .schedule-section > .day-tabs .day-tab .day-count {
    background: linear-gradient(145deg, #854d0e 0%, #a16207 100%);
    color: #fef9c3;
  }

  body.public-site .schedule-header .day-tab:hover:not(.active) .count,
  body.public-site .schedule-header .day-tab:hover:not(.active) .day-count,
  body.public-site .schedule-section > .day-tabs .day-tab:hover:not(.active) .count,
  body.public-site .schedule-section > .day-tabs .day-tab:hover:not(.active) .day-count {
    background: linear-gradient(145deg, #f59e0b 0%, #fbbf24 100%);
    color: #1e293b;
  }

  body.public-site .schedule-header .day-tab.active .count,
  body.public-site .schedule-header .day-tab.active .day-count,
  body.public-site .schedule-section > .day-tabs .day-tab.active .count,
  body.public-site .schedule-section > .day-tabs .day-tab.active .day-count {
    background: linear-gradient(145deg, #4ade80 0%, #22c55e 100%);
    color: #052e16;
  }

  body.public-site .filter-card .filter-tab .tab-count {
    background: linear-gradient(145deg, #854d0e 0%, #a16207 100%);
    color: #fef9c3;
  }

  body.public-site .page-header .tab-btn:hover:not(.active),
  body.public-site .page-header .track-tab:hover:not(.active) {
    background-color: #263548;
    color: #f8fafc;
  }

  body.public-site .page-header .tab-btn .count,
  body.public-site .page-header .track-tab .count {
    background: linear-gradient(145deg, #854d0e 0%, #a16207 100%);
    color: #fef9c3;
  }

  body.public-site .page-header .tab-btn.active {
    background-color: var(--card);
    color: var(--primary-light);
  }

  body.public-site .track-tab {
    color: rgba(255, 255, 255, 0.8);
  }

  body.public-site .track-tab.active {
    background-color: var(--accent);
    color: #0f172a;
  }

  /* Cards */
  body.public-site .class-card,
  body.public-site .course-card,
  body.public-site .notification-card {
    background-color: var(--card);
    border-color: var(--border);
    color: var(--text);
  }

  body.public-site .class-title {
    color: #86efac;
  }

  body.public-site .class-code,
  body.public-site .class-program,
  body.public-site .course-code,
  body.public-site .course-meta,
  body.public-site .detail-label,
  body.public-site .notification-body,
  body.public-site .notification-time,
  body.public-site .footer-text {
    color: var(--text-muted);
  }

  body.public-site .detail-value,
  body.public-site .notification-title,
  body.public-site .profile-info h2,
  body.public-site .section-title,
  body.public-site .course-title,
  body.public-site .footer-logo span {
    color: var(--text);
  }

  body.public-site .profile-stat {
    background-color: #0f172a;
  }

  body.public-site .profile-stat-value {
    color: var(--primary-light);
  }

  body.public-site .profile-stat-label {
    color: var(--text-muted);
  }

  /* Time column */
  body.public-site .time-sidebar {
    background: linear-gradient(180deg, #14532d 0%, #166534 100%) !important;
  }

  body.public-site .time-text {
    color: #99f6e4 !important;
  }

  /* Shift dividers (dark theme) */
  body.public-site .shift-header.shift-a .shift-badge,
  body.public-site .shift-tag.shift-a {
    background-color: #1e3a8a;
    color: #bfdbfe;
    border-color: #3b82f6;
  }

  body.public-site .shift-header.shift-a .shift-line {
    background: linear-gradient(to right, #3b82f6 0%, #60a5fa 50%, transparent 100%);
  }

  body.public-site .shift-header.shift-b .shift-badge,
  body.public-site .shift-tag.shift-b {
    background-color: #78350f;
    color: #fde68a;
    border-color: #f59e0b;
  }

  body.public-site .shift-header.shift-b .shift-line {
    background: linear-gradient(to right, #f59e0b 0%, #fbbf24 50%, transparent 100%);
  }

  body.public-site .shift-header.shift-regular .shift-badge,
  body.public-site .shift-tag.shift-regular {
    background-color: #14532d;
    color: #bbf7d0;
    border-color: #22c55e;
  }

  body.public-site .shift-header.shift-regular .shift-line {
    background: linear-gradient(to right, #22c55e 0%, #4ade80 50%, transparent 100%);
  }

  body.public-site .shift-header.shift-exam .shift-badge,
  body.public-site .shift-tag.shift-exam {
    background-color: #7f1d1d;
    color: #fecaca;
    border-color: #ef4444;
  }

  body.public-site .shift-header.shift-exam .shift-line {
    background: linear-gradient(to right, #ef4444 0%, #f87171 50%, transparent 100%);
  }

  body.public-site .course-level,
  body.public-site .course-duration,
  body.public-site .duration-badge {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ecfdf5;
  }

  body.public-site .course-logo {
    background-color: var(--card);
  }

  body.public-site .course-logo svg {
    color: var(--primary-light);
  }

  body.public-site .course-meta {
    background-color: #0f172a;
  }

  body.public-site .course-meta svg {
    color: var(--primary-light);
  }

  body.public-site .btn-primary {
    background-color: var(--primary-dark);
    color: #ecfdf5;
  }

  body.public-site .btn-primary:hover {
    background-color: var(--primary-light);
    color: #0f172a;
  }

  body.public-site .filter-btn,
  body.public-site .mark-all-btn {
    background-color: var(--card);
    border-color: var(--border);
    color: var(--text);
  }

  body.public-site .filter-btn:hover,
  body.public-site .mark-all-btn:hover {
    border-color: var(--primary-light);
    background-color: #14532d;
    color: #ecfdf5;
  }

  body.public-site .filter-btn.active {
    background-color: var(--primary-dark);
    border-color: var(--primary-light);
    color: #ecfdf5;
  }

  body.public-site .filter-divider {
    background-color: var(--border);
  }

  body.public-site .course-btn {
    background-color: var(--primary-dark);
    color: #ecfdf5;
  }

  body.public-site .course-btn:hover {
    background-color: var(--primary-light);
    color: #0f172a;
  }

  body.public-site {
    --notif-timetable-bg: #0c4a6e;
    --notif-timetable-text: #bae6fd;
    --notif-timetable-icon: linear-gradient(145deg, #0ea5e9 0%, #0369a1 100%);
    --notif-warning-bg: #431407;
    --notif-warning-text: #fed7aa;
    --notif-warning-icon: linear-gradient(145deg, #f97316 0%, #c2410c 100%);
    --notif-announcement-bg: #064e3b;
    --notif-announcement-text: #a7f3d0;
    --notif-announcement-icon: linear-gradient(145deg, #34d399 0%, #047857 100%);
    --notif-info-bg: #312e81;
    --notif-info-text: #c7d2fe;
    --notif-info-icon: linear-gradient(145deg, #818cf8 0%, #4338ca 100%);
    --notif-event-bg: #4c0519;
    --notif-event-text: #fecdd3;
    --notif-event-icon: linear-gradient(145deg, #fb7185 0%, #be123c 100%);
  }

  body.public-site .notification-tag.timetable {
    border-color: rgba(186, 230, 253, 0.2);
  }

  body.public-site .notification-tag.warning {
    border-color: rgba(254, 215, 170, 0.2);
  }

  body.public-site .notification-tag.announcement {
    border-color: rgba(167, 243, 208, 0.2);
  }

  body.public-site .notification-tag.info {
    border-color: rgba(199, 210, 254, 0.2);
  }

  body.public-site .notification-tag.event {
    border-color: rgba(254, 205, 211, 0.2);
  }

  body.public-site .header .nav-link svg,
  body.public-site .header .back-btn svg,
  body.public-site .hero .search-btn svg,
  body.public-site .page-header svg,
  body.public-site .filter-bar .mark-all-btn svg,
  body.public-site .floating-btn svg,
  body.public-site .profile-avatar svg,
  body.public-site .course-meta svg {
    color: var(--on-primary);
    stroke: currentColor;
  }

  body.public-site .notification-icon svg {
    stroke: currentColor;
    fill: none;
  }

  body.public-site .notification-card.unread {
    background: linear-gradient(90deg, #14532d 0%, var(--card) 14%);
  }

  body.public-site .filter-label svg {
    color: #86efac;
    stroke: currentColor;
  }

  body.public-site .lecturer-no-data-icon {
    color: var(--primary-light);
    stroke: currentColor;
  }

  body.public-site .course-header .course-logo svg {
    color: var(--primary-light);
    stroke: currentColor;
  }

  body.public-site .mark-read-btn {
    background-color: var(--card);
    border-color: var(--border);
    color: var(--text);
  }

  body.public-site .mark-read-btn:hover {
    border-color: var(--primary-light);
    background-color: #14532d;
    color: #ecfdf5;
  }

  body.public-site .footer {
    background-color: var(--card);
    border-top: 1px solid var(--border);
  }

  /* Course card body */
  body.public-site .course-body {
    background-color: var(--card);
  }

  body.public-site .course-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  }

html[data-theme="dark"] body.public-site .class-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}