.todo-toolbar { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4); flex-wrap:wrap; }
.todo-tabs-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-5); flex-wrap:wrap; gap:var(--space-3); }

.task-list { display:flex; flex-direction:column; gap:2px; }
.task-item { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); transition:box-shadow var(--transition); cursor:pointer; }
.task-item:hover { box-shadow:var(--shadow-md); border-color:var(--color-primary); }
.task-item input[type="checkbox"] { width:17px; height:17px; accent-color:var(--color-primary); flex-shrink:0; cursor:pointer; }
.task-main { flex:1; min-width:0; }
.task-title { font-size:.9rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.task-item.done .task-title { text-decoration:line-through; color:var(--color-text-muted); }
.task-tags { display:flex; gap:var(--space-1); flex-wrap:wrap; margin-top:4px; }
.task-meta { display:flex; align-items:center; gap:var(--space-3); flex-shrink:0; }
.task-date { font-size:.78rem; color:var(--color-text-muted); white-space:nowrap; }
.task-menu-btn { color:var(--color-text-muted); padding:4px; border-radius:var(--radius-sm); transition:background var(--transition); }
.task-menu-btn:hover { background:var(--color-bg); color:var(--color-text); }
.task-menu-btn svg { width:16px; height:16px; }

/* Detail panel */
.detail-panel { position:fixed; top:0; right:0; bottom:0; width:420px; background:var(--color-surface); border-left:1px solid var(--color-border); z-index:150; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; transform:translateX(0); transition:transform var(--transition); }
.detail-panel.hidden { transform:translateX(100%); }
.detail-panel-header { display:flex; align-items:center; justify-content:space-between; padding:var(--space-5); border-bottom:1px solid var(--color-border); flex-shrink:0; }
.detail-panel-header h3 { font-size:1rem; font-weight:700; }
.detail-panel-body { flex:1; overflow-y:auto; padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-5); -webkit-overflow-scrolling:touch; }
.detail-title-input { width:100%; font-size:1.1rem; font-weight:700; background:transparent; border:none; border-bottom:2px solid var(--color-border); border-radius:0; padding:var(--space-2) 0; color:var(--color-text); outline:none; }
.detail-title-input:focus { border-bottom-color:var(--color-primary); }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.priority-options { display:flex; gap:var(--space-2); flex-wrap:wrap; }
.priority-btn { padding:4px 12px; border-radius:var(--radius-full); font-size:.78rem; font-weight:600; border:2px solid transparent; cursor:pointer; transition:all var(--transition); background:var(--color-bg); color:var(--color-text-secondary); }
.priority-btn.active.urgent { background:#FEE2E2; color:#991B1B; border-color:#EF4444; }
.priority-btn.active.high   { background:#FEF3C7; color:#92400E; border-color:#F59E0B; }
.priority-btn.active.medium { background:var(--color-primary-light); color:var(--color-primary); border-color:var(--color-primary); }
.priority-btn.active.low    { background:var(--color-bg); color:var(--color-text-secondary); border-color:var(--color-border); }
.detail-timestamps { font-size:.75rem; color:var(--color-text-muted); border-top:1px solid var(--color-border); padding-top:var(--space-4); }
.detail-actions { padding:var(--space-4) var(--space-5); border-top:1px solid var(--color-border); display:flex; justify-content:flex-end; flex-shrink:0; gap:var(--space-3); }

/* ── Tablet (≤1024px) ── */
@media (max-width:1024px) {
  .detail-panel { width:380px; }
}

/* ── Phone (≤640px) ── */
@media (max-width:640px) {
  /* Task toolbar: stack search full-width */
  .todo-toolbar { gap:var(--space-2); }
  .todo-toolbar .search-input-wrap { flex:1 1 100%; order:-1; }

  /* Tabs scrollable */
  .todo-tabs-row { flex-direction:column; align-items:stretch; gap:var(--space-2); }

  /* Task items: tighter on phone */
  .task-item { padding:var(--space-3); }
  .task-date { display:none; } /* hide date on very small screens to save space */

  /* Detail panel full-screen on phone */
  .detail-panel { width:100%; bottom:var(--mobile-nav-height, 62px); }
  .detail-grid { grid-template-columns:1fr; }
}