/* okuchi2 プロジェクト用スタイル（共通にしたいと言わない限りここに記述） */

/* カレンダーツールバーボタンの横幅を少し大きく */
#calendar .fc-toolbar-chunk .fc-button { min-width: 3.2em; padding-left: 0.8em; padding-right: 0.8em; }
/* ツールバータイトルを h5 相当のサイズに（FullCalendar デフォルト 1.75em を上書き） */
#calendar .fc-toolbar-title { font-size: 1.3rem; margin: 0; }
/* 時間軸ラベル（07:00, 08:00…）フォントサイズ調整用 .fc-slot-label-font */
#calendar .fc-timegrid-slot-label-cushion.fc-slot-label-font { font-size: 0.875rem; }
/* 日付ヘッダー（週表示）: 上段＝ルート（車アイコン）、下段＝日付。日付クリックで日の表示に切り替え */
#calendar .fc-day-header-route-row { text-align: center; margin-bottom: 0.2em; }
#calendar .fc-day-header-row { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; }
#calendar .fc-col-header-cell { cursor: pointer; }
#calendar .fc-day-header-date { font-size: 1.0em; }
#calendar .fc-day-header-route { font-size: 1em; cursor: pointer; color: #3788d8; }
/* 日表示: ツールバータイトル＝上段ルートリンク、下段日付 */
#calendar .fc-toolbar-title-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.25em; }
#calendar .fc-toolbar-title-route-row { line-height: 1; }
#calendar .fc-toolbar-title-date { font-size: inherit; }
/* FullCalendar の標準タイトルは使わない（datesSet で自前の .appoint-toolbar-title を制御） */
#calendar .fc-toolbar .fc-toolbar-title:not(.appoint-toolbar-title) { display: none !important; }
#calendar .appoint-toolbar-title { font-size: 1.3rem; margin: 0; }
#calendar .appoint-toolbar-title.appoint-week-title-clickable { cursor: pointer; }
/* 日表示: 標準prev/next/todayを隠し、前日・翌日・本日（ページ遷移）を表示 */
.fc-timeGridAppointDay-view .fc-toolbar-chunk .fc-prev-button,
.fc-timeGridAppointDay-view .fc-toolbar-chunk .fc-next-button,
.fc-timeGridAppointDay-view .fc-toolbar-chunk .fc-today-button,
.fc-timegridappointday-view .fc-toolbar-chunk .fc-prev-button,
.fc-timegridappointday-view .fc-toolbar-chunk .fc-next-button,
.fc-timegridappointday-view .fc-toolbar-chunk .fc-today-button { display: none !important; }
.fc:not(.fc-timeGridAppointDay-view):not(.fc-timegridappointday-view) .fc-appointDayPrev-button,
.fc:not(.fc-timeGridAppointDay-view):not(.fc-timegridappointday-view) .fc-appointDayNext-button,
.fc:not(.fc-timeGridAppointDay-view):not(.fc-timegridappointday-view) .fc-appointDayToday-button { display: none !important; }
/* キャンセル済み（apo_cancel_flg=1）: グレー背景＋枠を少し濃いグレー（斜線は高さずれのため不使用） */
#calendar .fc-event.fc-appoint-cancelled { background-color: #9e9e9e !important; border-color: #616161 !important; }
/* 予定帯の車アイコン（住所がある利用者のみ） */
#calendar .fc-event-main { position: relative; }
#calendar .fc-event-route { position: absolute; top: 2px; right: 4px; font-size: 0.75rem; color: rgba(255,255,255,0.95); cursor: pointer; text-decoration: none; z-index: 1; }
#calendar .fc-event-route:hover { color: #fff; }
/*
#calendar .fc-event.fc-appoint-cancelled::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(0,0,0,0.4) calc(50% - 1px), rgba(0,0,0,0.4) calc(50% + 1px), transparent calc(50% + 1px));
  pointer-events: none;
}
*/
/* 日表示: 15分枠の高さを確保（キャンセル列含むドラッグ時に見切れないように） */
#calendar.fc-appoint-day-view .fc-timegrid-slot { min-height: 24px; }
#calendar.fc-appoint-day-view .fc-timegrid-slot-lane { min-height: 24px; }/* スマホ: 日付を上、その下に全ボタンを1行で表示 */
@media (max-width: 768px) {
  #calendar .fc-toolbar {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  #calendar .fc-toolbar-chunk:nth-child(1) {
    grid-row: 2;
    grid-column: 1;
    justify-self: start;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
  }
  #calendar .fc-toolbar-chunk:nth-child(2) {
    grid-row: 1;
    grid-column: 1 / -1;
    text-align: center;
  }
  #calendar .fc-toolbar-chunk:nth-child(3) {
    grid-row: 2;
    grid-column: 2;
    justify-self: end;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
  }
  /* テーブル日付ヘッダー（週表示）: 1行目＝車リンク、2行目＝日付・曜日 */
  #calendar .fc-day-header-route-row { margin-bottom: 0.15em; }
  #calendar .fc-day-header-row { justify-content: center; text-align: center; }
}
/* アポモーダル（予定クリック時の詳細・div オーバーレイ） */
.appoint-dialog-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; }
.appoint-dialog-modal { border-radius: 8px; padding: 0; border: 1px solid #e0e0e0; box-shadow: 0 4px 16px rgba(0,0,0,0.12); max-width: 90vw; background: #fff; }
.appoint-dialog-modal .max { padding: 1rem 1.25rem; }
.appoint-dialog-header { padding-bottom: 0.75rem; border-bottom: 1px solid #eee; margin-bottom: 1rem; }
.appoint-dialog-title { font-size: 1.1rem; font-weight: 600; color: #333; }
.appoint-dialog-date { font-size: 0.9rem; color: #666; margin-top: 0.25rem; }
.appoint-dialog-body { margin-bottom: 1.25rem; }
.appoint-dialog-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.25rem; align-items: start; }
.appoint-dialog-dl dt { margin: 0; font-size: 0.85rem; color: #666; font-weight: 500; }
.appoint-dialog-dl dd { margin: 0; font-size: 0.95rem; color: #333; }
.appoint-dialog-dl dd.appoint-dialog-comment { white-space: pre-wrap; word-break: break-word; }
.appoint-dialog-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.appoint-dialog-btn { display: inline-block; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.9rem; text-decoration: none; text-align: center; }
.appoint-dialog-btn-close { background: #f5f5f5; color: #555; border: 1px solid #ddd; }
.appoint-dialog-btn-primary { background: #3788d8; color: #fff; border: 1px solid #2a6bb5; }
.appoint-dialog-btn:not(.appoint-dialog-btn-close):not(.appoint-dialog-btn-primary) { background: #fff; color: #3788d8; border: 1px solid #3788d8; }
.appoint-dialog-btn:hover { opacity: 0.9; }

/* 週表示: 日付選択モーダル（Flatpickr inline） */
.week-date-picker-modal {
  background: #fff;
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
  min-width: 280px;
}
.week-date-picker-title {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}
.week-date-picker-calendar {
  margin-bottom: 1rem;
}
.week-date-picker-calendar input {
  display: none;
}
.week-date-picker-calendar .flatpickr-calendar {
  box-shadow: none;
  margin: 0 auto;
}
.week-date-picker-calendar .flatpickr-day.selected {
  background: #3788d8;
  border-color: #3788d8;
}
.week-date-picker-calendar .flatpickr-day:hover {
  background: rgba(55,136,216,0.2);
  border-color: rgba(55,136,216,0.3);
}
.week-date-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* 治療記録（user_karte_top） */
.karte-chiryo-table td[id^="karteCol"] { cursor: pointer; }
.karte-chiryo-table td { border: 1px solid var(--outline); }
.karte-chiryo-table td.tooth-cell-selected { background: rgba(33, 150, 243, 0.35) !important; }
.karte-chiryo-list-item { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--field); cursor: pointer; }
.karte-chiryo-list-item:last-child { border-bottom: none; }
.karte-chiryo-list-item:hover { background: var(--surface-variant); }
.karte-chiryo-list-item.editing { background: rgba(255, 165, 0, 0.15) !important; }
#karteChiryoListContainer { max-height: 300px; overflow-y: auto; }
/* 日報入力（#top）の入力枠の背景色 white */
#top .border-a { background-color: #fff; }
#top .field input,
#top .field textarea,
#top .field select,
#top #karteChiryoNote { background-color: #fff !important; }
/* 会社編集：管理者メールアドレス・パスワードの背景を白に（BeerCSS・autofill 対策） */
#mst-company-edit .field.border.small input[type="email"],
#mst-company-edit .field.border.small input[type="password"] {
  background: #fff !important;
  background-color: #fff !important;
}
#mst-company-edit .field.border.small input[type="email"]:-webkit-autofill,
#mst-company-edit .field.border.small input[type="email"]:-webkit-autofill:hover,
#mst-company-edit .field.border.small input[type="email"]:-webkit-autofill:focus,
#mst-company-edit .field.border.small input[type="password"]:-webkit-autofill,
#mst-company-edit .field.border.small input[type="password"]:-webkit-autofill:hover,
#mst-company-edit .field.border.small input[type="password"]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
}

/* 患者基本情報：タブ幅いっぱいに広げる（保険証タブの横まで） */
#page1.page.padding {
  padding-inline: 0;
}
/* 生年月日：元号・年・月・日を幅いっぱいに均等配置 */
.row.flex-fill > * {
  flex: 1;
  min-width: 0;
}
/* 患者基本情報：写真エリア（左｜本人情報右） */
.photo-main-wrap {
  position: relative;
  background: #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-main-img {
  max-width: 100%;
  max-height: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  cursor: pointer;
}
.photo-del-x {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  opacity: 0.7;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 0.75rem;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.photo-del-x:hover {
  opacity: 1;
}
.photo-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
}
.photo-arrow:hover {
  opacity: 1;
}
.photo-arrow-prev { left: 8px; }
.photo-arrow-next { right: 8px; }
.photo-thumb-strip {
  overflow: hidden;
  padding: 8px 4px;
  margin-top: 8px;
}
.photo-thumb-inner {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 4px;
  -webkit-overflow-scrolling: touch;
}
.photo-thumb-inner::-webkit-scrollbar {
  height: 4px;
}
.photo-thumb-item {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  scroll-snap-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.photo-thumb-item.active {
  border-color: var(--primary, #0066cc);
}
.photo-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 出力帳票アコーディオン：summary=横長の帯、開いたときに枠 */
.accordion-report summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: var(--surface-container, #f5f5f5);
  border: 1px solid var(--outline-variant, #e0e0e0);
  border-radius: 4px;
  cursor: pointer;
}
.accordion-report[open] {
  border: 1px solid var(--outline-variant, #e0e0e0);
  border-radius: 4px;
  overflow: hidden;
}
.accordion-report[open] summary {
  border-radius: 4px 4px 0 0;
  border-bottom: 1px solid var(--outline-variant, #e0e0e0);
}
.accordion-report[open] > div {
  border-radius: 0 0 4px 4px;
  background-color: #fff;
}

/* 注意事項 textarea：右上に三点メニュー（選択モーダル用）・他 field textarea と同一見た目 */
.field.textarea .caution-textarea-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 2.5rem;
  display: block;
}
.field.textarea .caution-textarea-wrap textarea {
  width: 100%;
  min-height: 2.5rem;
  box-sizing: border-box;
  resize: none;
  border: 0.0625rem solid var(--outline, rgba(0, 0, 0, 0.38));
  border-radius: 0.25rem;
  padding: 0.5rem 0.9375rem;
  padding-inline-end: 2.25rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  background: none;
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  cursor: text;
  color: inherit;
}
.field.textarea.border .caution-textarea-wrap textarea:focus {
  border-color: var(--primary, #1976d2);
  border-width: 0.125rem;
  padding-inline-end: 2.1875rem;
}
.field.textarea .caution-textarea-wrap .btn-caution-menu {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.06);
  color: #666;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
}
.field.textarea .caution-textarea-wrap .btn-caution-menu:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #333;
}

/* アラート選択モーダル：幅を最大に */
#modal_select_caution {
  min-inline-size: min(90vw, 48rem);
  inline-size: min(90vw, 48rem);
}

/* 保険5列：sでは縦積み、m以上で横5列（20%ずつ） */
.row-5-cols .col-5th { width: 100%; }
@media (min-width: 960px) {
  .row-5-cols { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .row-5-cols .col-5th { flex: 0 0 calc(20% - 0.4rem); min-width: 0; }
}

nav.bottom {
  padding-block-start: 10px;
  block-size: auto;
  padding-block-end: 0.5rem;
  min-block-size: auto;
}

/* ファイルアップロード（ドロップ・プログレス）共通 */
.drop-overlay-wrap { position: relative; }
.drop-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--primary, #1976d2); border-radius: var(--radius, 0.25rem); background: var(--surface-variant, #f5f5f5); color: var(--primary, #1976d2); font-size: 0.875rem; z-index: 1; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.drop-overlay.is-visible { opacity: 1; pointer-events: auto; }
.upload-progress-wrap { padding: 0.75rem 1rem; }
.upload-progress-percent { text-align: right; font-size: 0.875rem; margin-bottom: 0.35rem; color: var(--on-surface-variant, #666); }
.upload-progress-track { width: 100%; height: 8px; background: var(--field, #e0e0e0); border-radius: 1rem; overflow: hidden; }
.upload-progress-fill { height: 100%; width: 0%; background: var(--primary, #1976d2); border-radius: 1rem; transition: width 0.1s; }