/**
 * Date Picker（共通コンポーネント）
 * ブラウザ標準の日付入力を使わないための独自カレンダー。
 * 元は task-manager の picker.js 内にあったものを、他プラグインからも使えるように切り出した。
 */

.date-picker {
  position: fixed;
  /* 各種モーダル (10000〜10300) の中から開かれるため、 その上に出す。
     最上位の再認証モーダル (10500) は超えない */
  z-index: 10400;
  background: var(--color-surface, #fafbfc);
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: 8px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 12px;
  width: 280px;
  backdrop-filter: blur(8px);
}

.date-picker__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}

.date-picker__header-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text, #2c3e50);
  min-width: 100px;
  text-align: center;
}

.date-picker__nav {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary, #596275);
  font-size: 0.875rem;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s;
  line-height: 1;
}

.date-picker__nav:hover {
  background: var(--color-target, #e8f0ff);
}

.date-picker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.6875rem;
  color: var(--color-text-secondary, #596275);
  margin-bottom: 4px;
  font-weight: 500;
}

.date-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.date-picker__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  border-radius: 50%;
  cursor: pointer;
  transition:
    background 0.1s,
    color 0.1s;
  color: var(--color-text, #2c3e50);
  border: none;
  background: none;
  padding: 0;
}

.date-picker__day:hover {
  background: var(--color-target, #e8f0ff);
}

.date-picker__day--other-month {
  color: var(--color-text-tertiary, #b0b8c4);
}

.date-picker__day--today {
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--color-accent-base, #a4b2dd);
}

.date-picker__day--selected {
  background: var(--color-accent-base, #a4b2dd);
  color: var(--color-button-text);
  font-weight: 600;
}

.date-picker__day--selected:hover {
  background: var(--color-accent-hover, #8091d4);
}

.date-picker__day--in-range {
  background: rgba(164, 178, 221, 0.2);
}

.date-picker__day--preview-range {
  background: rgba(164, 178, 221, 0.1);
}

.date-picker__day--disabled {
  color: var(--color-text-tertiary, #b0b8c4);
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.date-picker__separator {
  border-top: 1px solid var(--color-border, #d1d5db);
  margin: 8px 0;
}

/* 適用方式 (confirm: true) のときだけ出る、 選択中の状態と決定ボタン */
.date-picker__selection {
  font-size: 0.75rem;
  color: var(--color-text-secondary, #596275);
  text-align: center;
  margin-bottom: 8px;
}

.date-picker__actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.date-picker__presets {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.date-picker__options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
}

.date-picker__options label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text, #2c3e50);
  cursor: pointer;
}

/* 期間固定で開いたとき、 いま始点と終点のどちらを選ぶ番かを出す */
.date-picker__range-hint {
  color: var(--color-text-secondary, #596275);
}

/* 追加行 (リマインダーの時刻欄など、 呼び出し側が差し込む領域) */
.date-picker__extra-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.8125rem;
}

.date-picker__extra-label {
  color: var(--color-text, #2c3e50);
  font-weight: 500;
  margin-right: 4px;
}

.date-picker__extra-select {
  padding: 3px 6px;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: 4px;
  background: var(--color-surface, #fff);
  color: var(--color-text, #2c3e50);
  font-size: 0.8125rem;
  cursor: pointer;
}

.date-picker__extra-separator {
  color: var(--color-text, #2c3e50);
  font-weight: 600;
}

/* 時刻を選ぶ欄 (bindTimeField、 input type=time の置き換え)。 時と分の select を並べる */
.time-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.time-field__select {
  padding: 6px 8px;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: 6px;
  background: var(--color-surface, #fafbfc);
  color: var(--color-text, #2c3e50);
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
}

.time-field__select:focus {
  outline: none;
  border-color: var(--color-accent-text, #5b6b9d);
}

.time-field__separator {
  color: var(--color-text, #2c3e50);
  font-weight: 600;
}

/* bindDateField / bindDateTimeField で使うボタンの既定。 プラグイン側で見た目を
   上書きしていない場合に、 テキスト入力 (base.css の input[type='text']) と同じ
   枠・余白・書体に見えるようにする。
   プラグイン固有のクラス (.aw-date-input 等) が付いていればそちらが優先される */
[data-date-field],
[data-datetime-field] {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.92rem;
  color: var(--color-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all var(--animation-duration) cubic-bezier(0.4, 0, 0.2, 1);
}

[data-date-field]:focus,
[data-datetime-field]:focus {
  outline: none;
  border-color: var(--color-accent-text);
}

[data-date-field]:disabled,
[data-datetime-field]:disabled {
  opacity: 0.5;
  cursor: default;
}

/* 呼び出し側に置く「日付の表示欄」。 押すとピッカーが開く */
.date-field {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.date-field__display {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 10px;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: 6px;
  font-size: 0.8125rem;
  color: var(--color-text, #2c3e50);
  background: var(--color-surface, #fafbfc);
  transition: border-color 0.15s;
  flex: 1;
  min-width: 0;
}

.date-field__display:hover {
  border-color: var(--color-accent-base, #a4b2dd);
}

.date-field__display--empty {
  color: var(--color-text-tertiary, #b0b8c4);
}

/* .date-picker__btn / --confirm / __clear-btn / __preset-btn は
   2026-08-12 に v2 の部品へ移行 (window.buttonHtml)。 配線は data-action / data-preset。 */