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

/* 幅指定の無い入力欄は size=20 相当の自然幅（約 220〜240px）で描画され、320〜375px の画面では
   親の枠を突き抜けてページ全体を横スクロールさせる。画面ごとに max-w-full を付けて回る代わりに、
   入力欄は常に親幅を超えないようにする（w-* や flex-1 の指定はそのまま優先される）。 */
@layer base {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    max-width: 100%;
  }
}

/* iOS Safari は 16px 未満の入力欄にフォーカスすると画面を自動ズームし、戻らない。
   スマホ幅（md 未満）では入力欄の文字を 16px に揃えてこれを防ぐ（HIG の本文サイズにも近づく）。
   Tailwind の text-sm 等（クラス指定）より優先させる必要があるため !important を付ける。 */
@media (max-width: 767.98px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
  select,
  textarea {
    font-size: 1rem !important;
  }
}

/* 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;
  }
}

*/
/*
 * driver.js 1.8.0 (https://driverjs.com) の dist/driver.css をそのまま配置したもの。MIT License, Copyright (c) Kamran Ahmed
 * 見た目の調整は tutorial.css 側で上書きする（このファイルは更新時に差し替えるだけにする）。
 */
.driver-popover{all:unset;font-family:var(--driver-popover-font-family,"Helvetica Neue", Inter, ui-sans-serif, "Apple Color Emoji", Helvetica, Arial, sans-serif);box-sizing:border-box;color:#2d2d2d;z-index:1000000000;background-color:#fff;border-radius:5px;min-width:250px;max-width:300px;margin:0;padding:15px;position:fixed;top:0;right:0;box-shadow:0 1px 10px #0006}.driver-popover-title{zoom:1;margin:0;font-size:19px;font-weight:700;line-height:1.5;display:block;position:relative}.driver-popover-close-btn{all:unset;cursor:pointer;color:#d2d2d2;z-index:1;text-align:center;width:32px;height:28px;font-size:18px;font-weight:500;transition:color .2s;position:absolute;top:0;right:0}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{zoom:1;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.5}.driver-popover-footer{text-align:right;zoom:1;justify-content:space-between;align-items:center;margin-top:15px;display:flex}.driver-popover-progress-text{color:#727272;zoom:1;font-size:13px;font-weight:400}.driver-popover-footer-btn{all:unset;box-sizing:border-box;color:#2d2d2d;cursor:pointer;zoom:1;background-color:#fff;border:1px solid #ccc;border-radius:3px;outline:0;padding:3px 7px;font-size:12px;line-height:1.3;text-decoration:none;display:inline-block}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}.driver-popover-footer-btn:hover,.driver-popover-footer-btn:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{flex-grow:1;justify-content:flex-end;display:flex}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";border:5px solid #fff;position:absolute}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{border-top-color:#0000;border-bottom-color:#0000;border-right-color:#0000;left:100%}.driver-popover-arrow-side-right{border-top-color:#0000;border-bottom-color:#0000;border-left-color:#0000;right:100%}.driver-popover-arrow-side-top{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;top:100%}.driver-popover-arrow-side-bottom{border-top-color:#0000;border-left-color:#0000;border-right-color:#0000;bottom:100%}.driver-popover-arrow-side-center,.driver-popover-arrow-none{display:none}.driver-active .driver-overlay{pointer-events:none}.driver-active.driver-no-scroll{overflow:hidden}.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in var(--driver-animation-duration,.4s) ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in var(--driver-animation-duration,.4s)}.driver-active-element-parent-no-scroll{overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}

/* 使い方チュートリアル（tutorial_controller.js が出す driver.js のポップオーバー）を画面のトーンに合わせる。
   driver.css（配布物そのまま）の後に読み込まれる前提で上書きしている。 */
.driver-popover.tutorial-popover {
  font-family: inherit;
  border-radius: 12px;
  padding: 16px;
  /* スマホ幅（390px 前後）でも左右に余白が残る幅にする */
  min-width: 240px;
  max-width: min(340px, calc(100vw - 24px));
}

.tutorial-popover .driver-popover-title {
  font-size: 16px;
  /* 右上の閉じるボタンと重ならないようにする */
  padding-right: 24px;
}

.tutorial-popover .driver-popover-description {
  font-size: 14px;
  color: #374151;
  /* YAML の本文中の改行をそのまま表示する */
  white-space: pre-line;
}

.tutorial-popover .driver-popover-close-btn {
  color: #6b7280;
  width: 40px;
  height: 40px;
  font-size: 22px;
}

.tutorial-popover .driver-popover-footer-btn {
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  text-shadow: none;
}

.tutorial-popover .driver-popover-next-btn,
.tutorial-popover .driver-popover-next-btn:hover,
.tutorial-popover .driver-popover-next-btn:focus {
  background-color: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.tutorial-popover .driver-popover-next-btn:hover {
  background-color: #1d4ed8;
}
/*
 * 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;
}