/* Team Hub — app styles. Consumes the design-system tokens (tokens/*.css).
   Same visual language as the agency dashboard. No Todoist logo/mark is used —
   the wordmark is plain text. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  color: var(--text-primary);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
h1, h2 { font-family: var(--font-display); letter-spacing: var(--tracking-snug); margin: 0; }

.brand {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-h3);
  color: var(--color-brand);
  letter-spacing: var(--tracking-tight);
}

/* ---- buttons / inputs ---- */
.btn-primary {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-brand);
  color: var(--text-on-brand);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: var(--transition-colors);
}
.btn-primary:hover { background: var(--color-brand-hover); }
.btn-primary:active { background: var(--color-brand-active); }

.btn-ghost {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: var(--transition-colors);
}
.btn-ghost:hover { background: var(--surface-hover); }

.field { display: block; margin-bottom: var(--space-4); }
.field span { display: block; font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-1); }
.field input {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  font-family: var(--font-ui);
  transition: var(--transition-colors);
}
.field input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }

/* ---- login ---- */
.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--surface-sidebar);
  padding: var(--space-4);
}
.auth-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
}
.auth-card .brand { font-size: var(--text-h2); margin-bottom: var(--space-2); }
.auth-sub { color: var(--text-tertiary); font-size: var(--text-sm); margin: 0 0 var(--space-6); }
.auth-error {
  background: var(--tint-red);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

/* ---- app shell ---- */
.shell { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; }

.sidebar {
  background: var(--surface-sidebar);
  border-right: 1px solid var(--border-default);
  padding: var(--space-5) var(--space-4);
}
.sidebar .brand { margin-bottom: var(--space-6); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-task);
  color: var(--text-secondary);
  transition: var(--transition-colors);
}
.nav-item:hover { background: var(--surface-hover); color: var(--text-primary); }
.nav-dot { width: 8px; height: 8px; border-radius: var(--radius-circle); background: var(--color-brand); flex: none; }
.nav-empty { font-size: var(--text-sm); color: var(--text-muted); padding: var(--space-2) var(--space-3); }

.main { display: flex; flex-direction: column; }
.topbar {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--border-default);
}
.topbar h1 { font-size: var(--text-h2); }
.topbar-right { display: flex; align-items: center; gap: var(--space-4); }
.topbar-right form { margin: 0; }
.user { font-size: var(--text-sm); color: var(--text-tertiary); }

.content { padding: var(--space-6); max-width: 900px; width: 100%; }

/* ---- project sections ---- */
.project { margin-bottom: var(--space-8); }
.project-title { font-size: var(--text-h2); margin: 0 0 var(--space-3); }
.project-title.muted { color: var(--text-tertiary); }
.project-empty { font-size: var(--text-sm); color: var(--text-muted); padding: var(--space-3) 0; }
.nav-dot-muted { background: var(--text-muted); opacity: .5; }
.archived { margin-top: var(--space-6); }
.archived > summary {
  cursor: pointer; font-size: var(--text-sm); color: var(--text-tertiary);
  padding: var(--space-2) 0; list-style: none;
}
.archived > summary::-webkit-details-marker { display: none; }
.archived[open] > summary { margin-bottom: var(--space-4); }
.project-actions { display: flex; gap: var(--space-2); align-items: center; }
.project-actions form { margin: 0; }

/* ---- brief card ---- */
.brief {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.brief-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.brief-head h2 { font-size: var(--text-h3); display: inline; }
.brief-project { font-size: var(--text-sm); color: var(--text-tertiary); margin-left: var(--space-2); }
.brief-time { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.brief-status { color: var(--text-secondary); font-size: var(--text-body); margin: var(--space-3) 0 var(--space-2); }

.tasks { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.task {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--row-height);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-default);
  font-size: var(--text-task);
}
.task-title { flex: 1; }
.task-due { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }

.flag { width: 12px; height: 12px; border-radius: 2px; flex: none; }
.flag-high, .flag-1 { background: var(--priority-1); }
.flag-medium, .flag-2 { background: var(--priority-2); }
.flag-low, .flag-3 { background: var(--priority-3); }
.flag-none, .flag-4 { background: var(--priority-4); opacity: .35; }

.badge {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  text-transform: lowercase;
}
.badge-done, .badge-completed { background: var(--success-bg); color: var(--success); }
.badge-in_progress, .badge-active { background: var(--tint-blue); color: var(--info); }
.badge-blocked { background: var(--tint-red); color: var(--danger); }
.badge-open, .badge-todo { background: var(--sand-100); color: var(--text-tertiary); }

/* ---- empty state ---- */
.empty { text-align: center; color: var(--text-tertiary); padding: var(--space-20) var(--space-4); }
.empty p { margin: 0 0 var(--space-2); }
.empty-sub { font-size: var(--text-sm); color: var(--text-muted); }

/* ---- avatars ---- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius-circle);
  color: #fff; font-size: var(--text-xs); font-weight: var(--weight-bold);
  flex: none; text-transform: uppercase; letter-spacing: 0;
}
.avatar-lg { width: 48px; height: 48px; font-size: var(--text-h3); }

.topbar-user { display: flex; align-items: center; gap: var(--space-2); }
.topbar-user:hover { color: var(--color-brand); }
.btn-danger {
  padding: var(--space-2) var(--space-3); border: 1px solid var(--danger);
  border-radius: var(--radius-sm); background: var(--surface-card);
  color: var(--danger); font-size: var(--text-sm); cursor: pointer;
}
.btn-danger:hover { background: var(--tint-red); }

/* ---- account / admin pages ---- */
.page { max-width: 720px; margin: 0 auto; padding: var(--space-6); }
.page-top { margin-bottom: var(--space-5); }
.page-top h1 { font-size: var(--text-h1); }
.back { font-size: var(--text-sm); color: var(--text-tertiary); }
.back:hover { color: var(--color-brand); }

.card {
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
  padding: var(--space-5); margin-bottom: var(--space-4);
}
.card h2 { font-size: var(--text-h3); margin: 0 0 var(--space-4); }
.card-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.meta { font-size: var(--text-sm); color: var(--text-tertiary); }

.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.stack .field, .row2 .field { margin: 0; }
.field select {
  width: 100%; padding: var(--space-3); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); font-size: var(--text-body); font-family: var(--font-ui);
}
.btn-primary { width: auto; align-self: flex-start; }

.swatches { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.swatch {
  width: 26px; height: 26px; border-radius: var(--radius-circle); cursor: pointer;
  position: relative; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6);
}
.swatch input { position: absolute; opacity: 0; }
.swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--warm-900); }

.flash { padding: var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.flash.ok { background: var(--success-bg); color: var(--success); }
.flash.err { background: var(--tint-red); color: var(--danger); }

.user-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0; border-top: 1px solid var(--border-default);
}
.user-row:first-of-type { border-top: none; }
.user-id { flex: 1; }
.user-actions summary { list-style: none; display: inline-block; }
.user-actions summary::-webkit-details-marker { display: none; }
.user-panel {
  margin-top: var(--space-3); padding: var(--space-4); background: var(--sand-50);
  border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: var(--space-5);
}

/* ---- mobile ---- */
@media (max-width: 720px) {
  .row2 { grid-template-columns: 1fr; }
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .content { padding: var(--space-4); }
  .topbar { padding: 0 var(--space-4); }
}