/* ===========================================================================
   FILE   : v2/assets/css/sidebar-reminder.css
   PURPOSE: サイドバーのタスク (reminder) 項目の縦線色分け
   METHOD : margin-left:8px で要素自体を icon-bar 右端に密着 (Agent 1 真因究明結果)
            linear-gradient で 8px の色帯を要素左端に描画
   FIX    : 2026-05-03 z-index の罠 (icon-bar z-index:100 で隠れていた) を解消
   =========================================================================== */

.reminder-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 14px;  /* 左 14px = 青線 8px + 余白 6px */
  margin: 2px 8px;             /* ★ 左 margin 8px で icon-bar 右端 (88px) に密着 */
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  background: linear-gradient(to right, #94a3b8 0, #94a3b8 8px, transparent 8px) !important;
}

.reminder-item:hover {
  background: linear-gradient(to right, #94a3b8 0, #94a3b8 8px, var(--bg-hover) 8px) !important;
}

.reminder-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reminder-due   { font-size: 11px; flex-shrink: 0; color: var(--text-muted); }

/* === ガント色ルール: data-progress 別の color === */
.reminder-item[data-progress="early"]   { background: linear-gradient(to right, #3b82f6 0, #3b82f6 8px, transparent 8px) !important; }
.reminder-item[data-progress="early"]:hover { background: linear-gradient(to right, #3b82f6 0, #3b82f6 8px, var(--bg-hover) 8px) !important; }
.reminder-item[data-progress="mid"]     { background: linear-gradient(to right, #eab308 0, #eab308 8px, transparent 8px) !important; }
.reminder-item[data-progress="mid"]:hover { background: linear-gradient(to right, #eab308 0, #eab308 8px, var(--bg-hover) 8px) !important; }
.reminder-item[data-progress="late"]    { background: linear-gradient(to right, #ef4444 0, #ef4444 8px, transparent 8px) !important; }
.reminder-item[data-progress="late"]:hover { background: linear-gradient(to right, #ef4444 0, #ef4444 8px, var(--bg-hover) 8px) !important; }
.reminder-item[data-progress="overdue"] { background: linear-gradient(to right, #ef4444 0, #ef4444 8px, transparent 8px) !important; animation: reminder-due-blink 1.2s ease-in-out infinite; }
.reminder-item[data-progress="done"]    { background: linear-gradient(to right, #94a3b8 0, #94a3b8 8px, transparent 8px) !important; }

/* 期限テキストの色 */
.reminder-item[data-progress="early"]   .reminder-due { color: #3b82f6; }
.reminder-item[data-progress="mid"]     .reminder-due { color: #eab308; font-weight: 600; }
.reminder-item[data-progress="late"]    .reminder-due { color: #ef4444; font-weight: 700; }
.reminder-item[data-progress="overdue"] .reminder-due { color: #ef4444; font-weight: 700; }
.reminder-item[data-progress="done"]    .reminder-due { color: #94a3b8; }

/* overdue は文字拡大 + 太字 */
.reminder-item[data-progress="overdue"] .reminder-title,
.reminder-item[data-progress="overdue"] .reminder-due {
  font-size: 1.4em;
  font-weight: 700;
}

/* done は取り消し線 */
.reminder-done .reminder-title,
.reminder-done .reminder-due {
  text-decoration: line-through;
  color: #94a3b8;
  opacity: 0.7;
}

@keyframes reminder-due-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }