:root{
  --bg:#f4f6f9;
  --card:#fff;
  --line:#dfe4ea;
  --text:#20252b;
  --muted:#6d7782;
  --accent:#2463a9;
  --accent-soft:#e9f2fc;
  --today:#fff4d6;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
}
button{font:inherit;cursor:pointer}
.app{
  max-width:1500px;
  margin:0 auto;
  padding:18px;
}
.topbar,.nav{
  display:flex;
  align-items:center;
  gap:12px;
}
.topbar{
  justify-content:space-between;
  margin-bottom:12px;
}
h1{
  margin:0;
  font-size:clamp(21px,3vw,32px);
}
.subtitle{
  color:var(--muted);
  margin-top:5px;
}
.view-switch{
  display:flex;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:9px;
  overflow:hidden;
}
.view-switch button{
  border:0;
  border-right:1px solid var(--line);
  background:transparent;
  padding:9px 14px;
}
.view-switch button:last-child{border-right:0}
.view-switch button.active{
  background:var(--accent);
  color:white;
}
.nav{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px;
  margin-bottom:12px;
}
.nav button{
  border:1px solid var(--line);
  background:white;
  border-radius:7px;
  padding:8px 12px;
}
.icon-btn{font-size:20px;line-height:1}
.spacer{flex:1}

.calendar{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:auto;
  min-height:540px;
}

/* DAY */
.day-view{padding:14px}
.day-head{
  font-weight:700;
  font-size:20px;
  margin-bottom:12px;
}
.day-event{
  border-left:5px solid var(--accent);
  background:var(--accent-soft);
  padding:12px;
  border-radius:7px;
  margin:8px 0;
}
.event-time{font-weight:700}
.event-subject{font-size:18px;font-weight:700;margin-top:3px}
.event-meta{color:var(--muted);margin-top:4px}

/* WEEK */
.week-grid{
  min-width:960px;
  display:grid;
  grid-template-columns:72px repeat(7,1fr);
}
.week-head{
  position:sticky;
  top:0;
  z-index:3;
  background:white;
  border-bottom:1px solid var(--line);
  min-height:60px;
  padding:9px 6px;
  text-align:center;
}
.week-head.today{background:var(--today)}
.time-cell,.week-cell{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  min-height:74px;
}
.time-cell{
  padding:7px;
  color:var(--muted);
  text-align:right;
  font-size:13px;
}
.week-cell{
  padding:4px;
  position:relative;
}
.week-cell.today{background:#fffdf6}
.week-event{
  background:var(--accent-soft);
  border-left:4px solid var(--accent);
  border-radius:5px;
  padding:5px 6px;
  margin:2px 0;
  font-size:13px;
}
.week-event strong{display:block}

/* MONTH */
.month-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(130px,1fr));
  min-width:910px;
}
.month-weekday{
  position:sticky;
  top:0;
  z-index:3;
  background:white;
  font-weight:700;
  text-align:center;
  padding:10px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.month-day{
  min-height:125px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:6px;
}
.month-day.outside{background:#f8f9fb;color:#a2a8b0}
.month-day.today{background:var(--today)}
.day-number{font-weight:700;margin-bottom:4px}
.month-event{
  display:block;
  border:0;
  width:100%;
  text-align:left;
  background:var(--accent-soft);
  border-left:3px solid var(--accent);
  border-radius:4px;
  padding:4px;
  margin:3px 0;
  font-size:12px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.empty{
  padding:35px;
  text-align:center;
  color:var(--muted);
}

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.38);
  display:flex;
  justify-content:center;
  align-items:center;
  padding:18px;
  z-index:20;
}
.modal.hidden{display:none}
.modal-card{
  position:relative;
  background:white;
  border-radius:12px;
  width:min(500px,100%);
  padding:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.close{
  position:absolute;
  right:12px;
  top:10px;
  border:0;
  background:transparent;
  font-size:28px;
}
.modal-card h2{margin:0 32px 12px 0}
.modal-card p{margin:7px 0}

@media(max-width:760px){
  .app{padding:8px}
  .topbar{align-items:flex-start;flex-direction:column}
  .view-switch{width:100%}
  .view-switch button{flex:1}
  .nav{position:sticky;top:0;z-index:8}
  #refreshBtn{font-size:0}
  #refreshBtn::after{content:"↻";font-size:18px}
  .calendar{min-height:500px}
}


/* RÜHMADE TAUSTAVÄRVID */
.day-event.group-1,
.week-event.group-1,
.month-event.group-1{
  background:#c8e6c9;
}
.day-event.group-2,
.week-event.group-2,
.month-event.group-2{
  background:#fff59d;
}

/* PÄEVAVAATE TUNNI TAIMER */
.lesson-timer{
  display:inline-block;
  margin-left:8px;
  padding:3px 7px;
  border-radius:5px;
  font-size:12px;
  font-weight:700;
  vertical-align:middle;
}
.lesson-timer.timer-future{
  background:#c8e6c9;
  color:#1b5e20;
}
.lesson-timer.timer-past{
  background:#ffcdd2;
  color:#b71c1c;
}



/* AKTIIVSE SÜNDMUSE TÄITUVUS – v12 */
.day-event,
.week-event{
  --event-base:#e9f2fc;
  position:relative;
  overflow:hidden;
}

/* Rühm 1 roheline */
.day-event.group-1,
.week-event.group-1{
  --event-base:#c8e6c9;
  background:var(--event-base);
}

/* Rühm 2 kollane */
.day-event.group-2,
.week-event.group-2{
  --event-base:#fff59d;
  background:var(--event-base);
}

/* Muud sündmused sinakad */
.day-event:not(.group-1):not(.group-2),
.week-event:not(.group-1):not(.group-2){
  --event-base:#e9f2fc;
}

/*
  Aktiivse sündmuse taust:
  tumepunane osa = juba kulunud aeg
  algne taust = allesjäänud aeg
*/
.day-event.event-in-progress,
.week-event.event-in-progress{
  background:
    linear-gradient(
      to right,
      #ff0000 0%,
      #ff0000 var(--progress),
      var(--event-base) var(--progress),
      var(--event-base) 100%
    ) !important;
}

/* 0–100% näit */
.day-event.event-in-progress::after,
.week-event.event-in-progress::after{
  content:attr(data-progress);
  position:absolute;
  right:7px;
  top:7px;
  z-index:5;
  padding:3px 6px;
  border-radius:4px;
  background:rgba(70,0,0,.88);
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1.1;
  pointer-events:none;
}

/* Tekst jääb täituvuse peal nähtavaks */
.day-event.event-in-progress > *,
.week-event.event-in-progress > *{
  position:relative;
  z-index:3;
}