/* ───────── Team Dashboard — warm & friendly ───────── */

:root {
  --bg: oklch(0.985 0.012 75);
  --bg-alt: oklch(0.97 0.018 75);
  --surface: oklch(1 0 0);
  --ink: oklch(0.24 0.02 60);
  --ink-2: oklch(0.42 0.02 60);
  --ink-3: oklch(0.62 0.02 60);
  --ink-4: oklch(0.82 0.012 75);
  --line: oklch(0.92 0.012 75);
  --line-2: oklch(0.88 0.014 75);

  /* per-member warm accents — same chroma/lightness, varied hue */
  --hue-peach:     oklch(0.78 0.11 45);
  --hue-terracotta:oklch(0.72 0.11 30);
  --hue-sage:      oklch(0.78 0.08 145);
  --hue-butter:    oklch(0.85 0.10 95);
  --hue-lavender:  oklch(0.78 0.08 295);
  --hue-sky:       oklch(0.78 0.08 230);
  --hue-rose:      oklch(0.78 0.10 10);
  --hue-sand:      oklch(0.80 0.06 75);

  --hue-peach-soft:     oklch(0.94 0.04 45);
  --hue-terracotta-soft:oklch(0.93 0.04 30);
  --hue-sage-soft:      oklch(0.94 0.03 145);
  --hue-butter-soft:    oklch(0.95 0.04 95);
  --hue-lavender-soft:  oklch(0.94 0.03 295);
  --hue-sky-soft:       oklch(0.94 0.03 230);
  --hue-rose-soft:      oklch(0.94 0.04 10);
  --hue-sand-soft:      oklch(0.95 0.025 75);

  --r-card: 20px;
  --r-task: 10px;
  --r-pill: 999px;

  --shadow-card: 0 1px 0 oklch(1 0 0 / 0.8) inset, 0 1px 2px oklch(0.2 0.02 60 / 0.04), 0 4px 16px oklch(0.2 0.02 60 / 0.05);
  --shadow-card-hover: 0 1px 0 oklch(1 0 0 / 0.9) inset, 0 2px 4px oklch(0.2 0.02 60 / 0.06), 0 12px 32px oklch(0.2 0.02 60 / 0.09);
  --shadow-pop: 0 1px 2px oklch(0.2 0.02 60 / 0.06), 0 8px 24px oklch(0.2 0.02 60 / 0.10);
}

* { box-sizing: border-box; }

html, body, #root { margin: 0; padding: 0; min-height: 100vh; }

body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

/* ───────── App shell ───────── */
.app { max-width: 1480px; margin: 0 auto; padding: 32px 40px 80px; }

@media (max-width: 720px) {
  .app { padding: 20px 16px 64px; }
}

/* ───────── Header ───────── */
.hdr { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.hdr-l h1 { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; line-height: 1.1; }
.hdr-l .sub { font-size: 14px; color: var(--ink-3); display: flex; align-items: center; gap: 10px; }
.hdr-l .sub .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-4); }

.hdr-r { display: flex; align-items: center; gap: 10px; }

.search {
  position: relative; display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 8px 14px 8px 36px;
  width: 260px; transition: border-color .15s, box-shadow .15s;
}
.search:focus-within { border-color: var(--ink-4); box-shadow: 0 0 0 4px oklch(0.82 0.012 75 / 0.25); }
.search svg { position: absolute; left: 12px; color: var(--ink-3); }
.search input { border: 0; outline: none; background: transparent; font-size: 13.5px; color: var(--ink); width: 100%; }
.search input::placeholder { color: var(--ink-3); }

.day-nav { display: flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px; }
.day-nav button { border: 0; background: transparent; width: 28px; height: 28px; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--ink-2); transition: background .12s; }
.day-nav button:hover:not(:disabled) { background: var(--bg-alt); }
.day-nav button:disabled { opacity: 0.35; cursor: not-allowed; }
.day-nav .lbl { font-size: 13px; font-weight: 500; padding: 0 10px; min-width: 100px; text-align: center; color: var(--ink); }
.day-nav .lbl.past { color: var(--ink-2); font-style: italic; }

.today-btn {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-pill); padding: 8px 14px; font-size: 13px; font-weight: 500;
  color: var(--ink-2); transition: background .12s, border-color .12s;
}
.today-btn:hover { background: var(--bg-alt); border-color: var(--line-2); }

/* ───────── Summary bar ───────── */
.summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 22px 26px;
  display: flex; align-items: center; gap: 28px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card);
}
.summary-l { display: flex; flex-direction: column; gap: 4px; }
.summary-l .summary-date { font-size: 38px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); margin-bottom: 6px; }
.summary-l .summary-date.weekend { color: #dc2626; }
.summary-l .pct { font-size: 38px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.summary-l .pct sup { font-size: 18px; font-weight: 500; color: var(--ink-3); margin-left: 2px; }
.summary-l .lbl { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }

.summary-bar-wrap { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 200px; }
.summary-bar-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--ink-3); }
.summary-bar-meta strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.summary-bar { height: 8px; background: var(--bg-alt); border-radius: var(--r-pill); overflow: hidden; position: relative; }
.summary-bar-fill {
  position: absolute; inset: 0; right: auto;
  background: linear-gradient(90deg, var(--hue-terracotta), var(--hue-peach), var(--hue-butter));
  border-radius: var(--r-pill);
  transition: width .5s cubic-bezier(.3,.7,.4,1);
}

.summary-stack { display: flex; gap: 20px; align-items: center; }
.summary-stat { display: flex; flex-direction: column; gap: 2px; min-width: 60px; }
.summary-stat .v { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.summary-stat .l { font-size: 11.5px; color: var(--ink-3); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.summary-divider { width: 1px; height: 36px; background: var(--line); }

@media (max-width: 720px) {
  .summary { flex-direction: column; align-items: stretch; gap: 18px; padding: 20px; }
  .summary-stack { justify-content: space-between; }
}

/* ───────── Grid ───────── */
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-scroll { grid-auto-flow: column; grid-auto-columns: minmax(320px, 1fr); overflow-x: auto; padding-bottom: 8px; }

@media (max-width: 1100px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; } }

/* ───────── Card ───────── */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 22px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: var(--shadow-card);
  transition: box-shadow .18s, border-color .18s, transform .18s;
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent, var(--ink-4));
  opacity: 0.85;
}
.card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--line-2); }
.card.dragging { opacity: 0.4; }
.card.drag-over { transform: scale(1.012); border-color: var(--accent); }

.card.compact { padding: 16px; gap: 12px; }
.card.comfy   { padding: 26px; gap: 20px; }

.card-hd { display: flex; align-items: center; gap: 12px; }

.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft, var(--bg-alt));
  color: var(--accent-ink, var(--ink));
  font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
  flex-shrink: 0;
  border: 1px solid oklch(1 0 0 / 0.5);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.6);
}
.avatar.lg { width: 44px; height: 44px; font-size: 15px; }

.card-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.card-name .n { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-name .meta { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.card-name .meta .count { font-variant-numeric: tabular-nums; }

.drag-handle {
  width: 24px; height: 24px; border-radius: 6px; border: 0; background: transparent;
  color: var(--ink-3); display: grid; place-items: center;
  opacity: 0; transition: opacity .15s, background .12s;
  cursor: grab;
}
.drag-handle:active { cursor: grabbing; }
.card:hover .drag-handle { opacity: 1; }
.drag-handle:hover { background: var(--bg-alt); color: var(--ink-2); }

/* progress bar inside card */
.card-prog { display: flex; flex-direction: column; gap: 6px; }
.card-prog-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; }
.card-prog-meta .pct { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.card-prog-meta .pct.complete { color: var(--accent-ink); }
.card-prog-meta .of { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.card-prog-bar { height: 4px; background: var(--bg-alt); border-radius: var(--r-pill); overflow: hidden; }
.card-prog-fill { height: 100%; background: var(--accent); border-radius: var(--r-pill); transition: width .35s cubic-bezier(.3,.7,.4,1); }

/* tasks */
.tasks { display: flex; flex-direction: column; gap: 2px; }
.tasks.empty { padding: 14px 0; text-align: center; color: var(--ink-3); font-size: 12.5px; font-style: italic; }

.task {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 6px; border-radius: var(--r-task);
  transition: background .12s;
  position: relative;
}
.task:hover { background: var(--bg-alt); }
.task.dragging { opacity: 0.4; }
.task.drop-before::before,
.task.drop-after::after {
  content: ""; position: absolute; left: 8px; right: 8px; height: 2px;
  background: var(--accent); border-radius: 2px;
}
.task.drop-before::before { top: -1px; }
.task.drop-after::after { bottom: -1px; }

.task-grip {
  width: 14px; opacity: 0; cursor: grab; color: var(--ink-3);
  display: grid; place-items: center; flex-shrink: 0;
  transition: opacity .12s;
}
.task:hover .task-grip { opacity: 1; }
.task-grip:active { cursor: grabbing; }

.cb {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 6px;
  border: 1.5px solid var(--ink-4); background: var(--surface);
  display: grid; place-items: center;
  flex-shrink: 0; transition: all .15s;
  cursor: pointer;
  position: relative;
}
.cb:hover { border-color: var(--accent); background: var(--accent-soft); }
.cb:checked { background: var(--accent); border-color: var(--accent); }
.cb:checked::after {
  content: ""; width: 9px; height: 5px;
  border-left: 2px solid white; border-bottom: 2px solid white;
  transform: rotate(-45deg) translate(1px, -1px);
  animation: cb-pop .25s cubic-bezier(.3,1.7,.4,1);
}
@keyframes cb-pop {
  0% { transform: rotate(-45deg) translate(1px, -1px) scale(0); opacity: 0; }
  60% { transform: rotate(-45deg) translate(1px, -1px) scale(1.2); opacity: 1; }
  100% { transform: rotate(-45deg) translate(1px, -1px) scale(1); opacity: 1; }
}

.task-text {
  flex: 1; min-width: 0;
  font-size: 14px; color: var(--ink);
  line-height: 1.4;
  border: 0; outline: none; background: transparent; padding: 2px 0;
  resize: none;
  overflow: hidden;
  font-family: inherit;
}
.task-text:focus { outline: none; }
.task-text-view { white-space: pre-wrap; word-break: break-word; cursor: text; }
.task-link { color: var(--accent-ink, #2563eb); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.task-link:hover { opacity: 0.8; }

/* Calendar date picker button in the day nav */
.cal-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-pill); color: var(--ink-2); cursor: pointer;
  transition: background .12s, border-color .12s;
}
.cal-btn:hover { background: var(--bg-alt); border-color: var(--line-2); color: var(--ink); }
.cal-btn input[type=date] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: 0; padding: 0; margin: 0; cursor: pointer;
}
.task.done .task-text {
  text-decoration: line-through;
  text-decoration-color: var(--ink-3);
  color: var(--ink-3);
}
.task.done .cb-label {
  /* dim children except when input is focused */
}

/* hours spent */
.task-hours {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.task-hours input {
  width: 40px; text-align: right;
  font-size: 12px; font-family: inherit;
  color: var(--ink-2);
  background: transparent; border: 1px solid transparent;
  border-radius: 5px; padding: 2px 4px;
  outline: none; transition: border-color .12s, background .12s;
  -moz-appearance: textfield;
}
.task-hours input::-webkit-outer-spin-button,
.task-hours input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.task:hover .task-hours input,
.task-hours input:focus {
  border-color: var(--line); background: var(--surface);
}
.task-hours input:disabled { color: var(--ink-3); cursor: default; }
.task-hours-unit { font-size: 11px; color: var(--ink-3); }

.task-del {
  width: 24px; height: 24px; border-radius: 6px; border: 0;
  background: transparent; color: var(--ink-3);
  display: grid; place-items: center;
  opacity: 0; transition: opacity .12s, background .12s, color .12s;
  flex-shrink: 0;
}
.task:hover .task-del { opacity: 1; }
.task-del:hover { background: oklch(0.94 0.04 30); color: oklch(0.55 0.18 25); }

/* add task */
.add-task {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 6px; border-radius: var(--r-task);
  border: 1px dashed var(--line-2);
  transition: border-color .12s, background .12s;
}
.add-task:hover, .add-task:focus-within { border-color: var(--accent); background: var(--accent-soft); }
.add-task .plus {
  width: 18px; height: 18px; border-radius: 6px;
  background: var(--bg-alt); color: var(--ink-2);
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 14px; font-weight: 500;
}
.add-task:focus-within .plus { background: var(--accent); color: white; }
.add-task input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-size: 13.5px; color: var(--ink); padding: 2px 0;
}
.add-task input::placeholder { color: var(--ink-3); }

/* read-only past day */
.card.past .add-task { display: none; }
.card.past .task-del, .card.past .task-grip { display: none; }
.card.past .cb { pointer-events: none; }
.card.past .task-text { pointer-events: none; }
.card.past .task-hours input { pointer-events: none; }
.past-banner {
  font-size: 11px; color: var(--ink-3);
  background: var(--bg-alt); border-radius: 6px;
  padding: 4px 8px; display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
}

/* empty state for filtered search */
.empty-search {
  text-align: center; padding: 60px 20px; color: var(--ink-3);
  font-size: 14px;
}

/* utility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }