/* ═══ 全体 ═══════════════════════════════════════════════════════════════ */

[x-cloak] { display: none !important; }

/* スクロールバー細め */
.col-scroll::-webkit-scrollbar       { width: 4px; }
.col-scroll::-webkit-scrollbar-track { background: transparent; }
.col-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

/* ドラッグ中のゴースト */
.sortable-ghost  { opacity: .35; }
.sortable-chosen { box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.sortable-drag   { opacity: 1 !important; }

/* カード hover */
.task-card          { transition: box-shadow .15s; cursor: grab; }
.task-card:hover    { box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.task-card:active   { cursor: grabbing; }

/* モーダルオーバーレイ */
.modal-overlay { backdrop-filter: blur(2px); }


/* ═══ 汎用コンポーネント（Tailwind @apply はCDNでは未サポートのため通常CSSで記述） ═══ */

.input-field {
  width: 100%;
  border: 1px solid #cbd5e1;       /* border-slate-300 */
  border-radius: .5rem;            /* rounded-lg */
  padding: .5rem .75rem;           /* px-3 py-2 */
  font-size: .875rem;              /* text-sm */
  background-color: #ffffff;
  color: #1e293b;                  /* text-slate-800 */
  outline: none;
}
.input-field:focus {
  box-shadow: 0 0 0 2px #93c5fd;   /* ring-2 ring-blue-400 */
  border-color: transparent;
}

.label-text {
  display: block;
  font-size: .75rem;               /* text-xs */
  font-weight: 500;
  color: #64748b;                  /* text-slate-500 */
  margin-bottom: .25rem;
}

.detail-label {
  font-size: .75rem;
  font-weight: 500;
  color: #94a3b8;                  /* text-slate-400 */
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .25rem;
}

.detail-value {
  font-size: .875rem;
  color: #334155;                  /* text-slate-700 */
}

.btn-primary {
  background-color: #2563eb;       /* bg-blue-600 */
  color: #ffffff;
  font-weight: 500;
  border-radius: .5rem;
  padding: .5rem 1rem;             /* px-4 py-2 */
  border: none;
  cursor: pointer;
  transition: background-color .15s;
}
.btn-primary:hover    { background-color: #1d4ed8; } /* bg-blue-700 */
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-secondary {
  background-color: #ffffff;
  color: #374151;                  /* text-slate-700 */
  font-weight: 500;
  border: 1px solid #d1d5db;      /* border-slate-300 */
  border-radius: .5rem;
  padding: .5rem 1rem;
  cursor: pointer;
  transition: background-color .15s;
}
.btn-secondary:hover { background-color: #f1f5f9; } /* bg-slate-100 */


/* ═══ 作成モーダル専用: アンダーラインスタイル ═══════════════════════════ */

.create-line-input {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid #e2e8f0; /* border-slate-200 */
  border-radius: .25rem .25rem 0 0; /* rounded-t */
  outline: none;
  padding: 0.6rem;
  font-size: 1rem;                  /* 16px */
  color: #1e293b;                   /* text-slate-800 */
  background-color: #F3F4F6;
  transition: border-color .15s, background-color .15s;
}
.create-line-input::placeholder     { color: #cbd5e1; } /* placeholder-slate-300 */
.create-line-input:focus            { box-shadow: none; border-bottom-color: #3b82f6; background-color: #ffffff; }
select.create-line-input            { -webkit-appearance: auto; appearance: auto; }