/**
 * synapse-calendar.css
 * FullCalendar Display Widget for HCL Domino Leap
 * Version: 1.7.0
 */

 /* パレット上のアイコン(任意のアイコンフォント/画像に差し替え可) */
.efCalendarIcon::before {
  content: url("efCalendar.svg");
  display: inline-block;
  width: 18px;
  height: 18px;
}

/* ─────────────────────────────────────────────────────────
 * ウィジェットの domNode（FullCalendar が直接マウントされる要素）
 * Leap 側の高さ設定（%指定）を最大限活かすため、
 * 親要素からの高さ継承チェーンを途切れさせない。
 * ───────────────────────────────────────────────────────── */
.ef-synapse-calendar-widget {
  width: 100%;
  height: auto;            /* 通常モードは内容量に応じた自然な高さ（親への依存なし） */
  box-sizing: border-box;
  font-family: inherit;
  position: relative;
}

/* ─────────────────────────────────────────────────────────
 * 全画面モード
 * ウィジェット単体でビューポート全体を覆う（他の要素より前面に表示）
 * ───────────────────────────────────────────────────────── */
.ef-synapse-calendar-fullscreen {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  min-height: 0;
  z-index: 9999;
  background: #fff;
  display: flex;
  flex-direction: column;
}

/* ヘッダーバー（左：カレンダー名／右：新規作成ボタン＋ユーザー名） */
.ef-synapse-calendar-fullscreen .sc-header-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid #e0e0e0;
  box-sizing: border-box;
}

.ef-synapse-calendar-fullscreen .sc-calendar-title {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ef-synapse-calendar-fullscreen .sc-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.ef-synapse-calendar-fullscreen .sc-new-button {
  padding: 6px 16px;
  border: none;
  border-radius: 4px;
  background: #2196f3;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

.ef-synapse-calendar-fullscreen .sc-new-button:hover {
  background: #1976d2;
}

.ef-synapse-calendar-fullscreen .sc-user-name {
  font-size: 13px;
  color: #555;
  white-space: nowrap;
}

/* カレンダー本体のマウント先（ヘッダーバーの残り全部を占有） */
.ef-synapse-calendar-fullscreen .sc-calendar-mount {
  flex: 1 1 auto;
  min-height: 0;   /* flexアイテム内で子要素の height:100% を正しく機能させるため */
  padding: 8px;
  box-sizing: border-box;
}


/* デザイン時のプレースホルダー */
.ef-synapse-calendar-widget .sc-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: #888;
  font-size: 14px;
  border: 1px dashed #ccc;
  border-radius: 4px;
}

/* 読み込み中表示 */
.ef-synapse-calendar-widget .sc-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: #888;
  font-size: 14px;
}

/* エラー表示 */
.ef-synapse-calendar-widget .sc-error {
  padding: 12px;
  color: #c62828;
  background: #ffebee;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────
 * ツールチップ（イベントホバー/タップ時に表示）
 * ───────────────────────────────────────────────────────── */
.sc-tooltip {
  position: absolute;
  z-index: 10000;
  padding: 7px 11px;
  background: #333;
  color: #fff;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.6;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.sc-tooltip b {
  font-weight: bold;
}


 * ───────────────────────────────────────────────────────── */
.ef-synapse-calendar-widget .fc {
  font-size: 13px;
}

.ef-synapse-calendar-widget .fc-toolbar-title {
  font-size: 1.1em;
  font-weight: bold;
}

/* ─────────────────────────────────────────────────────────
 * 全画面モードのみ：.fc をマウント先いっぱいに広げる。
 * （通常モードは FullCalendar の height:"auto" に任せ、
 *   内容量に応じた自然な高さでスクロール無しに表示させるため、
 *   ここでは高さを強制しない）
 * ───────────────────────────────────────────────────────── */
.ef-synapse-calendar-fullscreen .fc {
  height: 100%;
}

.ef-synapse-calendar-fullscreen .fc-daygrid-body,
.ef-synapse-calendar-fullscreen .fc-scrollgrid-sync-table {
  height: 100% !important;
}

/* モバイル対応 */
@media (max-width: 600px) {
  .ef-synapse-calendar-widget {
    min-height: 320px;
  }

  /* 文字サイズを最優先で大きく確保する。
     月表示では1セルの面積が小さいため、はみ出す分は
     月表示全体の縦スクロールで吸収する（下の fc-daygrid-body 設定を参照）。 */
  .ef-synapse-calendar-widget .fc {
    font-size: 18px;
  }

  .ef-synapse-calendar-widget .fc-toolbar-title {
    font-size: 1.1em;
  }

  .ef-synapse-calendar-widget .fc-button {
    font-size: 16px;
    padding: 8px 12px;
  }

  /* 月表示：日付番号・イベントタイトルの可読性確保 */
  .ef-synapse-calendar-widget .fc-daygrid-day-number {
    font-size: 17px;
    padding: 4px 6px;
  }

  .ef-synapse-calendar-widget .fc-event,
  .ef-synapse-calendar-widget .fc-event-title,
  .ef-synapse-calendar-widget .fc-event-time {
    font-size: 16px;
    line-height: 1.4;
  }

  .ef-synapse-calendar-widget .fc-event {
    padding: 2px 4px;
  }

  /* 週表示・日表示：時間軸ラベル */
  .ef-synapse-calendar-widget .fc-timegrid-slot-label,
  .ef-synapse-calendar-widget .fc-timegrid-axis {
    font-size: 16px;
  }

  /* 曜日ヘッダー */
  .ef-synapse-calendar-widget .fc-col-header-cell-cushion {
    font-size: 16px;
    padding: 4px;
  }

  /* 月表示の各週の最低高さを確保し、文字が拡大されても潰れないようにする。
     全体は domNode 側で縦スクロールするため、ここで高さを固定値ではなく
     min-height で底上げするだけに留める。 */
  .ef-synapse-calendar-widget .fc-daygrid-day-frame {
    min-height: 64px;
  }

  .ef-synapse-calendar-widget .fc-toolbar {
    flex-wrap: wrap;
    gap: 6px;
  }

  .ef-synapse-calendar-widget .fc-toolbar-chunk {
    display: flex;
    justify-content: center;
  }

  .ef-synapse-calendar-fullscreen .sc-header-bar {
    padding: 8px 10px;
  }

  .ef-synapse-calendar-fullscreen .sc-calendar-title {
    font-size: 18px;
  }

  .ef-synapse-calendar-fullscreen .sc-new-button {
    font-size: 16px;
    padding: 9px 16px;
  }

  .ef-synapse-calendar-fullscreen .sc-user-name {
    font-size: 16px;
  }

  /* 全画面モード・月表示時：マウント先を縦スクロール可能にする。
     これがないと、各週の min-height 確保分が画面からあふれて
     下部が見切れてしまう。 */
  .ef-synapse-calendar-fullscreen .sc-calendar-mount {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ef-synapse-calendar-fullscreen .fc-daygrid-body,
  .ef-synapse-calendar-fullscreen .fc-scrollgrid-sync-table {
    height: auto !important;   /* モバイル月表示では強制100%指定を解除し、自然な高さで積み上げる */
  }
}

/* さらに小さい画面（縦持ちスマホの狭幅機種など） */
@media (max-width: 400px) {
  .ef-synapse-calendar-fullscreen .sc-user-name {
    display: none;   /* 横幅不足時はユーザー名を省略し、ボタン・タイトルを優先 */
  }
}