.week-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
.day-col{
  border:1px solid rgba(0,0,0,.1);
  border-radius:12px;
  padding:10px;
  background:#fff;
  min-height: 240px;
}
.slot{
  border-radius:10px;
  padding:8px 10px;
  margin-bottom:8px;
  cursor:pointer;
  border:1px solid rgba(0,0,0,.08);
}
.slot .small{ opacity:.85; }
.bg-orange{ background:#ff9f1c !important; color:#000 !important; }


/* Hourly stacked view improvements */
.week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(180px, 1fr));
  gap: 16px;
}
.day-col {
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 16px;
  padding: 12px;
  background: #fff;
  min-height: 520px;
  max-height: 720px;
  overflow-y: auto;
}
.slot {
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  cursor: pointer;
}
.slot b { font-size: 18px; }
.bg-orange { background-color: #fd7e14 !important; color: #000; }

/* Own reservation is highlighted with light blue on the calendar grid. */
.own-reservation-slot {
  background-color: #cfeeff !important;
  color: #000 !important;
  border-color: #8fd4f5 !important;
}

/* Calendar reservation names: show each reserver on its own line. */
.slot-names {
  margin-top: 4px;
  line-height: 1.25;
}
.slot-names div {
  white-space: normal;
  overflow-wrap: anywhere;
}
.badge-oma-varaus {
  background-color: #cfeeff;
  color: #000;
}