:root{
  --hour-width: 64px;
  --start-hour: 6;
  --end-hour: 22;
  --facility-col-width: 100px;
  --row-height: 64px;
  --cell-gap:6px;
  --grid-line-color: rgba(33,37,41,0.12);
  --grid-half-color: rgba(33,37,41,0.06);
}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans JP",sans-serif;background:#f8f9fa;}
.toolbar{margin-bottom:12px;}
.calendar-frame{border:1px solid #e9ecef;border-radius:.5rem;background:#fff; overflow:hidden;}
.scroll-wrap{overflow:auto; width:100%;}
.header-row{display:flex; align-items:stretch; position:sticky; top:0; z-index:6;  border-bottom:1px solid #556575ff;}
.facility-col-head{width:var(--facility-col-width); min-width:var(--facility-col-width); padding:.6rem .75rem; border-right:2px solid #e9ecef; background:#fafafa; font-weight:600;}
/* Day/Week timeline */
.days-wrapper{display:flex; flex-direction:column; width:100%;}
.days-header{display:flex; align-items:stretch; border-bottom:1px solid #f1f1f1;}
.day-block{display:flex; flex-direction:column; min-width:calc((var(--end-hour)-var(--start-hour))*var(--hour-width)); border-right:1px solid #f1f1f1;}
.day-block-cell{display:flex; flex-direction:row; min-width:calc((var(--end-hour)-var(--start-hour))*var(--hour-width)); border-right:1px solid #f1f1f1;}
.scroll-inner {display: block;min-width: 100%;width: max-content; /* 中身に合わせて広がる */}
.day-block > * { position:relative; z-index:2; }
.day-label{padding:.5rem .6rem; text-align:center; background:#f8f9fa; border-bottom:1px solid #eeeeeeab; font-weight:600;}
.hours-row{display:flex; align-items:stretch;}
.hour-cell{width:var(--hour-width); min-width:var(--hour-width); text-align:center; padding:.35rem .25rem; border-right:1px solid #f6f6f6a4; color:#343a40; font-weight:600; opacity:0.9;  font-size:.85rem;}
.hour-cell{ color:white; font-weight:600; opacity:0.9; background:#92a4b6ff;}

.half-hour-cell {
flex: 1;
height: 100%;
border-right: 1px solid #eee;
transition: background-color 0.2s ease;
}
  .half-hour-cell:hover {
background-color: #90dbe0ff;
cursor: pointer;
}
.facility-row{display:flex; align-items:center; border-bottom:2px solid #c0d0e2ff; min-height:var(--row-height); height:var(--row-height);}
.facility-row:nth-child(odd) {background-color: #ffffff; /* 薄いグレー */}
.facility-row:nth-child(even) {background-color: #e9e9e9; /* 白 */}
.facility-name{
  width:var(--facility-col-width); min-width:var(--facility-col-width); 
  padding:.5rem .75rem; border-right:1px solid #c1d5dfff; background:#d8e0e4ff; font-weight:600;
  position: sticky; left: 0; z-index: 21; height: 100%;}
.timeline{flex:1; position:relative; height:100%; overflow:visible; display:flex;}
.hour-line{position:absolute; top:0; bottom:0; width:1px; background: #c1d5dfff;}
.half-hour-line{position:absolute; top:0; bottom:0; width:1px; background:rgba(0,0,0,0.02);}
.reservation{z-index:20; position:absolute; top:6px; height:calc(100% - 12px); border-radius:6px; padding:.35rem .5rem; color:#fff; font-size:.85rem; box-shadow:0 1px 3px rgba(0,0,0,0.08); cursor:pointer; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.reservation .time{display:block; font-size:.78rem; opacity:0.95;}
.res-confirmed{background:#198754;}
.res-tentative{background:#ffc107; color:#212529;}
.res-wait{background:#0dcaf0; color:#212529;}
.res-cancel{background:#6c757d;}
/* Month calendar */
.month-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; padding:8px; background:#fff;}
.month-day{min-height:84px; border:1px solid #e9ecef; border-radius:6px; padding:6px; background:#fff; position:relative; overflow:hidden;}
.month-day .date-label{position:absolute; top:6px; right:8px; font-weight:600; color:#495057; font-size:.85rem;}
.month-day .events{margin-top:22px; display:flex; flex-direction:column; gap:4px; max-height:calc(100% - 28px); overflow:hidden;}
.month-event{cursor: default;display:block; padding:4px 6px; border-radius:4px; color:#fff; font-size:0.78rem; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.month-empty{opacity:0.35;}

.drag-highlight {
background-color: rgba(0, 123, 255, 0.2); /* 薄い青色 */
}
@media (max-width: 1000px) {
    .modal-dialog {
      max-width: 90%;
      margin-right: auto;
      margin-left: auto;
  }
}

@media (max-width:767.98px){
  :root{--facility-col-width:90px; --row-height:54px; --bs-modal-width:90%;}
  .facility-name{font-size:.95rem;}
  .month-day{min-height:72px;}
}