.schedule{
  margin:1rem .5rem;
  background-color: #fff;
  border-radius: .2rem;
  padding: .5rem;
  display: grid;
  width: auto;
  grid-gap: 0;
  overflow: hidden;
  border: 1px solid #dfe3e6;
  justify-self: center;
  grid-template-columns: [time] 100px
    [saturday] minmax(auto, auto) 
    [sunday] minmax(auto, auto);
  grid-template-rows: [header] auto
    [allday1] 40px [allday2] 40px [allday3] 40px [allday4] 40px
    [allday5] 40px [allday6] 40px [allday7] 40px
    [t] 40px [tf] 0px [tt] 40px [ttf] 0px
    [o] 40px [of] 0px [ot] 40px [otf] 0px
    [tw] 40px [twf] 0px [twt] 40px [twtf] 0px
    [th] 40px [thf] 0px [tht] 40px [thtf] 0px
    [f] 40px [ff] 0px [ft] 40px [ftf] 0px
    [fi] 40px [fif] 0px [fit] 40px [fitf] 0px
    [s] 40px [sf] 0px [st] 40px [stf] 0px
    [se] 40px [sef] 0px [set] 40px [setf] 0px
    [e] 40px [ef] 0px [et] 40px [etf] 0px
    [n] 40px [nf] 0px [nt] 40px [ntf] 0px
    [te] 40px [tef] 0px;
}

.schedule_header{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0.5rem 1rem;
  border: 1px solid #dfe3e6;
  color: #17394d;
  text-align: center;
}

.schedule_time{
  position: relative;
  padding: 0.5rem 0.25rem;
  border: 1px solid #dfe3e6;
  color: #17394d;
  font-weight: bold;
  text-align: center;
}

.grid{
  border:1px solid #dfe3e6; 
}

.schedule-item{
  background-color: white;
  border-radius: .25rem;
  padding: .5rem;
  z-index: 10;
  cursor: pointer;
  transition: transform 0.2s ease;
  position: relative;
  box-sizing: border-box;
  border: 2px solid black;
}

.schedule-item:hover {
  transform: scale(1.02);
}

.schedule-saturday { grid-column: saturday / span 1; }
.schedule-sunday { grid-column: sunday / span 1; }

.schedule-row-from-saturday { grid-column: saturday / span 2;}

/* All day events span both columns */
.schedule-allday { grid-column: saturday / span 2; }

/* All day event positioning */
.allday-slot-1 { grid-row: allday1; }
.allday-slot-2 { grid-row: allday2; }
.allday-slot-3 { grid-row: allday3; }
.allday-slot-4 { grid-row: allday4; }
.allday-slot-5 { grid-row: allday5; }
.allday-slot-6 { grid-row: allday6; }
.allday-slot-7 { grid-row: allday7; }

/* Dynamic column spanning for filtered days */
.schedule.saturday-only .schedule-saturday { grid-column: saturday / span 2; }
.schedule.sunday-only .schedule-sunday { grid-column: saturday / span 2; }

/* Time grid positions - visible rows only */
.time-from-t { grid-row-start: t; }
.time-from-tt { grid-row-start: tt; }
.time-from-o { grid-row-start: o; }
.time-from-ot { grid-row-start: ot; }
.time-from-tw { grid-row-start: tw; }
.time-from-twt { grid-row-start: twt; }
.time-from-th { grid-row-start: th; }
.time-from-tht { grid-row-start: tht; }
.time-from-f { grid-row-start: f; }
.time-from-ft { grid-row-start: ft; }
.time-from-fi { grid-row-start: fi; }
.time-from-fit { grid-row-start: fit; }
.time-from-s { grid-row-start: s; }
.time-from-st { grid-row-start: st; }
.time-from-se { grid-row-start: se; }
.time-from-set { grid-row-start: set; }
.time-from-e { grid-row-start: e; }
.time-from-et { grid-row-start: et; }
.time-from-n { grid-row-start: n; }
.time-from-nt { grid-row-start: nt; }
.time-from-te { grid-row-start: te; }

/* Hidden 15-minute increment positions with visual offset */
.time-from-tf { grid-row-start: t; margin-top: 20px; }
.time-from-ttf { grid-row-start: tt; margin-top: 20px; }
.time-from-of { grid-row-start: o; margin-top: 20px; }
.time-from-otf { grid-row-start: ot; margin-top: 20px; }
.time-from-twf { grid-row-start: tw; margin-top: 20px; }
.time-from-twtf { grid-row-start: twt; margin-top: 20px; }
.time-from-thf { grid-row-start: th; margin-top: 20px; }
.time-from-thtf { grid-row-start: tht; margin-top: 20px; }
.time-from-ff { grid-row-start: f; margin-top: 20px; }
.time-from-ftf { grid-row-start: ft; margin-top: 20px; }
.time-from-fif { grid-row-start: fi; margin-top: 20px; }
.time-from-fitf { grid-row-start: fit; margin-top: 20px; }
.time-from-sf { grid-row-start: s; margin-top: 20px; }
.time-from-stf { grid-row-start: st; margin-top: 20px; }
.time-from-sef { grid-row-start: se; margin-top: 20px; }
.time-from-setf { grid-row-start: set; margin-top: 20px; }
.time-from-ef { grid-row-start: e; margin-top: 20px; }
.time-from-etf { grid-row-start: et; margin-top: 20px; }
.time-from-nf { grid-row-start: n; margin-top: 20px; }
.time-from-ntf { grid-row-start: nt; margin-top: 20px; }
.time-from-tef { grid-row-start: te; margin-top: 20px; }

/* End positions */
.time-to-t { grid-row-end: t; }
.time-to-tf { grid-row-end: tf; }
.time-to-tt { grid-row-end: tt; }
.time-to-ttf { grid-row-end: ttf; }
.time-to-o { grid-row-end: o; }
.time-to-of { grid-row-end: of; }
.time-to-ot { grid-row-end: ot; }
.time-to-otf { grid-row-end: otf; }
.time-to-tw { grid-row-end: tw; }
.time-to-twf { grid-row-end: twf; }
.time-to-twt { grid-row-end: twt; }
.time-to-twtf { grid-row-end: twtf; }
.time-to-th { grid-row-end: th; }
.time-to-thf { grid-row-end: thf; }
.time-to-tht { grid-row-end: tht; }
.time-to-thtf { grid-row-end: thtf; }
.time-to-f { grid-row-end: f; }
.time-to-ff { grid-row-end: ff; }
.time-to-ft { grid-row-end: ft; }
.time-to-ftf { grid-row-end: ftf; }
.time-to-fi { grid-row-end: fi; }
.time-to-fif { grid-row-end: fif; }
.time-to-fit { grid-row-end: fit; }
.time-to-fift { grid-row-end: fift; }
.time-to-s { grid-row-end: s; }
.time-to-sf { grid-row-end: sf; }
.time-to-st { grid-row-end: st; }
.time-to-stf { grid-row-end: stf; }
.time-to-se { grid-row-end: se; }
.time-to-sef { grid-row-end: sef; }
.time-to-set { grid-row-end: set; }
.time-to-setf { grid-row-end: setf; }
.time-to-e { grid-row-end: e; }
.time-to-ef { grid-row-end: ef; }
.time-to-et { grid-row-end: et; }
.time-to-etf { grid-row-end: etf; }
.time-to-n { grid-row-end: n; }
.time-to-nf { grid-row-end: nf; }
.time-to-nt { grid-row-end: nt; }
.time-to-ntf { grid-row-end: ntf; }
.time-to-te { grid-row-end: te; }
.time-to-tef { grid-row-end: tef; }

/* Modal styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: none;
  border-radius: 10px;
  width: 80%;
  max-width: 500px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
}

.modal-time {
  font-weight: bold;
  margin: 10px 0;
  color: #666;
}

.modal-location {
  margin: 10px 0;
  color: #666;
}

.modal-description {
  margin: 15px 0;
  line-height: 1.5;
}

.modal-hobby {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 0.9em;
  font-weight: bold;
  margin-top: 10px;
}

.hobby-yellow {
  background: #f7b737;
}

.hobby-orange {
  background: #ff8e16;
}

.hobby-purple {
  background: #b08cff;
}

.hobby-red {
  background: #dd1010;
}

.hobby-blue {
  background: #0dcaf0;
}

.hobby-green {
  background: #22e526;
}

.hobby-black {
  background: #000000;
  color: #ffffff;
}

/* Filter Controls */
.filter-controls {
  margin: 20px 0;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
  border: 1px solid #dfe3e6;
}

.filter-section {
  margin-bottom: 15px;
}

.filter-section:last-child {
  margin-bottom: 0;
}

.filter-label {
  font-weight: bold;
  margin-bottom: 8px;
  color: #17394d;
  text-align: center;
}

.filter-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-btn {
  border: 3.5px solid;
  border-image-slice: 2;
  border-image-width: 2;
  border-image-repeat: stretch;
  border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>');
  border-image-outset: 2;
  position: relative;
  display: inline-block;
  padding: 6px 8px;
  margin: 4px;
  text-align: center;
  vertical-align: middle;
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAzElEQVRYR+2X0Q6AIAhF5f8/2jYXZkwEjNSVvVUjDpcrGgT7FUkI2D9xRfQETwNIiWO85wfINfQUEyxBG2ArsLwC0jioGt5zFcwF4OYDPi/mBYKm4t0U8ATgRm3ThFoAqkhNgWkA0jJLvaOVSs7j3qMnSgXWBMiWPXe94QqMBMBc1VZIvaTu5u5pQewq0EqNZvIEMCmxAawK0DNkay9QmfFNAJUXfgGgUkLaE7j/h8fnASkxHTz0DGIBMCnBeeM7AArpUd3mz2x3C7wADglA8BcWMZhZAAAAAElFTkSuQmCC) 14 0, pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 0.9em;
}

.filter-btn:hover {
  transform: scale(1.05);
}

/* Day filter buttons */
.day-btn {
  border-color: #6c757d;
  color: #6c757d;
}

.day-btn.active {
  background: #6c757d;
  color: white;
}

/* Hobby filter buttons */
.hobby-btn-yellow {
  border-color: #f7b737;
  color: #f7b737;
}

.hobby-btn-yellow.active {
  background: #f7b737;
  color: black;
}

.hobby-btn-orange {
  border-color: #ff8e16;
  color: #ff8e16;
}

.hobby-btn-orange.active {
  background: #ff8e16;
  color: white;
}

.hobby-btn-purple {
  border-color: #b08cff;
  color: #b08cff;
}

.hobby-btn-purple.active {
  background: #b08cff;
  color: white;
}

.hobby-btn-red {
  border-color: #dd1010;
  color: #dd1010;
}

.hobby-btn-red.active {
  background: #dd1010;
  color: white;
}

.hobby-btn-blue {
  border-color: #0dcaf0;
  color: #0dcaf0;
}

.hobby-btn-blue.active {
  background: #0dcaf0;
  color: white;
}

.hobby-btn-green {
  border-color: #22e526;
  color: #22e526;
}

.hobby-btn-green.active {
  background: #22e526;
  color: white;
}

.hobby-btn-black {
  border-color: #000000;
  color: #000000;
}

.hobby-btn-black.active {
  background: #000000;
  color: white;
}

.schedule-item.hidden {
  display: none !important;
}

/* Hide day headers when day is filtered out */
.schedule.saturday-only .schedule_header.schedule-sunday {
  display: none;
}

.schedule.sunday-only .schedule_header.schedule-saturday {
  display: none;
}

/* Hide grid columns when day is filtered out */
.schedule.saturday-only .grid.schedule-sunday {
  display: none;
}

.schedule.sunday-only .grid.schedule-saturday {
  display: none;
}

.ds{
  display: none;
}
@media (max-width: 800px) {
  .dl {
    display:none;
  }

  .ds{
    display: block;
  }
  
  .grid-last{
    height:98px;
  }

  .filter-controls {
    padding: 15px;
  }

  .filter-buttons {
    justify-content: center;
  }

  .filter-btn {
    font-size: 0.8em;
    padding: 5px 10px;
  }
}