/* ============================================================
   GadgetCity Todo — Tasks Styles (Table, Cards, Detail)
   ============================================================ */

/* ── Filter Bar ── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap
}

.filter-bar .form-select,
.filter-bar .form-input {
  width: auto;
  min-width: 140px;
  height: 38px;
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-3)
}

.filter-bar .form-select {
  padding-right: 28px
}

.filter-bar .search-input {
  flex: 1;
  min-width: 200px;
  max-width: 320px
}

.filter-bar .btn {
  height: 38px
}

.filter-actions {
  margin-left: auto;
  display: flex;
  gap: var(--space-2);
  align-items: center
}

/* ── Tasks Table (Desktop) ── */
.tasks-table-wrapper {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden
}

.tasks-table {
  width: 100%
}

.tasks-table thead {
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200)
}

.tasks-table th {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: left;
  white-space: nowrap
}

.tasks-table td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  border-bottom: 1px solid var(--color-gray-100);
  vertical-align: middle
}

.tasks-table tbody tr {
  transition: background var(--transition-fast);
  cursor: pointer
}

.tasks-table tbody tr:hover {
  background: var(--color-gray-50)
}

.tasks-table tbody tr:last-child td {
  border-bottom: none
}

.task-title-cell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 200px
}

.task-title-text {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px
}

.task-title-text.overdue {
  color: var(--color-danger)
}

.task-deadline-cell {
  white-space: nowrap
}

.task-deadline-cell.overdue {
  color: var(--color-danger);
  font-weight: var(--font-weight-medium)
}

.task-deadline-cell.due-today {
  color: var(--color-warning-dark);
  font-weight: var(--font-weight-medium)
}

.task-actions-cell {
  display: flex;
  gap: var(--space-1)
}

/* ── Tasks Cards (Mobile) ── */
.tasks-cards {
  display: none;
  flex-direction: column;
  gap: var(--space-3)
}

.task-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-fast);
  cursor: pointer
}

.task-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px)
}

.task-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px
}

.task-card.priority-low::before {
  background: var(--color-gray-300)
}

.task-card.priority-medium::before {
  background: var(--color-warning)
}

.task-card.priority-high::before {
  background: var(--color-danger)
}

.task-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-3)
}

.task-card-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  flex: 1;
  margin-right: var(--space-2)
}

.task-card-badges {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3)
}

.task-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-gray-100)
}

.task-card-deadline {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  display: flex;
  align-items: center;
  gap: var(--space-1)
}

.task-card-deadline.overdue {
  color: var(--color-danger);
  font-weight: var(--font-weight-medium)
}

.task-card-deadline.due-today {
  color: var(--color-warning-dark);
  font-weight: var(--font-weight-medium)
}

/* ── Task Detail ── */
.task-detail {
  max-width: 900px
}

.task-detail-header {
  margin-bottom: var(--space-6)
}

.task-detail-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--space-4);
  cursor: pointer;
  transition: color var(--transition-fast)
}

.task-detail-back:hover {
  color: var(--color-gray-700)
}

.task-detail-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3)
}

.task-detail-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  flex: 1
}

.task-detail-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0
}

.task-detail-badges {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4)
}

/* ── Task Detail Grid ── */
.task-detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-6)
}

.task-detail-main {
  min-width: 0
}

.task-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4)
}

/* ── Task Info Panel ── */
.task-info-panel {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-5)
}

.task-info-panel h4 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
  color: var(--color-gray-900)
}

.task-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-gray-100)
}

.task-info-row:last-child {
  border-bottom: none
}

.task-info-label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500)
}

.task-info-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-800)
}

/* ── Task Description ── */
.task-description-section {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-6)
}

.task-description-section h3 {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-3)
}

.task-description-content {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: var(--line-height-relaxed);
  white-space: pre-wrap
}

/* ── Assignees ── */
.task-assignees {
  display: flex;
  flex-direction: column;
  gap: var(--space-2)
}

.task-assignee {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md)
}

.task-assignee-name {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700)
}

/* ── Attachments ── */
.attachments-section {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-6)
}

.attachments-section h3 {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2)
}

.attachments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3)
}

.attachment-item {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: all var(--transition-fast)
}

.attachment-item:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300)
}

.attachment-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-primary-50);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.attachment-info {
  flex: 1;
  min-width: 0
}

.attachment-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.attachment-size {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400)
}

.attachment-upload {
  border: 2px dashed var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast)
}

.attachment-upload:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-50)
}

.attachment-upload-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--space-2);
  color: var(--color-gray-400)
}

.attachment-upload-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500)
}

.attachment-upload-hint {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  margin-top: var(--space-1)
}

/* ── Comments ── */
.comments-section {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-6)
}

.comments-section h3 {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2)
}

.comment-form {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-gray-100)
}

.comment-form .form-textarea {
  min-height: 60px;
  flex: 1
}

.comment-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-gray-100)
}

.comment-item:last-child {
  border-bottom: none
}

.comment-author {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-800)
}

.comment-time {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  margin-left: var(--space-2)
}

.comment-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: var(--line-height-relaxed);
  margin-top: var(--space-1)
}

/* ── Activity Log ── */
.activity-section {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-5)
}

.activity-section h3 {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2)
}

.activity-timeline {
  position: relative;
  padding-left: var(--space-6)
}

.activity-timeline::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-gray-200)
}

.activity-item {
  position: relative;
  padding-bottom: var(--space-4)
}

.activity-item:last-child {
  padding-bottom: 0
}

.activity-dot {
  position: absolute;
  left: calc(var(--space-6) * -1 + 4px);
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-gray-300);
  border: 2px solid var(--color-white)
}

.activity-dot.created {
  background: var(--color-success)
}

.activity-dot.updated {
  background: var(--color-info)
}

.activity-dot.status {
  background: var(--color-warning)
}

.activity-dot.assigned {
  background: var(--color-primary)
}

.activity-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600)
}

.activity-text strong {
  color: var(--color-gray-800)
}

.activity-time {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  margin-top: 2px
}

/* ── Pagination ── */
.pagination-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) 0;
  gap: var(--space-3)
}

.pagination-info {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500)
}

/* ── User Sections (Admin) ── */
.user-section {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-4);
  overflow: hidden
}

.user-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
  cursor: pointer;
  user-select: none;
  min-height: 48px
}

.user-section-left {
  display: flex;
  align-items: center;
  gap: var(--space-3)
}

.user-section-chevron {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  width: 16px;
  text-align: center;
  transition: transform var(--transition-fast)
}

.user-section-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-800)
}

.user-section-count {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  min-width: 20px;
  text-align: center
}

.user-section-add {
  font-size: var(--font-size-xs) !important;
  white-space: nowrap
}

.user-section-tasks {
  transition: max-height .3s ease, opacity .2s ease;
  overflow: hidden
}

.user-section-tasks.collapsed {
  max-height: 0 !important;
  opacity: 0;
  padding: 0
}

/* ── Date Groups (New Grouping) ── */
.date-group-header {
  padding: var(--space-2) var(--space-4);
  background: var(--color-gray-100);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--color-gray-200);
  border-top: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  gap: var(--space-2)
}

.date-group-header:first-child {
  border-top: none
}

.date-group-header .badge {
  background: var(--color-gray-200);
  color: var(--color-gray-700);
  padding: 2px 6px;
  border-radius: var(--radius-full);
  font-size: 10px
}

.date-group-content {
  display: flex;
  flex-direction: column
}

/* ── Task Row (Unified Card Row) ── */
.task-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-gray-100);
  transition: background var(--transition-fast), transform var(--transition-fast);
  position: relative
}

.task-row:last-child {
  border-bottom: none
}

.task-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px
}

.task-row.priority-stripe-low::before {
  background: var(--color-gray-300)
}

.task-row.priority-stripe-medium::before {
  background: var(--color-warning)
}

.task-row.priority-stripe-high::before {
  background: var(--color-danger)
}

.task-row-check {
  flex-shrink: 0
}

.task-row-main {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  padding: var(--space-1) 0
}

.task-row-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.task-row-meta {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-1)
}

.task-meta-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  white-space: nowrap
}

.task-meta-tag.repeat {
  background: var(--color-primary-50);
  color: var(--color-primary-700)
}

.task-meta-tag.once {
  background: var(--color-gray-50);
  color: var(--color-gray-400)
}

.task-meta-tag.time {
  background: var(--color-info-light);
  color: var(--color-info-dark)
}

.task-meta-tag.overdue {
  background: var(--color-danger-light);
  color: var(--color-danger-dark)
}

.task-meta-tag.due-today {
  background: var(--color-warning-light);
  color: var(--color-warning-dark)
}

.task-row-badges {
  flex-shrink: 0
}

.task-row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0
}

/* ── Quick Status Select ── */
.quick-status-select {
  font-size: var(--font-size-xs);
  padding: 2px 4px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-gray-700);
  cursor: pointer;
  height: 28px;
  min-width: 90px
}

.quick-status-select:disabled {
  opacity: .5;
  cursor: not-allowed
}

/* Quick Complete */
.btn-success-ghost {
  color: var(--color-success);
  border: 1px solid var(--color-success);
  background: transparent;
  font-weight: var(--font-weight-bold);
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md)
}

.btn-success-ghost:disabled {
  opacity: .4;
  cursor: not-allowed
}

/* ── Drag & Drop ── */
.task-row[draggable="true"] {
  cursor: grab
}

.task-row.dragging {
  opacity: .4;
  background: var(--color-primary-50)
}

.task-row.drag-over {
  box-shadow: 0 -2px 0 0 var(--color-primary) inset
}

/* ── User Task List (Employee View) ── */
.user-task-list {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden
}

/* ── Mobile: hide table, show task rows ── */
@media(max-width:768px) {
  .task-row {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3)
  }

  .task-row-main {
    flex-basis: 100%;
    order: 1
  }

  .task-row-check {
    order: 0
  }

  .task-row-badges {
    order: 2
  }

  .task-row-actions {
    order: 3;
    width: 100%;
    justify-content: flex-end;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-gray-100)
  }

  .user-section-header {
    flex-wrap: wrap;
    gap: var(--space-2)
  }

  .quick-status-select {
    flex: 1
  }
}