/* ---------------------------------------------------------------------------
   Tabs
   --------------------------------------------------------------------------- */
.task-view {
  padding-top: 18px;
}

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-3);
  white-space: nowrap;
  transition: color 100ms var(--ease);
}

.tab:hover {
  color: var(--text);
}

.tab.is-active {
  color: var(--text);
}

.tab.is-active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
}

.tab-count {
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--bg-active);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.tab-empty {
  padding: 40px 12px;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
}

.tab-empty .add-row {
  margin-top: 12px;
  padding: 0;
}

.task-view .filter-bar {
  padding: 12px 0 12px;
}

/* ---------------------------------------------------------------------------
   Table
   --------------------------------------------------------------------------- */
.task-table {
  --tt-cols: minmax(260px, 1fr) 150px 190px 150px 124px 200px 140px 44px;
  border-top: 1px solid var(--border);
}

.tt-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--tt-cols);
  align-items: stretch;
  min-height: 48px;
  border-bottom: 1px solid var(--border);
}

.tt-body .tt-row {
  cursor: pointer;
  transition: background-color 90ms var(--ease);
}

.tt-body .tt-row:hover {
  background: rgba(255, 255, 255, 0.025);
}

.tt-body .tt-row.is-selected {
  background: var(--bg-selected);
}

.tt-cell {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 10px;
  border-right: 1px solid var(--border);
}

.tt-cell:last-child,
.tt-c-date {
  border-right: 0;
}

.tt-head {
  min-height: 40px;
}

.tt-head .tt-cell {
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  white-space: nowrap;
}

/* Urgent rows: slim red marker at the left edge */
.tt-body .tt-row.priority-urgent::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 2px;
  border-radius: 2px;
  background: var(--priority-urgent);
}

.tt-body .tt-row.priority-high::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 2px;
  border-radius: 2px;
  background: #e8834a; /* same orange as the High pill */
}

.tt-body .tt-row.is-done.priority-urgent::before,
.tt-body .tt-row.is-done.priority-high::before {
  opacity: 0.35;
}

.tt-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 12px 2px;
}

.tt-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
}

.tt-row.is-done .tt-title-text {
  color: var(--text-3);
  font-weight: 500;
}

/* Clickable pill cells */
.tt-pick {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 32px;
  padding: 0 6px;
  margin-left: -6px;
  border-radius: var(--radius);
  transition: background-color 100ms var(--ease);
}

.tt-pick:hover,
.tt-pick[aria-expanded="true"] {
  background: var(--bg-hover);
}

.tt-pick .person {
  font-size: 14px;
}

.tt-empty {
  font-size: 13px;
  color: var(--text-4);
  opacity: 0;
  transition: opacity 100ms var(--ease);
}

.tt-row:hover .tt-empty,
.tt-pick:focus-visible .tt-empty {
  opacity: 1;
}

.tt-c-creator .person {
  font-size: 14px;
  color: var(--text-2);
}

.tt-c-date {
  font-size: 13.5px;
  color: var(--text-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tt-c-more {
  justify-content: center;
  padding: 0;
}

.tt-more-btn {
  opacity: 0;
}

.tt-row:hover .tt-more-btn,
.tt-more-btn:focus-visible,
.tt-more-btn[aria-expanded="true"] {
  opacity: 1;
}

.task-table .add-row {
  border-bottom: 1px solid var(--border);
}

/* ---------------------------------------------------------------------------
   Pills
   --------------------------------------------------------------------------- */
.pill {
  --pill: #8e8d88;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 11px;
  border-radius: 13px;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  color: color-mix(in srgb, var(--pill) 45%, #f4f4f2);
  background: color-mix(in srgb, var(--pill) 22%, transparent);
}

.pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pill);
}

.pill-status.status-todo { --pill: #9a9994; color: var(--text-2); background: rgba(255, 255, 255, 0.08); }
.pill-status.status-in_progress { --pill: var(--status-progress); }
.pill-status.status-done { --pill: var(--status-done); }

/* Priority pills are a little squarer, like tags */
.pill-priority {
  border-radius: 6px;
  padding: 0 10px;
}

.pill-priority.priority-low { --pill: #7f8a99; }
.pill-priority.priority-medium { --pill: #d9a640; }
.pill-priority.priority-high { --pill: #e8834a; }
.pill-priority.priority-urgent {
  --pill: var(--priority-urgent);
  color: #fff3f2;
  background: color-mix(in srgb, var(--pill) 62%, transparent);
  font-weight: 650;
}

.pill-bang {
  font-weight: 800;
}

.tt-row.is-done .pill-priority {
  opacity: 0.6;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 1400px) {
  .task-table {
    --tt-cols: minmax(220px, 1fr) 140px 170px 140px 116px 170px 120px 44px;
  }
}

@media (max-width: 1100px) {
  .task-table {
    --tt-cols: minmax(180px, 1fr) 136px 160px 130px 112px 160px 44px;
  }

  .tt-c-date {
    display: none !important;
  }
}

/* Phones and narrow windows: each task becomes a compact card. */
@media (max-width: 860px) {
  .tt-row.tt-head {
    display: none;
  }

  .tt-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    padding: 10px 8px 12px 10px;
  }

  .tt-cell {
    border-right: 0;
    padding: 0;
  }

  .tt-c-title {
    flex: 1 0 calc(100% - 44px);
    order: 0;
  }

  .tt-c-more {
    order: 1;
    width: 34px;
  }

  .tt-c-status, .tt-c-category, .tt-c-area, .tt-c-priority, .tt-c-worker {
    order: 2;
  }

  .tt-title {
    padding: 2px 0 4px;
  }

  .tt-pick {
    margin-left: 0;
  }

  .tt-more-btn {
    opacity: 1;
  }

  .tt-empty {
    opacity: 1;
  }

  .tt-c-category .tt-empty,
  .tt-c-area .tt-empty {
    font-size: 0;
  }

  .tt-c-category .tt-empty::before {
    content: "+ Category";
    font-size: 13px;
  }

  .tt-c-area .tt-empty::before {
    content: "+ Area";
    font-size: 13px;
  }
}