:root {
  --bg: #f4f4f2;
  --fg: #16181d;
  --muted: #667085;
  --line: #dcdcd8;
  --card: #ffffff;
  --head: #111827;
  --headfg: #ffffff;
  --accent: #2563eb;
  --accent-fg: #ffffff;
  --warn-bg: #fef3c7;
  --warn-fg: #92400e;
  --bad-bg: #fee2e2;
  --bad-fg: #991b1b;
  --move-bg: #dbeafe;
  --move-fg: #1e40af;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101216;
    --fg: #e8e8ea;
    --muted: #9aa1ac;
    --line: #2b2f37;
    --card: #191c22;
    --head: #05070a;
    --headfg: #f3f4f6;
    --accent: #5b9dff;
    --accent-fg: #08111f;
    --warn-bg: #3a2f0b;
    --warn-fg: #fde68a;
    --bad-bg: #3f1414;
    --bad-fg: #fecaca;
    --move-bg: #14284d;
    --move-fg: #bfdbfe;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.app {
  height: 100vh;
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: clamp(6px, 0.9vw, 16px);
  padding: clamp(6px, 0.9vw, 16px);
}
.app[data-state="loading"] .timeline,
.app[data-state="loading"] .now-body { opacity: 0.3; }

/* ---------- LIJEVO ---------- */
.left {
  display: grid;
  grid-template-rows: 80fr 20fr;
  gap: clamp(6px, 0.9vw, 16px);
  min-height: 0;
}

.now-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: clamp(10px, 1.2vw, 20px);
  padding: clamp(12px, 1.8vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, 26px);
  min-height: 0;
  overflow: hidden;
}
.now-photo {
  flex: 1 1 55%;
  min-height: 0;
  border-radius: clamp(8px, 1vw, 16px);
  overflow: hidden;
  background: var(--line);
}
.now-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.now-body { display: flex; flex-direction: column; gap: clamp(2px, 0.7vh, 10px); }
.now-badges { display: flex; flex-wrap: wrap; gap: 0.4em; }
.now-subject {
  font-size: clamp(22px, 3.2vw, 56px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.now-class { font-size: clamp(16px, 1.9vw, 34px); font-weight: 700; }
.now-class strong { color: var(--accent); }
.now-class span { color: var(--muted); font-weight: 600; }
.now-teacher { font-size: clamp(15px, 1.7vw, 30px); color: var(--fg); }
.now-subst { font-size: clamp(12px, 1.05vw, 19px); color: var(--muted); }
.now-card.is-empty { justify-content: center; }
.now-card.is-empty .now-photo { display: none; }
.now-card.is-empty .now-subject { color: var(--muted); font-weight: 700; }

.next-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: clamp(10px, 1.2vw, 20px);
  padding: clamp(10px, 1.4vw, 24px);
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.8vh, 12px);
  min-height: 0;
  overflow: hidden;
}
.next-label {
  font-size: clamp(11px, 1vw, 17px);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.next-subject { font-size: clamp(17px, 2vw, 36px); font-weight: 700; line-height: 1.1; }
.next-meta { display: flex; gap: 1em; font-size: clamp(13px, 1.4vw, 24px); color: var(--muted); }
.next-meta span:first-child { color: var(--accent); font-weight: 700; }

/* ---------- DESNO ---------- */
.right {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: clamp(10px, 1.2vw, 20px);
  overflow: hidden;
}
.right-head {
  background: var(--head);
  color: var(--headfg);
  padding: clamp(10px, 1.4vw, 26px) clamp(14px, 1.8vw, 34px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}
.room-label {
  font-size: clamp(20px, 2.9vw, 54px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.clock { text-align: right; line-height: 1.1; }
.clock-date { font-size: clamp(12px, 1.3vw, 22px); opacity: 0.85; }
.clock-time { font-size: clamp(20px, 2.6vw, 48px); font-weight: 800; font-variant-numeric: tabular-nums; }

.timeline {
  flex: 1;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  min-height: 0;
}
.slot {
  display: grid;
  grid-template-columns: clamp(84px, 11vw, 190px) 1fr;
  align-items: stretch;
  border-top: 1px solid var(--line);
  min-height: 0;
  overflow: hidden;
}
.slot:first-child { border-top: 0; }
.slot-when {
  padding: clamp(4px, 0.8vw, 14px) clamp(6px, 0.9vw, 16px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15em;
  background: color-mix(in srgb, var(--line) 30%, transparent);
}
.slot-tag {
  font-size: clamp(9px, 0.82vw, 13px);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.slot-period { font-size: clamp(16px, 1.9vw, 34px); font-weight: 800; }
.slot-range { font-size: clamp(10px, 1vw, 17px); color: var(--muted); font-variant-numeric: tabular-nums; }
.slot-entries {
  padding: clamp(4px, 0.8vw, 14px) clamp(8px, 1.1vw, 20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2px, 0.5vh, 8px);
  min-width: 0;
}
.entry { min-width: 0; }
.entry + .entry { padding-top: clamp(2px, 0.5vh, 8px); border-top: 1px dashed var(--line); }
.entry-top { display: flex; align-items: baseline; gap: 0.6em; flex-wrap: wrap; }
.entry-subject {
  font-size: clamp(15px, 1.75vw, 32px);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entry-class { font-size: clamp(13px, 1.4vw, 26px); font-weight: 700; color: var(--accent); }
.entry-teacher { font-size: clamp(12px, 1.25vw, 22px); color: var(--muted); }
.entry-subst { font-size: clamp(10px, 0.95vw, 16px); color: var(--muted); }
.entry.is-cancelled .entry-subject { text-decoration: line-through; color: var(--muted); }
.slot-empty { color: var(--muted); font-size: clamp(13px, 1.4vw, 26px); }

.slot.is-current { background: var(--accent); color: var(--accent-fg); }
.slot.is-current .slot-when { background: rgba(0,0,0,0.12); }
.slot.is-current .slot-tag,
.slot.is-current .slot-range,
.slot.is-current .entry-teacher,
.slot.is-current .entry-subst,
.slot.is-current .slot-empty { color: color-mix(in srgb, var(--accent-fg) 78%, transparent); }
.slot.is-current .entry-class { color: var(--accent-fg); }

.badge {
  display: inline-block;
  font-size: clamp(9px, 0.85vw, 14px);
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  white-space: nowrap;
}
.badge.zamjena { background: var(--warn-bg); color: var(--warn-fg); }
.badge.otkazano { background: var(--bad-bg); color: var(--bad-fg); }
.badge.premjesteno { background: var(--move-bg); color: var(--move-fg); }

.right-foot {
  padding: clamp(4px, 0.7vw, 12px) clamp(14px, 1.8vw, 34px);
  border-top: 1px solid var(--line);
  font-size: clamp(10px, 1vw, 16px);
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 1em;
}
.right-foot:empty { display: none; }

.offline {
  position: fixed;
  left: 50%;
  bottom: 1.5vh;
  transform: translateX(-50%);
  background: var(--bad-bg);
  color: var(--bad-fg);
  font-weight: 700;
  font-size: clamp(12px, 1.2vw, 18px);
  padding: 0.5em 1.2em;
  border-radius: 999px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.app.is-stale { outline: 3px solid var(--warn-fg); outline-offset: -3px; }