/* Schedule page-only styles */

.schedule-wrap{ padding: 20px 0 34px 0; }

.schedule-controls{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  padding: 18px;
  margin-top: 18px;
}

.schedule-title h2{ margin:0 0 6px 0; font-size:26px; text-transform:uppercase; letter-spacing:.4px; }
.schedule-title p{ margin:0 0 12px 0; color: rgba(18,32,51,.74); font-weight:700; }

.filters{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1.2fr 220px;
  gap:12px;
  align-items:end;
}

.field--toggle .toggle-row{ display:flex; align-items:center; gap:10px; }
.field--toggle input{ width:18px; height:18px; }
.field--toggle .muted{ margin-top:6px; color: rgba(18,32,51,.70); font-weight:700; font-size:12px; }

.schedule-list{ margin-top: 14px; display:flex; flex-direction:column; gap:12px; }

.class-row{
  display:grid;
  grid-template-columns: 110px 1fr 220px;
  gap: 12px;
  align-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.72));
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
}

.class-date{
  border-right:1px solid rgba(0,0,0,.10);
  padding-right: 12px;
}
.class-day{ font-weight:1000; letter-spacing:.3px; font-size:15px; }
.class-time{ color: rgba(18,32,51,.72); font-weight:800; margin-top:4px; font-size:12px; }

.class-main .title{ font-weight:1000; font-size:16px; margin:0; }
.class-main .meta{ margin-top:4px; color: rgba(18,32,51,.72); font-weight:800; font-size:12px; display:flex; gap:10px; flex-wrap:wrap; }

.badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(11,35,66,.10);
  border: 1px solid rgba(11,35,66,.18);
  font-weight:900;
  font-size:11px;
  letter-spacing:.3px;
  text-transform:uppercase;
}
.badge--full{
  background: rgba(139,27,27,.10);
  border-color: rgba(139,27,27,.22);
}

.seats{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.seats .count{
  font-weight:1000;
  color: rgba(18,32,51,.78);
}

.seats .count strong{ color: var(--red); }
.seats .count.full strong{ color: var(--red); }

.row-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.row-actions .btn{ padding:10px 12px; border-radius:12px; font-weight:900; }

.class-row.is-past{
  opacity:.55;
  filter: grayscale(.1);
}
.class-row.is-past .row-actions{ display:none; }

.schedule-empty{ margin-top: 14px; }
.empty-card{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
  text-align:center;
}

/* Modal */
.modal{ position:fixed; inset:0; display:none; z-index:50; }
.modal.is-open{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
.modal-card{
  position:relative;
  max-width: 720px;
  margin: 8vh auto;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 16px;
}
.modal-head{ display:flex; justify-content:space-between; gap:14px; }
.modal-kicker{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(139,27,27,.10);
  border: 1px solid rgba(139,27,27,.22);
  font-weight:1000;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.modal-title{ margin:8px 0 6px 0; }
.modal-sub{ margin:0; color: rgba(18,32,51,.74); font-weight:800; }
.modal-x{
  background: transparent;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  width: 42px;
  height: 42px;
  font-size: 22px;
  cursor:pointer;
}
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top: 12px; flex-wrap:wrap; }
.form-msg{ margin-top: 10px; font-weight:900; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

@media (max-width: 1100px){
  .filters{ grid-template-columns: 1fr 1fr; }
  .field--btn{ grid-column: 1 / -1; }
  .class-row{ grid-template-columns: 110px 1fr; }
  .row-actions{ grid-column: 1 / -1; justify-content:flex-start; }
  .seats{ justify-content:flex-start; }
  .form-grid{ grid-template-columns:1fr; }
}