@tailwind base;
@tailwind components;
@tailwind utilities;

/* FullCalendar: ツールバー（タイトル・前後移動・今日・月/週/日切替）をスクロールしても画面上部に固定する */
.fc .fc-header-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  margin-bottom: 0 !important;
  padding: 0.5rem 0 0.75rem;
}

/* 曜日・日付ヘッダーはツールバーの直下に固定する。
   FullCalendar本体がJSで注入する
   「.fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky>*{top:0}」の方が
   詳細度が高く top:0（ツールバーの裏に隠れる位置）で固定されてしまうため !important で上書きする。
   --fc-toolbar-h 等の CSS 変数は schedule_controller.js が実高を測って更新する */
.fc .fc-scrollgrid-section-header > * {
  position: sticky;
  top: var(--fc-toolbar-h, 56px) !important;
  z-index: 4;
  background: var(--fc-page-bg-color, #fff);
}

/* スマホ幅: ツールバーを「前後・今日｜タイトル｜月/週/日」の1行に収める。
   タイトルは折り返し禁止で縮小し、ボタンは小さくする（既定のままだとタイトルが
   「2026年/7月」に折れ、あふれた「今日」ボタンが2行目に落ちて表示が崩れる）。
   FullCalendarがJSで注入するCSSより後に読まれても勝てるよう、セレクタの詳細度を上げている */
@media (max-width: 639px) {
  .fc .fc-header-toolbar {
    gap: 0.25rem;
    padding: 0.5rem 0;
  }
  .fc .fc-header-toolbar .fc-toolbar-chunk {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }
  .fc .fc-header-toolbar .fc-toolbar-title {
    font-size: 1.05rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .fc .fc-header-toolbar .fc-button {
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
  }
  .fc .fc-header-toolbar .fc-button .fc-icon {
    font-size: 1.1em;
    vertical-align: middle;
  }
  /* ボタン間の既定余白（.75em）を詰める */
  .fc .fc-header-toolbar .fc-toolbar-chunk > :not(:first-child) {
    margin-left: 0.375rem;
  }
}

/* 週・日表示は「終日行と時間軸（8:00）の境界線」までを固定領域にする:
   終日行（all-day）とその下の区切り線にも sticky を適用し、
   ツールバー→曜日日付→終日行の実高を積み上げた位置で止める */
.fc .fc-timegrid tr:has(> td .fc-daygrid-body) > td {
  position: sticky;
  top: calc(var(--fc-toolbar-h, 56px) + var(--fc-colhead-h, 33px));
  z-index: 3;
  background: var(--fc-page-bg-color, #fff);
}
.fc .fc-timegrid td.fc-timegrid-divider {
  position: sticky;
  top: calc(var(--fc-toolbar-h, 56px) + var(--fc-colhead-h, 33px) + var(--fc-allday-h, 34px));
  z-index: 3;
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* iconの幅調整 */
.icon-class {
  margin-top: 2vh;
  width: 8vw;
  min-width: 80px;
  text-align: end;
}

/* チャットモーダルのチャット表示を横幅いっぱいに広げ、x軸スクロールを抑制 */
#chat-container {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  word-break: break-all;
  max-height: 60vh;
  overflow-y: auto;
}

/* モーダル本体の高さを画面サイズに制限し、中身をスクロール */
.hs-overlay .modal-scrollable {
  max-height: 90vh;
  overflow-y: auto;
}