/* ============================================================
  SCHEDMATE — TASKS (MVP)
  - Token-driven so it looks right in both Light & Dark
  - Uses dashboard theme tokens from dashboard.css + theme.css
============================================================ */

#view-tasks{ color: var(--sm-text); }
#view-tasks .sm-view-head{ margin-bottom: 14px; }

.sm-tasks-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin: 10px 0 14px;
}

.sm-tasks-left,
.sm-tasks-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.sm-task-search{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border: 1px solid var(--sm-border);
  border-radius: 14px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  min-width: 260px;
}

.sm-task-search input{
  border:none;
  outline:none;
  background:transparent;
  color: var(--sm-text);
  width: 100%;
  font-size: 14px;
}

.sm-task-search input::placeholder{ color: var(--sm-dim); }

/* In dark mode, rely on theme tokens (theme.css sets --sm-border, --sm-card2, etc.) */
html.dark .sm-task-search,
body.dark .sm-task-search{
  background: var(--sm-card2);
}

.sm-task-list{
  display:grid;
  gap:10px;
}

.sm-task-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding: 12px 12px;
  border: 1px solid var(--sm-border);
  border-radius: 16px;
  background: var(--sm-card);
  box-shadow: var(--sm-shadow2);
  cursor:pointer;
  transition: transform .06s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.sm-task-row:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.92);
  border-color: rgba(15,23,42,.16);
  box-shadow: var(--sm-shadow);
}

html.dark .sm-task-row:hover,
body.dark .sm-task-row:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  box-shadow: var(--sm-shadow);
}

.sm-task-check{ margin-top:2px; }
.sm-task-check input{ width:18px; height:18px; }

.sm-task-main{ flex:1; min-width:0; }

.sm-task-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 700;
}

.sm-task-title .sm-task-done{
  text-decoration: line-through;
  opacity: .75;
}

.sm-task-meta{
  margin-top: 6px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  color: var(--sm-muted);
  font-size: 13px;
}

.sm-task-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--sm-border);
  background: var(--sm-card2);
  font-size: 12px;
  white-space: nowrap;
}

.sm-task-pill.is-overdue{
  border-color: rgba(255, 110, 110, .40);
  background: rgba(255, 110, 110, .10);
}

.sm-task-pill.is-today{
  border-color: rgba(56, 189, 248, .40);
  background: rgba(56, 189, 248, .10);
}

.sm-task-note{
  margin-top: 8px;
  color: var(--sm-muted);
  font-size: 13px;
  line-height: 1.35;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sm-task-empty{
  padding: 16px;
  border: 1px dashed var(--sm-border);
  border-radius: 16px;
  background: var(--sm-card);
  color: var(--sm-text);
  box-shadow: var(--sm-shadow2);
}

.sm-task-setup pre{
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--sm-card2);
  border: 1px solid var(--sm-border);
  overflow:auto;
  font-size: 12px;
  line-height: 1.35;
}

/* Modal fields */
.sm-task-form{
  display:grid;
  gap:10px;
}

.sm-task-form .sm-field{
  display:grid;
  gap:6px;
}

.sm-task-form label{
  font-size: 12px;
  color: var(--sm-muted);
  font-weight: 700;
}

.sm-task-form input,
.sm-task-form textarea,
.sm-task-form select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--sm-border);
  background: rgba(255,255,255,.78);
  color: var(--sm-text);
  outline:none;
}

html.dark .sm-task-form input,
html.dark .sm-task-form textarea,
html.dark .sm-task-form select,
body.dark .sm-task-form input,
body.dark .sm-task-form textarea,
body.dark .sm-task-form select{
  background: rgba(255,255,255,.06);
}

.sm-task-form input::placeholder,
.sm-task-form textarea::placeholder{
  color: var(--sm-dim);
}

.sm-task-form textarea{
  min-height: 90px;
  resize: vertical;
}