:root {
  --bg: #fff0f5;
  --frame: #ff5c8a;
  --frame-light: #ffb6d0;
  --panel: #ffffff;
  --panel-alt: #fff5f9;
  --stripe: #ffe4ee;
  --accent: #ff5c8a;
  --accent-soft: #ff8fae;
  --break-bg: #fff1b8;
  --break-text: #b4780a;
  --text: #5b3a4a;
  --text-dim: #a9788c;
  --border: #ffd3e2;
  --today-glow: #ff5c8a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Nunito", "Segoe UI", Roboto, sans-serif;
  height: 100%;
  overflow: hidden;
}

.dashboard {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 18px 22px 10px;
  border: 10px solid var(--frame);
  border-radius: 22px;
  outline: 4px solid var(--frame-light);
  outline-offset: -18px;
}

/* ---------- Header ---------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 12px;
  border-bottom: 3px dashed var(--border);
  margin-bottom: 14px;
  gap: 16px;
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.title {
  font-family: "Baloo 2", "Nunito", sans-serif;
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--accent);
  text-shadow: 1px 1px 0 #fff, 2px 2px 0 rgba(255, 92, 138, 0.15);
}

.title::before {
  content: "🌸 ";
}

.title::after {
  content: " 🐰";
}

.class-tabs {
  display: flex;
  gap: 8px;
}

.class-tab {
  border: 2px solid var(--border);
  background: var(--panel);
  color: var(--text-dim);
  padding: 7px 18px;
  border-radius: 999px;
  font-family: "Baloo 2", sans-serif;
  font-size: clamp(13px, 1.6vw, 17px);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.class-tab:hover {
  border-color: var(--accent-soft);
  color: var(--accent);
}

.class-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 3px 0 var(--frame);
}

.clock-block {
  text-align: right;
}

.clock {
  font-family: "Baloo 2", sans-serif;
  font-size: clamp(26px, 4.2vw, 44px);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.today {
  font-size: clamp(12px, 1.4vw, 16px);
  color: var(--text-dim);
  margin-top: 4px;
  font-weight: 700;
}

/* ---------- Grid jadual mingguan ---------- */
.grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  overflow: hidden;
}

.day-col {
  background: var(--panel);
  border-radius: 16px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border: 2px solid var(--border);
  position: relative;
}

.day-col.is-today {
  background: var(--panel-alt);
  border-color: var(--today-glow);
  box-shadow: 0 0 0 2px var(--frame-light), 0 6px 14px rgba(255, 92, 138, 0.25);
}

.day-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 4px;
}

.day-emoji {
  font-size: clamp(16px, 1.8vw, 20px);
}

.day-col h2 {
  font-family: "Baloo 2", sans-serif;
  font-size: clamp(14px, 1.7vw, 19px);
  margin: 0;
  text-align: center;
  color: var(--accent);
  font-weight: 700;
}

.day-time-range {
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 700;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px dotted var(--border);
}

.period {
  background: var(--stripe);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 7px;
}

.period:nth-child(odd) {
  background: var(--panel-alt);
}

.period .code {
  font-family: "Baloo 2", sans-serif;
  font-size: clamp(13px, 1.5vw, 16px);
  font-weight: 700;
  color: var(--text);
}

.period .expand {
  font-size: clamp(10px, 1vw, 12px);
  color: var(--text-dim);
  margin-top: 2px;
  font-weight: 600;
}

.period.is-break {
  background: var(--break-bg);
  border-color: #f3ce7a;
  text-align: center;
}

.period.is-break .code {
  color: var(--break-text);
  font-size: clamp(11px, 1.2vw, 13px);
}

.period.is-break .code::before {
  content: "🍡 ";
}

.empty-day {
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
  margin-top: 12px;
  font-weight: 700;
}

/* ---------- Notices ---------- */
.notices {
  margin-top: 10px;
  min-height: 20px;
  font-size: 13px;
  color: var(--break-text);
  text-align: center;
  font-weight: 700;
}

.notices span {
  margin: 0 14px;
}

/* ---------- Status bar ---------- */
.status-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-dim);
  padding-top: 8px;
  font-weight: 700;
}

.conn-ok { color: #4caf7d; }
.conn-error { color: #f56c6c; }

/* ---------- Responsif untuk skrin lebih kecil ---------- */
@media (max-width: 900px) {
  .topbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .clock-block {
    text-align: left;
  }
  .grid {
    grid-template-columns: repeat(2, 1fr);
    overflow-y: auto;
  }
}

/* ---------- Mobile (telefon): satu lajur, satu scroll ----------
   Di desktop/tablet setiap kad hari ada scroll dalaman sendiri (sesuai
   untuk paparan wall-display bersaiz tetap). Di telefon, nested scroll
   macam ni fiddly kat touchscreen - jari senang tersalah scroll kad
   kecil tu berbanding page. Jadi kat skrin sempit, buang semua overflow
   dalaman dan biar SATU scroll semulajadi untuk seluruh page, dengan
   hari disusun menegak satu lajur. min-height guna 100dvh (dengan 100vh
   sebagai fallback automatik untuk browser lama) supaya address bar
   mobile yang timbul/hilang tak potong kandungan di bawah. */
@media (max-width: 600px) {
  html, body {
    overflow: auto;
    height: auto;
  }
  .dashboard {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .grid {
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .day-col {
    overflow-y: visible;
  }
}