/* QD Tasks custom styles */

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── CHIPS ────────────────────────────────────────── */

.view-chip,
.status-chip,
.workstream-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  background-color: #f1f5f9;
  color: #475569;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.view-chip:hover,
.status-chip:hover,
.workstream-chip:hover {
  background-color: #e2e8f0;
}

.dark .view-chip,
.dark .status-chip,
.dark .workstream-chip {
  background-color: #1e293b;
  color: #cbd5e1;
}

.dark .view-chip:hover,
.dark .status-chip:hover,
.dark .workstream-chip:hover {
  background-color: #334155;
}

.chip-active {
  background-color: #0f172a !important;
  color: #ffffff !important;
}

.chip-active:hover {
  background-color: #1e293b !important;
}

.dark .chip-active {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

.dark .chip-active:hover {
  background-color: #ffffff !important;
}

/* ── PILLS ────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pill-p1 { background-color: #fee2e2; color: #991b1b; }
.pill-p2 { background-color: #fef3c7; color: #92400e; }
.pill-p3 { background-color: #e0e7ff; color: #3730a3; }
.pill-blocked { background-color: #fee2e2; color: #991b1b; }
.pill-workstream { background-color: #f1f5f9; color: #475569; }

.dark .pill-p1 { background-color: #450a0a; color: #fca5a5; }
.dark .pill-p2 { background-color: #451a03; color: #fcd34d; }
.dark .pill-p3 { background-color: #1e1b4b; color: #a5b4fc; }
.dark .pill-blocked { background-color: #450a0a; color: #fca5a5; }
.dark .pill-workstream { background-color: #1e293b; color: #cbd5e1; }

/* Inline-styled pills replaced with classes */
.pill-scriptable { background-color: #ede9fe; color: #5b21b6; }
.pill-recurrence { background-color: #f1f5f9; color: #475569; }

.dark .pill-scriptable { background-color: #2e1065; color: #c4b5fd; }
.dark .pill-recurrence { background-color: #1e293b; color: #cbd5e1; }

/* ── TASK CARDS ───────────────────────────────────── */

.task-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.task-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.task-card:active {
  background-color: #f8fafc;
}

.dark .task-card {
  background: #0f172a;
  border-color: #1e293b;
}

.dark .task-card:hover {
  border-color: #334155;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.dark .task-card:active {
  background-color: #1e293b;
}

.task-card.scriptable {
  border-left: 3px solid #6366f1;
}

.task-card.blocked {
  border-left: 3px solid #ef4444;
}

.task-card.due-today {
  border-left: 3px solid #dc2626;
  background: linear-gradient(to right, #fef2f2 0%, #ffffff 60%);
}

.dark .task-card.due-today {
  background: linear-gradient(to right, #450a0a 0%, #0f172a 60%);
}

.task-card.due-tomorrow {
  border-left: 3px solid #ea580c;
}

.task-card.stale {
  border-left: 3px solid #94a3b8;
}

/* ── TIER HEADERS ─────────────────────────────────── */

.tier-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  cursor: pointer;
  user-select: none;
}

.tier-header:active { color: #0f172a; }

.dark .tier-header { color: #94a3b8; }
.dark .tier-header:active { color: #f8fafc; }

.tier-count {
  background-color: #e2e8f0;
  color: #475569;
  padding: 1px 7px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
}

.dark .tier-count {
  background-color: #1e293b;
  color: #cbd5e1;
}

/* ── CONNECTION DOT ───────────────────────────────── */

.connection-live { background-color: #22c55e !important; box-shadow: 0 0 0 2px rgba(34,197,94,0.2); }
.connection-stale { background-color: #f59e0b !important; }
.connection-offline { background-color: #94a3b8 !important; }

/* ── ANIMATIONS ───────────────────────────────────── */

#toast { animation: slide-up 0.2s ease-out; }
@keyframes slide-up {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

#modal > div { animation: modal-in 0.2s ease-out; }
@keyframes modal-in {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (min-width: 640px) {
  @keyframes modal-in {
    from { transform: scale(0.96); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }
}

#fab-add {
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  right: calc(1.5rem + env(safe-area-inset-right));
}

.tabular-nums { font-variant-numeric: tabular-nums; }

.task-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease, margin-top 0.2s ease;
  margin-top: 0;
}

.task-card.expanded .task-details {
  max-height: 600px;
  margin-top: 12px;
}

/* ── AGE DOTS ─────────────────────────────────────── */

.age-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  margin-right: 4px;
}

.age-dot-today { background-color: #dc2626; }
.age-dot-tomorrow { background-color: #ea580c; }
.age-dot-stale { background-color: #94a3b8; }
.age-dot-overdue { background-color: #b91c1c; animation: pulse 2s infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── WORKSTREAM CHIP COLORS ───────────────────────── */

.workstream-chip[data-ws="ai_ops"] { background-color: #ede9fe; color: #5b21b6; }
.workstream-chip[data-ws="deals"] { background-color: #dbeafe; color: #1e40af; }
.workstream-chip[data-ws="admin"] { background-color: #f1f5f9; color: #475569; }
.workstream-chip[data-ws="revenue"] { background-color: #d1fae5; color: #065f46; }
.workstream-chip[data-ws="metadata"] { background-color: #fef3c7; color: #92400e; }
.workstream-chip[data-ws="partnerships"] { background-color: #fce7f3; color: #9d174d; }
.workstream-chip[data-ws="avails"] { background-color: #cffafe; color: #155e75; }
.workstream-chip[data-ws="finance"] { background-color: #d1fae5; color: #065f46; }
.workstream-chip[data-ws="sell_sheets"] { background-color: #fed7aa; color: #9a3412; }
.workstream-chip[data-ws="delivery"] { background-color: #e0e7ff; color: #3730a3; }
.workstream-chip[data-ws="marketing"] { background-color: #fbcfe8; color: #831843; }

.dark .workstream-chip[data-ws="ai_ops"] { background-color: #2e1065; color: #c4b5fd; }
.dark .workstream-chip[data-ws="deals"] { background-color: #172554; color: #93c5fd; }
.dark .workstream-chip[data-ws="admin"] { background-color: #1e293b; color: #cbd5e1; }
.dark .workstream-chip[data-ws="revenue"] { background-color: #022c22; color: #6ee7b7; }
.dark .workstream-chip[data-ws="metadata"] { background-color: #451a03; color: #fcd34d; }
.dark .workstream-chip[data-ws="partnerships"] { background-color: #500724; color: #f9a8d4; }
.dark .workstream-chip[data-ws="avails"] { background-color: #083344; color: #67e8f9; }
.dark .workstream-chip[data-ws="finance"] { background-color: #022c22; color: #6ee7b7; }
.dark .workstream-chip[data-ws="sell_sheets"] { background-color: #431407; color: #fdba74; }
.dark .workstream-chip[data-ws="delivery"] { background-color: #1e1b4b; color: #a5b4fc; }
.dark .workstream-chip[data-ws="marketing"] { background-color: #500724; color: #f9a8d4; }

.workstream-chip.chip-active {
  background-color: #0f172a !important;
  color: #ffffff !important;
}

.dark .workstream-chip.chip-active {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* ── WORKSTREAM PILL COLORS ───────────────────────── */

.pill-ws-ai_ops { background-color: #ede9fe; color: #5b21b6; }
.pill-ws-deals { background-color: #dbeafe; color: #1e40af; }
.pill-ws-admin { background-color: #f1f5f9; color: #475569; }
.pill-ws-revenue { background-color: #d1fae5; color: #065f46; }
.pill-ws-metadata { background-color: #fef3c7; color: #92400e; }
.pill-ws-partnerships { background-color: #fce7f3; color: #9d174d; }
.pill-ws-avails { background-color: #cffafe; color: #155e75; }
.pill-ws-finance { background-color: #d1fae5; color: #065f46; }
.pill-ws-sell_sheets { background-color: #fed7aa; color: #9a3412; }
.pill-ws-delivery { background-color: #e0e7ff; color: #3730a3; }
.pill-ws-marketing { background-color: #fbcfe8; color: #831843; }

.dark .pill-ws-ai_ops { background-color: #2e1065; color: #c4b5fd; }
.dark .pill-ws-deals { background-color: #172554; color: #93c5fd; }
.dark .pill-ws-admin { background-color: #1e293b; color: #cbd5e1; }
.dark .pill-ws-revenue { background-color: #022c22; color: #6ee7b7; }
.dark .pill-ws-metadata { background-color: #451a03; color: #fcd34d; }
.dark .pill-ws-partnerships { background-color: #500724; color: #f9a8d4; }
.dark .pill-ws-avails { background-color: #083344; color: #67e8f9; }
.dark .pill-ws-finance { background-color: #022c22; color: #6ee7b7; }
.dark .pill-ws-sell_sheets { background-color: #431407; color: #fdba74; }
.dark .pill-ws-delivery { background-color: #1e1b4b; color: #a5b4fc; }
.dark .pill-ws-marketing { background-color: #500724; color: #f9a8d4; }