/* 一覧の期間フィルタ ({% dtu_period_picker %}) のレイアウト挙動。
   period.js と対で使う。

   .card / .card-header / .form-control の見た目定義は PJ 所有 (dtu-card-header.css の衝突回避方針)
   のため再定義せず、期間ピッカー自身のクラス (.dtu-period*) の配置とモード切替だけを定義する。

   モードは 2 系統で確定する:
     1. JS 実行前 = viewport の @media で「広い=inline / 狭い=collapsed」を既定表示する。
        ブレークポイントはユーザー選択の 768px (タブレット以上で 2 input)。
        ⚠️ このファイルは scripts.html 経由で **body 末尾**に配られる (DTU の CSS 配信方針)。
        body 内の <link> も CSSOM 構築まで描画をブロックするが、first paint より前に必ず
        適用される保証は無い = 「フラッシュ防止」は構造的に担保されていない。厳密に消したい
        pj は base.html の <head> でこのファイルを読むこと (二重読み込みは無害)。
     2. JS 実行後 = period.js が card-header の実効幅を測って data-mode="inline|collapsed" を明示する
        (サイドバー折りたたみ・密ヘッダ・半幅カード等、viewport では測れないケースの矯正)。
   @media 既定と data-mode 明示が同じ見た目を出すので、両者が一致するデスクトップ主用途では
   属性付与時に視覚変化 (リフロー) が起きない。 */

.dtu-period {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  vertical-align: middle;
}

.dtu-period__gear {
  cursor: pointer;
  line-height: 1;
  /* WCAG AA の最小タップ域 (24px) を満たす。
     .btn の既定 padding は line-height:1 と併さると高さ 16px まで潰れ、
     指では狙いにくい (viewport-sweep VSW-TKS-105: 32×16px を全 pj 横断で実測。
     three_k の quote_aggregation / order_list / invoice /
     out_sourcing_aggregations の phone・tablet で同一値)。
     flex 化はアイコンを枠の中心に置くため (min-height だけだと上に寄る)。
     歯車が見えるのは collapsed 表示のときだけなので (inline / print は
     display:none が勝つ)、広い画面の見た目は変わらない。 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
}

.dtu-period__host {
  display: inline-flex;
  align-items: center;
}

.dtu-period__fields {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.dtu-period__label {
  margin: 0;
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* 実測: "2026-07-15" + form-control-sm の padding/border で約 90px。余裕を持たせ 8rem 固定。 */
.dtu-period__input {
  width: 8rem;
  min-width: 8rem;
}

/* datepicker (data-datepicker) の readonly は「値の入口をカレンダー選択に限定」する
   仕様 (dtu_period_picker.html のコメント参照。pj 側の日付欄も同じ作法で readonly を
   書く) で、非活性ではない。Bootstrap の .form-control[readonly] グレー (#e9ecef) だと
   触れない欄に見えるため白へ戻す。period picker の input も data-datepicker を持つため
   本ルール 1 本で picker・pj 画面の両方に効く (真に固定したい欄は disabled にすれば
   従来どおりグレー)。datepicker 全般のルールだが、専用 css を 1 ルールのため新設せず
   常時ロードされる本ファイルに同居させる。詳細度 (0,3,1) で Bootstrap (0,2,0) に勝つ。
   .dtu-datepicker は initDatePicker が初期化時に付けるマーカー — data-datepicker 属性を
   書かず JS 手動初期化だけの欄も同じ白に揃えるため (属性の有無で見た目が割れていた) */
input[data-datepicker][readonly].form-control,
input.dtu-datepicker[readonly].form-control {
  background-color: #fff;
}

.dtu-period__sep {
  white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * モード表示
 * ------------------------------------------------------------------ */

/* --- inline 見た目 (共通ルール): host を見せ、歯車と要約テキストを隠す --- */
.dtu-period[data-mode="inline"] > .dtu-period__gear,
.dtu-period[data-mode="inline"] > .dtu-period__text {
  display: none;
}
.dtu-period[data-mode="inline"] > .dtu-period__host {
  display: inline-flex;
}

/* --- collapsed 見た目 (共通ルール): host を隠し、歯車と要約テキストを見せる --- */
.dtu-period[data-mode="collapsed"] > .dtu-period__host {
  display: none;
}

/* --- JS 実行前の既定 (data-mode 未設定): viewport で振り分ける --- */
@media (min-width: 768px) {
  .dtu-period:not([data-mode]) > .dtu-period__gear,
  .dtu-period:not([data-mode]) > .dtu-period__text {
    display: none;
  }
  .dtu-period:not([data-mode]) > .dtu-period__host {
    display: inline-flex;
  }
}
@media (max-width: 767.98px) {
  .dtu-period:not([data-mode]) > .dtu-period__host {
    display: none;
  }
}

/* ------------------------------------------------------------------ *
 * モーダル内の fields (狭い画面で歯車から開いたとき): 縦積みにする
 * (host 内の横並びレイアウトを打ち消す)
 * ------------------------------------------------------------------ */
.modal-body > .dtu-period__fields,
.dtu-modal__body > .dtu-period__fields {
  display: block;
}
.modal-body > .dtu-period__fields > .dtu-period__label,
.dtu-modal__body > .dtu-period__fields > .dtu-period__label {
  display: block;
  margin-bottom: 0.25rem;
}
.modal-body > .dtu-period__fields > .dtu-period__input,
.dtu-modal__body > .dtu-period__fields > .dtu-period__input {
  width: 100%;
  margin-bottom: 0.75rem;
}
.modal-body > .dtu-period__fields > .dtu-period__sep,
.dtu-modal__body > .dtu-period__fields > .dtu-period__sep {
  display: none;
}

/* ------------------------------------------------------------------ *
 * 印刷: 歯車と入力欄を消し、期間テキスト ("期間:…") を残す
 * (正典テンプレートに欠けていた印刷対応をここで一元化)
 * ------------------------------------------------------------------ */
@media print {
  .dtu-period__gear,
  .dtu-period__host {
    display: none !important;
  }
  .dtu-period__text {
    display: inline !important;
  }
}