.tasks-page {
  --tasks-search-width: 320px;
  --tasks-table-min-width: 980px;
  --tasks-checkbox-size: var(--space-11);
  --tasks-date-min-width: 50px;
  display: grid;
  gap: var(--space-12);
}

.tasks-head-actions {
  display: inline-flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.tasks-head-actions .button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
}

.tasks-board {
  display: grid;
  gap: var(--space-9);
}

.tasks-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}

.panel-card--inner {
  padding: var(--card-padding-inner);
}

.tasks-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-8);
}

.tasks-tabs button {
  border: none;
  background: transparent;
  color: var(--color-gray-800);
  font-weight: 700;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.tasks-tabs button.is-active {
  color: var(--color-primary);
  background: var(--bg-blue-subtle);
}

.tasks-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.tasks-toolbar--compact {
  margin-bottom: 0;
}

.tasks-collapsible {
  border: 1px solid var(--color-border-light);
  border-radius: var(--r-lg);
  background: var(--color-surface);
}

.tasks-collapsible > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-6) var(--space-8);
  font-weight: 700;
  color: var(--color-gray-900);
}

.tasks-collapsible > summary::-webkit-details-marker {
  display: none;
}

.tasks-collapsible[open] > summary {
  border-bottom: 1px solid var(--color-border-light);
}

.tasks-collapsible > .tasks-toolbar,
.tasks-collapsible > .panel-flow {
  padding: var(--space-8);
}

.tasks-search {
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  min-width: min(var(--tasks-search-width), 100%);
  width: var(--tasks-search-width);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--search-padding-y) var(--search-padding-x);
  background: var(--color-surface);
}

.tasks-search input {
  border: none;
  outline: none;
  width: 100%;
  font-size: var(--text-base4);
}

.tasks-search span {
  color: var(--color-gray-700);
  display: inline-flex;
}

.tasks-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border-light);
  border-radius: var(--r-xl);
}

.tasks-table {
  width: 100%;
  border-collapse: collapse;
  min-width: var(--tasks-table-min-width);
}

.tasks-table th,
.tasks-table td {
  text-align: left;
  padding: var(--table-cell-padding);
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}

.tasks-table th {
  font-size: var(--text-sm9);
  color: var(--color-gray-800);
  font-weight: 700;
}

.task-title-cell {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.task-title-cell input[type="checkbox"] {
  width: var(--tasks-checkbox-size);
  height: var(--tasks-checkbox-size);
}

.task-title-cell strong {
  display: block;
}

.task-title-cell small,
.tasks-table td small {
  color: var(--color-gray-700);
  font-size: var(--text-sm6);
}

.task-tag,
.task-priority,
.task-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 700;
}

.task-tag--blue {
  color: var(--text-info);
  background: var(--bg-blue-wash);
}

.task-tag--orange {
  color: var(--text-warning-bold);
  background: var(--bg-orange-pale);
}

.task-tag--purple {
  color: var(--text-purple);
  background: var(--bg-purple-pale);
}

.task-tag--yellow {
  color: var(--text-warning);
  background: var(--bg-orange-subtle);
}

.task-tag--cyan {
  color: var(--text-teal);
  background: var(--bg-cyan-subtle);
}

.task-tag--green {
  color: var(--text-success);
  background: var(--bg-green-subtle);
}

.task-priority--low {
  color: var(--color-gray-800);
  background: var(--color-gray-150);
}

.task-priority--medium {
  color: var(--text-warning-bold);
  background: var(--bg-orange-pale);
}

.task-priority--high,
.task-priority--critical {
  color: var(--text-danger);
  background: var(--bg-red-subtle);
}

.task-status--open {
  color: var(--text-info);
  background: var(--bg-blue-wash);
}

.task-status--progress {
  color: var(--text-success);
  background: var(--bg-green-subtle);
}

.task-status--danger {
  color: var(--text-danger);
  background: var(--bg-red-subtle);
}

.task-status--done {
  color: var(--color-gray-800);
  background: var(--color-gray-150);
}

.task-status--muted {
  color: var(--color-gray-700);
  background: var(--color-gray-100);
}

.task-due--danger {
  color: var(--text-danger);
}

.task-due--warning {
  color: var(--text-warning);
}

.task-due--neutral {
  color: var(--color-gray-700);
}

.tasks-footer {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  color: var(--color-gray-700);
  font-size: var(--text-base);
}

.tasks-side-grid {
  display: grid;
  gap: var(--space-8);
}

.appointments-list,
.deadlines-list {
  display: grid;
  gap: var(--space-5);
}

.appointment-item,
.deadline-item {
  border: 1px solid var(--color-border-light);
  border-radius: var(--r-xl);
  padding: var(--space-6);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
}

.appointment-date {
  min-width: var(--tasks-date-min-width);
  text-align: center;
  border: 1px solid var(--color-border-light);
  border-radius: var(--r-md);
  padding: var(--space-4);
  background: var(--color-gray-50);
}

.appointment-date strong {
  display: block;
  font-size: var(--text-md5);
}

.appointment-date small {
  color: var(--color-gray-700);
  font-size: var(--text-xs);
}

.appointment-meta {
  display: grid;
  gap: var(--space-1);
}

.appointment-meta small,
.appointment-meta p,
.deadline-item p,
.deadline-meta small {
  color: var(--color-gray-700);
  font-size: var(--text-sm7);
}

.deadline-meta {
  display: grid;
  justify-items: end;
  gap: var(--space-2);
}

.tasks-tip {
  border: 1px solid var(--bg-blue-soft);
  background: var(--bg-blue-hint);
  border-radius: var(--r-xl);
  padding: var(--space-8);
  display: grid;
  gap: var(--space-5);
}

.tasks-tip p {
  color: var(--text-info-deep);
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-base);
}

.icon-button {
  border: 1px solid var(--color-border-light);
  background: var(--color-surface);
  border-radius: var(--r-sm);
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  color: var(--color-gray-900);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1399px) {
  .tasks-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .tasks-search {
    width: 100%;
    min-width: 0;
  }

  .tasks-footer {
    flex-wrap: wrap;
  }

  .appointment-item,
  .deadline-item {
    flex-wrap: wrap;
  }
}