:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f5f6f8; color: #1f2430; }

.container { max-width: 1100px; margin: 0 auto; padding: 16px; }
.header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.header h1 { font-size: 20px; margin: 0; }

.btn { padding: 8px 14px; border-radius: 10px; border: 1px solid #d7dbe3; background: #fff; cursor: pointer; font-size: 14px; }
.btn.primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.btn.btn-disabled { opacity: 0.5; cursor: default; pointer-events: none; }
.btn.danger { background: #dc2626; color: #fff; border-color: #dc2626; }

.card { background: #fff; border-radius: 14px; padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

.calHeader { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.calTitle { font-weight: 600; font-size: 16px; }

.calGrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calWeekday { text-align: center; font-size: 12px; color: #6b7280; padding: 4px 0; }
.calCell { min-width: 0; min-height: 84px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 4px; cursor: pointer; background: #fff; }
.calCellEmpty { background: transparent; border: none; cursor: default; }
.calDayNum { font-size: 12px; color: #6b7280; margin-bottom: 4px; }
.calBooking {
  font-size: 11px; background: #eef2ff; color: #3730a3; border-radius: 6px; padding: 2px 4px; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.calMore { font-size: 11px; color: #6b7280; cursor: pointer; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 100; }
.modal-content { background: #fff; border-radius: 14px; padding: 20px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

.errorBanner { color: #dc2626; margin-bottom: 8px; }

/* 100vw/100vhは縦スクロールバー分だけ実際の表示領域より広く計算されるブラウザがあり、
   右端が見切れる原因になるため使わない。position:fixed + inset:0だけで実表示領域に正確に合わせる。*/
#app.app-fullscreen { position: fixed; inset: 0; z-index: 9999; max-width: none; margin: 0; background: #f5f6f8; overflow: auto; }
/* ネイティブのrequestFullscreen()が成功した経路(document.documentElementが全画面化される)では
   JS側でapp-fullscreenクラスを付け忘れても、:fullscreen疑似クラスで確実に#appを実表示領域いっぱいに広げる。
   これが無いと、ブラウザ自体は全画面化されるのに中の#appは元のmax-widthのまま中央寄せで表示され、
   左右に大きな余白が残ったままになる。 */
:fullscreen #app, :-webkit-full-screen #app { position: fixed; inset: 0; z-index: 9999; max-width: none; margin: 0; background: #f5f6f8; overflow: auto; }

.hidden { display: none !important; }

.formGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.formGrid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; min-width: 0; }
.formGrid input, .formGrid select, .formGrid textarea { padding: 8px; border-radius: 8px; border: 1px solid #d7dbe3; font-size: 14px; width: 100%; }

@media (max-width: 480px) {
  .formGrid { grid-template-columns: 1fr; }
  .calGrid { gap: 2px; }
  .calCell { min-height: 64px; }
}