/* Tabelweergave - Monday.com stijl */
.table-view {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.table-actions {
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.table-wrapper {
  flex: 1;
  overflow: auto;
  padding: 0 24px 24px;
}

.task-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.task-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.task-table th {
  background: var(--bg-surface);
  padding: 10px 12px;
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  user-select: none;
}

.task-table th.sortable {
  cursor: pointer;
}

.task-table th.sortable:hover {
  color: var(--text-primary);
}

.task-table th.sortable::after {
  content: ' \2195';
  font-size: 10px;
  color: var(--text-light);
}

.task-table th.sorted-asc::after {
  content: ' \2191';
  color: var(--accent);
}

.task-table th.sorted-desc::after {
  content: ' \2193';
  color: var(--accent);
}

/* Column widths */
.col-checkbox { width: 40px; text-align: center; }
.col-task { min-width: 250px; }
.col-owner { width: 120px; }
.col-status { width: 140px; }
.col-startdate { width: 120px; }
.col-deadline { width: 120px; }
.col-priority { width: 120px; }
.col-labels { width: 160px; }
.col-notes { min-width: 200px; }
.col-actions { width: 40px; }

.task-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.task-table tr {
  transition: background var(--transition);
}

.task-table tbody tr:hover {
  background: var(--accent-light);
}

.task-table td.col-checkbox {
  text-align: center;
}

/* Taak titel cel */
.task-title-cell {
  font-weight: 500;
  cursor: text;
}

.task-title-cell:hover {
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
}

/* Status badge in tabel */
.status-cell {
  cursor: pointer;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: #fff;
  min-width: 110px;
  text-align: center;
  letter-spacing: 0.2px;
  transition: opacity var(--transition);
}

.status-badge:hover {
  opacity: 0.85;
}

/* Prioriteit badge in tabel */
.priority-cell {
  cursor: pointer;
}

.priority-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 3px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: #fff;
  min-width: 90px;
  text-align: center;
}

/* Notes cel */
.notes-cell {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
}

.notes-cell:hover {
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
}

/* Status dropdown in cel */
.status-dropdown,
.priority-dropdown {
  position: absolute;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 50;
  padding: 4px 0;
  min-width: 140px;
}

.status-option,
.priority-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: background var(--transition);
}

.status-option:hover,
.priority-option:hover {
  background: var(--bg-primary);
}

.status-option .color-dot,
.priority-option .color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Deadline cel */
.deadline-cell {
  cursor: pointer;
  font-size: var(--font-size-sm);
}

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

.deadline-cell .urgency-icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}

.deadline-cell .urgency-icon.high {
  background: var(--danger);
}

.deadline-cell .urgency-icon.medium {
  background: var(--warning);
}

/* New task row */
.new-task-row td {
  padding: 4px 12px;
}

.new-task-input {
  width: 100%;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  outline: none;
  background: transparent;
  font-size: var(--font-size-md);
}

.new-task-input:focus {
  border-color: var(--accent);
  background: var(--bg-surface);
}

.new-task-input::placeholder {
  color: var(--text-light);
}

/* Bulk action bar */
.bulk-action-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 24px;
  background: var(--accent-light, #e8f0fe);
  border-bottom: 1px solid var(--border);
}

.bulk-count {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--accent);
  margin-right: 8px;
}

/* Bulk picker dropdown (pops up above bar) */
.bulk-picker-dropdown {
  position: fixed;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 100;
  padding: 4px 0;
  min-width: 180px;
}

/* Checkbox styling in table */
.task-table td.col-checkbox input[type="checkbox"],
.task-table th.col-checkbox input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
}