@import "tailwindcss";

/* Tom Select: プロジェクトのフォームスタイルに統一 */
.ts-wrapper.single .ts-control,
.ts-wrapper.single .ts-control input {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #111827;
  cursor: pointer;
}

.ts-wrapper.single .ts-control {
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  background-color: #f9fafb;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.ts-wrapper.single.focus .ts-control {
  border-color: #6366f1;
  background-color: #fff;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
  outline: none;
}

.ts-wrapper.single .ts-control::after {
  border-color: #9ca3af transparent transparent;
  margin-top: -2px;
}

.ts-wrapper .ts-control .item {
  color: #111827;
}

.ts-wrapper .ts-control > input::placeholder {
  color: #9ca3af;
}

.ts-wrapper .ts-dropdown {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  margin-top: 4px;
  z-index: 50;
}

.ts-wrapper .ts-dropdown .ts-dropdown-content {
  max-height: 240px;
  padding: 0.25rem 0;
}

.ts-wrapper .ts-dropdown .option {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #374151;
  cursor: pointer;
  transition: background-color 0.1s;
}

.ts-wrapper .ts-dropdown .option:hover,
.ts-wrapper .ts-dropdown .option.active {
  background-color: #eef2ff;
  color: #4338ca;
}

.ts-wrapper .ts-dropdown .option.selected {
  background-color: #e0e7ff;
  color: #3730a3;
}

.ts-wrapper .ts-dropdown .ts-option-create {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #4338ca;
  cursor: pointer;
  border-top: 1px solid #e5e7eb;
}

.ts-wrapper .ts-dropdown .ts-no-results {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #6b7280;
}

/* 未入力ハイライト */
.highlight-empty {
  box-shadow: 0 0 0 2px #fcd34d !important;
}

/* サイドピークを開いた起点要素を強調 */
.side-peek-active {
  outline: 2px solid #4f46e5 !important;
  outline-offset: 2px;
  background-color: #eef2ff !important;
  position: relative;
  z-index: 1;
}

/* 配車表モード切替 (複製 / 関連運行追加) */
.dispatch-slot-label-default { display: inline; }
.dispatch-slot-label-duplicate,
.dispatch-slot-label-picking { display: none; }

body[data-dispatch-mode] .dispatch-slot-label-default { display: none; }
body[data-dispatch-mode="duplicate"] .dispatch-slot-label-duplicate { display: inline; }
body[data-dispatch-mode="picking"] .dispatch-slot-label-picking { display: inline; }

body[data-dispatch-mode="duplicate"] a.dispatch-board-slot-drop {
  border-color: #6366f1 !important;
  background-color: #eef2ff !important;
  color: #4338ca !important;
  font-weight: 700 !important;
}
body[data-dispatch-mode="picking"] a.dispatch-board-slot-drop {
  border-color: #fb923c !important;
  background-color: #fffbeb !important;
  color: #b45309 !important;
  font-weight: 700 !important;
}
body[data-dispatch-mode="place"] a.dispatch-board-slot-drop {
  border-color: #10b981 !important;
  background-color: #ecfdf5 !important;
  color: #065f46 !important;
  font-weight: 700 !important;
}
body[data-dispatch-mode="place"] .dispatch-slot-label-default { display: none; }
body[data-dispatch-mode="place"] .dispatch-slot-label-place { display: inline; }
.dispatch-slot-label-place { display: none; }

/* モード中は締切ボタンを非表示（誤操作防止） */
body[data-dispatch-mode] .dispatch-slot-close-button { display: none; }

/* 配車表のスクロール領域: viewport - 上部余白 を上限に、内部で縦横スクロール */
.dispatch-board-scroll-area {
  max-height: calc(100vh - 200px);
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 1rem;
  border: 1px solid #e0e7ff; /* indigo-100 */
  background: #fff;
}

/* border-collapse: collapse だと sticky セルの背景が共有ボーダー領域まで
   広がらず、横スクロール時に裏側のセル（空き枠のダッシュ罫）がチラつくため、
   separate + border-spacing:0 に切り替えて sticky 背景を完全不透明にする。 */
.dispatch-board-scroll-area table {
  border-collapse: separate;
  border-spacing: 0;
}

/* 営業所ヘッダーの切り替わり時に一瞬フラッシュさせる */
.dispatch-board-branch-header {
  transition: background-color 200ms ease;
}
.dispatch-board-branch-flash {
  animation: dispatch-board-branch-flash 700ms ease-out;
}
@keyframes dispatch-board-branch-flash {
  0% {
    background-color: #fde68a; /* amber-200 */
    box-shadow: inset 0 -2px 0 #f59e0b; /* amber-500 underline */
  }
  100% {
    background-color: #e0e7ff; /* indigo-100 に戻る */
    box-shadow: none;
  }
}

/* ドラッグ中の空き枠強調: body クラスで一括切り替え（forEach 回避） */
body.is-dragging-card .dispatch-board-slot-drop {
  border-color: #6366f1 !important;   /* indigo-500 */
}
body.is-dragging-parked .dispatch-board-slot-drop {
  border-color: #10b981 !important;   /* emerald-500 */
}

/* サイドピークパネルの幅: 小画面でも配車表が見えるように画面幅の 50% を上限 (最大 720px) */
.side-peek-panel {
  width: clamp(360px, 50vw, 720px);
  max-width: 100vw;
}

/* サイドピーク表示中: メインコンテンツの右側にパネル幅分のパディングを確保 */
@media (min-width: 1024px) {
  body.side-peek-open main {
    padding-right: clamp(360px, 50vw, 720px);
  }
}

/* サイドバー折りたたみ (アイコンレール化) — lg 以上でのみ適用 */
@media (min-width: 1024px) {
  body.sidebar-collapsed [data-sidebar-target="sidebar"] {
    width: 4rem;
  }
  body.sidebar-collapsed [data-sidebar-target="content"] {
    margin-left: 4rem;
  }
  body.sidebar-collapsed [data-sidebar-collapse-hide] {
    display: none !important;
  }
  body.sidebar-collapsed [data-sidebar-target="collapseIcon"] {
    transform: rotate(180deg);
  }
  body.sidebar-collapsed [data-sidebar-target="sidebar"] [data-sidebar-rail-center] {
    justify-content: center;
  }
  body.sidebar-collapsed [data-sidebar-target="sidebar"] [data-sidebar-rail-pad] {
    padding-left: 0;
    padding-right: 0;
  }
}

/* 未選択時: × ボタンを非表示 */
.ts-wrapper .clear-button {
  display: none !important;
}
.ts-wrapper.has-value .clear-button {
  display: block !important;
}

/* 選択済み: 入力カーソルを隠す */
.ts-wrapper.single.has-value .ts-control > input {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
}

/* クリック時（フォーカス時）は検索入力を復活 */
.ts-wrapper.single.has-value.focus .ts-control > input {
  opacity: 1;
  position: static;
  width: auto;
  height: auto;
}

@layer base {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  input[type="tel"],
  input[type="search"],
  textarea,
  select {
    @apply block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm placeholder:text-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none sm:text-sm;
  }

  input[type="checkbox"] {
    @apply h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500;
  }

  label {
    @apply block text-sm font-medium text-gray-700;
  }
}

/* 精算リスト等のインライン保存フィードバック（行を一瞬グリーンにフラッシュ） */
@keyframes flash-saved {
  0%   { background-color: rgba(16, 185, 129, 0.22); }
  100% { background-color: transparent; }
}

.animate-flash-saved {
  animation: flash-saved 1s ease-out;
}