.calendar-view-toggle {
  display: inline-flex;
  gap: 4px;
}

.space-day-timeline {
  --space-day-hour-h: 46px;
  --space-day-head-h: 86px;
  display: grid;
  grid-template-columns: 58px repeat(var(--space-day-cols), minmax(160px, 1fr));
  width: max(100%, calc(58px + var(--space-day-cols) * 160px));
  background: var(--panel);
}

.space-day-axis {
  border-right: 1px solid var(--line);
}

.space-day-axis-head {
  height: var(--space-day-head-h);
  border-bottom: 1px solid var(--line);
}

.space-day-axis span {
  display: block;
  height: var(--space-day-hour-h);
  padding-right: 8px;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  transform: translateY(-7px);
}

.space-day-column {
  border-right: 1px solid var(--line);
  min-width: 0;
}

.space-day-column-head {
  height: var(--space-day-head-h);
  padding: 10px;
  display: grid;
  gap: 3px;
  align-content: start;
  justify-items: start;
  border-bottom: 1px solid var(--line);
}

.space-day-column-head strong {
  font-size: 13px;
}

.space-day-column-head span {
  font-size: 11px;
  color: var(--muted);
}

.space-day-column-body {
  position: relative;
  height: calc(17 * var(--space-day-hour-h));
}

.space-day-hourline {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--line);
  pointer-events: none;
}

.space-day-offhours {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(20, 26, 34, 0.055);
  pointer-events: none;
}

.space-day-chip {
  position: absolute;
  box-sizing: border-box;
  display: grid;
  gap: 2px;
  align-content: start;
  margin-left: 2px;
  padding: 4px 6px;
  border: 0;
  border-left: 3px solid var(--brand);
  border-radius: 6px;
  background: var(--brand-soft);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.25;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
}

.space-day-chip strong {
  color: var(--brand);
  font-size: 10px;
}

.space-day-chip span {
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-day-chip.is-pending {
  border-left-color: var(--warn);
  background: var(--warn-soft);
}

.space-day-chip.is-pending strong {
  color: var(--warn);
}

.space-day-nowline {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 2px solid var(--brand);
  z-index: 2;
  pointer-events: none;
}

.space-day-nowline::before {
  content: "";
  position: absolute;
  left: 0;
  top: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.slot {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  text-align: center;
  background: var(--panel);
}

.slot.busy {
  color: #8a1d1d;
  background: var(--bad-soft);
}

.slot.open {
  color: #155f42;
  background: #ecfbf4;
}

.reservation-list {
  display: grid;
  gap: 10px;
}

.space-bulk-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.space-bulk-actions .check-inline {
  min-height: 34px;
}

.space-select-cell {
  width: 54px;
  text-align: center;
}

.space-select-cell input {
  width: 18px;
  height: 18px;
}

.space-directory,
.available-space-list {
  max-height: 430px;
  overflow: auto;
  padding-right: 4px;
}

.reservation-item {
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
}

.space-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.space-public-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 10px;
}

.space-public-link-row input {
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--ink);
  padding: 9px 10px;
}

.space-public-link-row .ghost {
  white-space: nowrap;
}

.space-settings-form {
  grid-template-columns: minmax(130px, 1.2fr) auto repeat(3, minmax(86px, 0.7fr)) auto;
  align-items: center;
}

.space-finder-panel {
  margin-bottom: 16px;
}

.space-tabs {
  margin-bottom: 16px;
}

.space-tab {
  min-width: 112px;
}

.space-church-form {
  min-width: min(320px, 100%);
  grid-template-columns: minmax(160px, 1fr) auto;
  margin-top: 0;
}

.building-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: min(520px, 100%);
}

.building-tab {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  padding: 7px 10px;
  font-weight: 900;
}

.building-tab.active {
  border-color: rgba(215, 0, 91, 0.45);
  background: var(--brand-soft);
  color: var(--brand);
}

.space-finder-form {
  display: grid;
  grid-template-columns: minmax(170px, 1.3fr) repeat(3, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 6px;
}

.space-finder-search-guide {
  margin: 0 0 12px;
}

.available-space-list {
  display: grid;
  gap: 8px;
}

.available-space-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid #8b949e;
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
}

.available-space-item.open {
  border-left-color: var(--good);
  background: var(--good-soft);
}

.available-space-item.busy {
  background: var(--soft);
}

.available-space-item strong,
.available-space-item span {
  display: block;
}

.available-space-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.space-detail-body {
  display: grid;
  gap: 14px;
  padding: 18px 20px 20px;
}

.space-detail-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-left: 4px solid var(--warn);
  border-radius: 8px;
  background: var(--warn-soft);
  padding: 12px;
}

.space-detail-summary.open {
  border-left-color: var(--good);
  background: var(--good-soft);
}

.space-detail-summary span,
.space-detail-summary p,
.space-detail-day-head span,
.space-detail-reservations span {
  color: var(--muted);
  font-size: 12px;
}

.space-detail-summary p {
  grid-column: 1 / -1;
  margin: 0;
}

.space-detail-summary b {
  color: var(--ink);
}

.space-detail-week {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.space-detail-day {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

.space-detail-day-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}

.space-detail-reservations {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
}

.space-detail-reservations div {
  border-left: 3px solid var(--brand);
  padding-left: 8px;
}

.availability-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.availability-reasons span {
  display: inline-flex;
  margin-top: 0;
  border: 1px solid rgba(201, 42, 42, 0.18);
  border-radius: 999px;
  background: var(--bad-soft);
  color: var(--bad);
  padding: 4px 8px;
  font-weight: 800;
}

.availability-badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.space-calendar-panel {
  display: flex;
  min-height: min(900px, calc(100vh - 150px));
  flex-direction: column;
  margin-top: 16px;
}

.space-manager-panel {
  margin-top: 16px;
}

.reservation-compose,
.space-manager-view {
  align-items: start;
}

.reservation-compose-single {
  display: grid;
  grid-template-columns: minmax(0, 720px);
  margin-top: 16px;
}

.space-manager-grid {
  display: grid;
  gap: 14px;
}

.space-manager-block {
  display: grid;
  gap: 10px;
}

.space-manager-block > strong {
  font-size: 14px;
}

.space-edit-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.space-edit-form .field {
  margin-bottom: 0;
}

.space-edit-form .toolbar {
  align-self: end;
}

.calendar-wrap {
  flex: 1 1 auto;
  height: clamp(540px, calc(100vh - 300px), 920px);
  max-height: none;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.space-calendar {
  width: max(100%, 1114px);
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(190px, 1.15fr) repeat(7, minmax(132px, 1fr));
  background: var(--panel);
}

.fixed-reservation-list {
  display: grid;
  gap: 10px;
}

.fixed-reservation-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

.fixed-reservation-group summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  padding: 12px;
  list-style: none;
}

.fixed-reservation-group summary::-webkit-details-marker {
  display: none;
}

.fixed-reservation-group summary strong,
.fixed-reservation-group summary span {
  display: block;
}

.fixed-reservation-group summary span,
.fixed-reservation-meta {
  color: var(--muted);
  font-size: 12px;
}

.fixed-reservation-meta {
  text-align: right;
}

.fixed-reservation-meta strong {
  color: var(--ink);
  font-size: 14px;
}

.fixed-reservation-detail {
  border-top: 1px solid var(--line);
  padding: 12px;
  background: var(--soft);
}

.fixed-reservation-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.calendar-corner,
.calendar-day,
.calendar-space,
.calendar-cell {
  border-right: 1px solid #edf0f4;
  border-bottom: 1px solid #edf0f4;
}

.calendar-corner,
.calendar-day {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px;
  background: var(--soft);
  font-size: 13px;
  font-weight: 900;
}

.calendar-corner {
  left: 0;
  z-index: 6;
}

.calendar-space {
  position: sticky;
  left: 0;
  z-index: 3;
  min-height: clamp(94px, calc((100vh - 360px) / var(--space-calendar-rows, 1)), 154px);
  padding: 12px;
  background: var(--soft);
}

.calendar-week-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.calendar-week-nav .active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.calendar-week-nav span {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.calendar-filter-form {
  grid-template-columns: minmax(150px, 220px) minmax(240px, auto) auto auto auto auto;
  align-items: center;
  margin-bottom: 12px;
}

.calendar-filter-form input[type="search"] {
  width: min(220px, 100%);
}

.calendar-week-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.calendar-week-summary span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  padding: 6px 10px;
}

.calendar-sort-actions {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
}

.calendar-sort-button {
  min-height: 34px;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 7px 12px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.calendar-sort-button.active {
  background: var(--brand);
  color: #fff;
}

.calendar-space strong,
.calendar-space span {
  display: block;
}

.calendar-space span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.space-utilization {
  display: grid !important;
  gap: 5px;
}

.space-utilization b {
  color: var(--ink);
  font-size: 12px;
}

.space-utilization i {
  display: block;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--soft);
}

.space-utilization em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}

.space-order-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.calendar-cell {
  min-height: clamp(94px, calc((100vh - 360px) / var(--space-calendar-rows, 1)), 154px);
  padding: 8px;
  display: grid;
  align-content: start;
  gap: 6px;
}

.calendar-chip {
  width: 100%;
  border: 1px solid rgba(215, 0, 91, 0.18);
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--ink);
  padding: 8px;
  text-align: left;
}

.calendar-chip strong,
.calendar-chip span {
  display: block;
}

.calendar-chip strong {
  font-size: 12px;
}

.calendar-chip span {
  margin-top: 3px;
  font-size: 12px;
}

.empty-slot {
  color: #a1a9b5;
  font-size: 12px;
}

.calendar-empty-reserve {
  width: 100%;
  min-height: 48px;
  border: 1px dashed #d9dee7;
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  text-align: left;
}

.calendar-empty-reserve:hover {
  border-color: rgba(215, 0, 91, 0.45);
  background: var(--brand-soft);
  color: var(--brand);
}

.calendar-empty-reserve.is-gap {
  border-color: rgba(14, 143, 98, 0.32);
  background: var(--good-soft);
}

.calendar-empty-reserve.is-gap:hover {
  border-color: rgba(14, 143, 98, 0.55);
  color: var(--good);
}

.calendar-empty-reserve strong,
.calendar-empty-reserve span {
  display: block;
}

.calendar-empty-reserve strong {
  color: inherit;
  font-size: 12px;
}

.calendar-empty-reserve span {
  margin-top: 3px;
  font-size: 11px;
}