/* src/client/tasks-kanban.css */
.td-kanban {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
}
.td-kanban-notice {
  border: 0.0625rem solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  color: var(--muted);
  padding: 0.625rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 650;
}
.td-kanban-notice.is-loading {
  color: var(--primary);
  background: var(--primary-soft);
}
.td-kanban-kit {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 0.875rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  scrollbar-gutter: stable;
}
.td-kanban-column {
  width: min(19.875rem, calc(100vw - 4.5rem));
  min-width: 17.875rem;
  max-width: 20.625rem;
  overflow: hidden;
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 82%, var(--primary));
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--control-bg) 88%, var(--surface));
  box-shadow: 0 0.75rem 1.875rem rgba(15, 23, 42, 0.08);
}
.td-kanban-column .rkk-column,
.td-kanban-column .rkk-column-wrapper {
  height: 100%;
}
.rkk-column-outer .rkk-column-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
  max-height: 100%;
}
.td-kanban-kit .rkk-column-outer .rkk-column {
  background-color: var(--surface);
}
.td-kanban-kit .rkk-column-content-list {
  -ms-overflow-style: none;
  scrollbar-width: none !important;
}
.td-kanban-kit .rkk-column-content-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.td-kanban-column-head {
  border-bottom: 0.0625rem solid var(--line-soft);
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--primary-soft) 62%, transparent),
      transparent 70%),
    color-mix(in srgb, var(--surface) 78%, var(--control-bg));
}
.td-kanban-column-head.is-reorderable {
  cursor: grab;
  user-select: none;
}
.td-kanban-column-head.is-reorderable:active {
  cursor: grabbing;
}
.td-column-header {
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.6875rem 0.75rem 0;
}
.td-column-header-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.3125rem;
}
.td-column-drag-handle {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--muted) 72%, var(--primary));
  font-size: 1rem;
}
.td-column-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-column-drop-indicator {
  width: 0.25rem;
  height: 100%;
  min-height: 12rem;
  border-radius: 62.4375rem;
  background: var(--primary);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--primary-soft) 82%, transparent);
}
.td-column-header span {
  overflow: hidden;
  color: var(--panel-title);
  font-size: 0.7812rem;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-column-header .td-column-drag-handle {
  overflow: visible;
  color: color-mix(in srgb, var(--muted) 72%, var(--primary));
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
}
.td-column-header strong {
  min-width: 1.625rem;
  min-height: 1.375rem;
  display: inline-grid;
  place-items: center;
  border-radius: 62.4375rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 24%, transparent);
  background: color-mix(in srgb, var(--primary-soft) 74%, var(--surface));
  color: var(--primary);
  font-size: 0.6875rem;
}
.td-kanban-column.tone-pending {
  border-top: 0.1875rem solid var(--primary);
}
.td-kanban-column.tone-waiting {
  border-top: 0.1875rem solid #f59e0b;
}
.td-kanban-column.tone-success {
  border-top: 0.1875rem solid #22c55e;
}
.td-kanban-column.tone-error {
  border-top: 0.1875rem solid #ef4444;
}
.td-kanban-column.tone-custom {
  border-top: 0.1875rem solid #64748b;
}
.td-kanban-column.is-collapsed {
  width: 13.25rem;
  min-width: 12rem;
  max-width: 13.25rem;
}
.td-kanban-column.is-collapsed .rkk-column-content {
  display: none;
}
.td-kanban-column-list {
  min-height: 26.875rem;
  padding: 0.625rem;
  background: transparent;
  padding-top: 0;
}
.td-kanban-card-wrap {
  border-radius: var(--radius-sm);
  margin: 0.25rem 0;
}
.td-task-card {
  display: grid;
  gap: 0.5625rem;
  border: 0.0625rem solid var(--line-soft);
  border-top: 0.125rem solid var(--primary);
  border-radius: 0.4375rem;
  background: var(--surface);
  padding: 0.6875rem;
  box-shadow: 0 0.0625rem 0 rgba(15, 23, 42, 0.05), 0 0.5rem 1.125rem rgba(15, 23, 42, 0.05);
  cursor: grab;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}
.td-task-card:hover {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line-soft));
  box-shadow: 0 0.125rem 0 rgba(15, 23, 42, 0.04), 0 0.875rem 1.625rem rgba(124, 58, 237, 0.13);
  transform: translateY(-0.0625rem);
}
.td-task-card:active {
  cursor: grabbing;
}
.td-task-cover {
  min-height: 6rem;
  overflow: hidden;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.375rem;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary-soft) 64%, transparent),
      transparent),
    color-mix(in srgb, var(--control-bg) 88%, var(--surface));
  pointer-events: none;
  user-select: none;
}
.td-task-cover.is-image {
  height: 7.875rem;
}
.td-task-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.td-task-cover.is-file {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.3125rem;
  padding: 0.875rem;
  text-align: center;
}
.td-task-cover.is-file .material-symbols-rounded {
  width: 2.375rem;
  height: 2.375rem;
  display: inline-grid;
  place-items: center;
  border-radius: 0.625rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.4375rem;
}
.td-task-cover.is-file strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--panel-title);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-task-cover.is-file small {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.6562rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-task-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.625rem;
}
.td-task-card strong {
  min-width: 0;
  color: var(--panel-title);
  font-size: 0.7812rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.td-task-card-id {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-task-card header span {
  flex: 0 0 auto;
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--primary-soft) 78%, var(--surface));
  color: var(--primary);
  padding: 0.1875rem 0.4375rem;
  font-size: 0.625rem;
  font-weight: 850;
}
.td-task-card-values {
  min-width: 0;
  display: grid;
  gap: 0.375rem;
}
.td-task-card-values span,
.td-task-card-values em {
  min-width: 0;
  display: block;
  overflow: hidden;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--control-bg) 84%, var(--surface));
  color: var(--muted);
  padding: 0.3125rem 0.4375rem;
  font-size: 0.7188rem;
  font-style: normal;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-task-card-values .td-task-card-list-value {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border-color: color-mix(in srgb, var(--td-list-color) 34%, var(--line-soft));
  background: color-mix(in srgb, var(--td-list-color) 13%, var(--surface));
  color: color-mix(in srgb, var(--td-list-color) 66%, var(--text));
}
.td-task-card-list-value > i {
  width: 0.4375rem;
  height: 0.4375rem;
  flex: 0 0 0.4375rem;
  border-radius: 50%;
  background: var(--td-list-color);
  box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--td-list-color) 18%, transparent);
}
.td-task-card-list-value > b {
  min-width: 0;
  overflow: hidden;
  font-size: inherit;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-task-card-values .td-task-card-relation-values {
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  overflow: hidden;
}
.td-task-card-values .td-task-card-relation-tag {
  min-width: 0;
  width: auto;
  min-height: 1.375rem;
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  border-color: color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface));
  color: var(--primary-strong);
  padding: 0 0.4375rem;
  font-size: 0.6875rem;
  font-weight: 780;
  text-overflow: ellipsis;
}
.td-task-card-values .td-task-card-relation-tag.is-more {
  flex: 0 0 auto;
  color: var(--primary);
  font-weight: 900;
}
.td-task-card footer,
.td-task-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-top: 0.0625rem solid var(--line-soft);
  padding-top: 0.5rem;
  color: var(--muted);
  font-size: 0.6562rem;
}
.td-task-card-icons {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}
.td-task-card-icon,
.td-task-card-comment-badge {
  min-width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--control-bg) 84%, var(--surface));
  color: var(--muted);
  line-height: 1;
}
.td-task-card-icon .material-symbols-rounded,
.td-task-card-comment-badge .material-symbols-rounded {
  width: 0.875rem;
  height: 0.875rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1;
}
.td-task-card-icon.is-processed {
  border-color: color-mix(in srgb, #22c55e 28%, var(--line-soft));
  background: color-mix(in srgb, #22c55e 13%, var(--surface));
  color: #16a34a;
}
.td-task-card-icon.is-pending {
  border-color: color-mix(in srgb, var(--muted) 18%, var(--line-soft));
  background: color-mix(in srgb, var(--muted) 8%, var(--surface));
  color: color-mix(in srgb, var(--muted) 86%, var(--text));
}
.td-task-card-comment-badge {
  padding: 0 0.4375rem 0 0.375rem;
  font-size: 0.625rem;
  font-weight: 900;
}
.td-task-card-comment-badge.is-empty {
  border-color: color-mix(in srgb, var(--muted) 16%, var(--line-soft));
  background: color-mix(in srgb, var(--muted) 7%, var(--surface));
  color: var(--muted);
}
.td-task-card-comment-badge.has-comments {
  border-color: color-mix(in srgb, #f59e0b 34%, var(--line-soft));
  background: color-mix(in srgb, #f59e0b 16%, var(--surface));
  color: #d97706;
}
.td-task-card-comment-badge strong {
  color: inherit;
  font-size: 0.625rem;
  line-height: 1;
}
.td-task-card-footer time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 760;
  white-space: nowrap;
}
.td-task-card-preview {
  width: 16.25rem;
  transform: rotate(2deg);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line-soft));
  box-shadow: 0 1.125rem 2.5rem rgba(124, 58, 237, 0.24);
}
.td-card-drop-indicator {
  height: 0.1875rem;
  border-radius: 62.4375rem;
  background: var(--primary);
  box-shadow: 0 0 0 0.25rem var(--primary-soft);
}
@media (max-width: 47.5rem) {
  .td-kanban-kit {
    min-height: 0;
    padding: 0;
  }
  .td-kanban-column {
    min-width: min(86vw, 20rem);
  }
}
.tasks-board-controls {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
}
.tasks-view-toggle {
  min-width: 0;
  min-height: 2rem;
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(3.625rem, 1fr));
  overflow: hidden;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--control-bg);
}
.tasks-view-toggle button {
  min-width: 0;
  min-height: 1.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  border: 0;
  border-right: 0.0625rem solid var(--line-soft);
  background: transparent;
  color: var(--muted);
  font-size: 0.7188rem;
  font-weight: 800;
  padding: 0 0.5625rem;
  white-space: nowrap;
}
@media (max-width: 64rem) and (min-width: 47.5625rem) {
  .tasks-view-toggle {
    grid-template-columns: repeat(3, minmax(2.25rem, 1fr));
  }
  .tasks-view-toggle button {
    width: 2.25rem;
    padding: 0;
    overflow: hidden;
    text-indent: -62.4375rem;
  }
  .tasks-view-toggle button .material-symbols-rounded {
    text-indent: 0;
  }
  .td-filter-trigger {
    width: 2.125rem;
    overflow: hidden;
    padding: 0;
    text-indent: -62.4375rem;
  }
  .td-filter-trigger .material-symbols-rounded,
  .td-filter-trigger strong {
    text-indent: 0;
  }
}
.tasks-view-toggle button:last-child {
  border-right: 0;
}
.tasks-view-toggle button.is-active {
  background: var(--primary);
  color: #fff;
}
.tasks-view-toggle .material-symbols-rounded {
  font-size: 1rem;
}
.td-list-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  border-radius: 62.4375rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.6562rem;
  font-weight: 850;
  padding: 0 0.5rem;
}
.td-list-status.tone-success {
  background: rgba(34, 197, 94, 0.13);
  color: #16a34a;
}
.td-list-status.tone-error {
  background: rgba(239, 68, 68, 0.13);
  color: #dc2626;
}
.td-list-status.tone-waiting {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}
.td-charts-dashboard {
  height: 100%;
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 0.875rem;
  padding: 0.875rem;
  background:
    radial-gradient(
      circle at 12% 0%,
      color-mix(in srgb, var(--primary-soft) 48%, transparent),
      transparent 30%),
    radial-gradient(
      circle at 88% 8%,
      color-mix(in srgb, var(--blue) 9%, transparent),
      transparent 26%),
    var(--surface);
}
.td-charts-hero,
.td-chart-card,
.td-number-card,
.td-chart-skip,
.td-chart-empty {
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 82%, var(--primary));
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--surface) 98%, transparent),
      color-mix(in srgb, var(--control-bg) 86%, transparent));
  box-shadow: 0 1.125rem 2.875rem rgba(15, 23, 42, 0.1);
}
.td-charts-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  border-radius: 1.125rem;
  padding: 1rem;
}
.td-charts-hero > div {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.td-charts-hero > div > .material-symbols-rounded {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 0.9375rem;
  background: var(--primary);
  color: #fff;
  font-size: 1.5rem;
}
.td-charts-hero strong {
  color: var(--panel-title);
  font-size: 1.125rem;
  font-weight: 950;
}
.td-charts-hero p {
  max-width: 45rem;
  margin: 0.1875rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.45;
}
.td-charts-hero-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex: 0 0 auto;
}
.td-charts-hero-actions .secondary-button {
  min-height: 2.125rem;
  border-radius: 0.5625rem;
  font-size: 0.7188rem;
  font-weight: 850;
  padding: 0 0.625rem;
  white-space: nowrap;
}
.td-charts-hero-actions .secondary-button .material-symbols-rounded {
  font-size: 1.0625rem;
}
.td-chart-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.td-chart-kpis article {
  min-height: 6rem;
  display: grid;
  align-content: center;
  gap: 0.25rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface) 92%, var(--control-bg));
  padding: 0.875rem;
}
.td-chart-kpis span,
.td-chart-kpis em,
.td-chart-card header span,
.td-chart-section > header span,
.td-number-card header span {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 800;
}
.td-chart-kpis strong {
  color: var(--panel-title);
  font-size: 1.5625rem;
  font-weight: 950;
}
.td-chart-kpis em {
  font-style: normal;
}
.td-chart-main-grid {
  display: grid;
  grid-template-columns: minmax(17.5rem, 0.95fr) minmax(20rem, 1.05fr);
  gap: 0.75rem;
}
.td-chart-section {
  display: grid;
  gap: 0.625rem;
}
.td-chart-section > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0.125rem;
}
.td-chart-section > header strong {
  color: var(--panel-title);
  font-size: 0.875rem;
  font-weight: 950;
}
.td-text-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 0.75rem;
}
.td-chart-card,
.td-number-card {
  border-radius: 1.125rem;
  padding: 0.875rem;
}
.td-chart-card > header,
.td-number-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.td-number-card > header {
  display: block;
}
.td-number-card > header > div {
  min-width: 0;
  display: grid;
  gap: 0.1875rem;
}
.td-chart-card > header strong,
.td-number-card > header strong {
  display: block;
  color: var(--panel-title);
  font-size: 0.875rem;
  font-weight: 950;
}
.td-number-card > header strong {
  overflow-wrap: anywhere;
  line-height: 1.18;
}
.td-number-card > header span {
  display: block;
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 800;
  line-height: 1.25;
}
.td-chart-field-caption {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3125rem;
  margin-top: 0.1875rem;
}
.td-chart-field-origin {
  width: fit-content;
  display: inline-flex !important;
  align-items: center;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 24%, var(--line-soft));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-soft) 62%, var(--surface));
  color: var(--primary) !important;
  padding: 0.125rem 0.3125rem;
  font-size: 0.5625rem !important;
  font-style: normal;
  font-weight: 900 !important;
  line-height: 1;
  white-space: nowrap;
}
.td-chart-constant-row strong .td-chart-field-origin {
  margin-top: 0.1875rem;
}
.td-chart-card > header > .material-symbols-rounded {
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.25rem;
}
.td-chart-pie-grid {
  display: grid;
  grid-template-columns: 8.125rem minmax(0, 1fr);
  align-items: center;
  gap: 0.875rem;
}
.td-chart-pie-wrap {
  position: relative;
  display: grid;
  place-items: center;
}
.td-chart-pie {
  width: 7.875rem;
  height: 7.875rem;
  transform: rotate(-90deg);
}
.td-chart-pie-track,
.td-chart-pie-segment {
  fill: none;
  stroke-width: 16;
}
.td-chart-pie-track {
  stroke: color-mix(in srgb, var(--line-soft) 74%, var(--surface));
}
.td-chart-pie-segment {
  stroke-linecap: butt;
}
.td-chart-pie-wrap strong {
  position: absolute;
  color: var(--panel-title);
  font-size: 1.125rem;
  font-weight: 950;
}
.td-chart-legend,
.td-chart-bars {
  display: grid;
  gap: 0.5rem;
}
.td-chart-legend-row {
  display: grid;
  grid-template-columns: 0.5625rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}
.td-chart-legend-row > span {
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 62.4375rem;
}
.td-chart-legend-row strong,
.td-chart-bar-row > span {
  overflow: hidden;
  color: var(--text);
  font-size: 0.7188rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-chart-legend-row em {
  color: var(--muted);
  font-size: 0.6562rem;
  font-style: normal;
  font-weight: 800;
}
.td-chart-legend-row,
.td-chart-bar-row {
  border-radius: 0.5625rem;
  cursor: context-menu;
}
.td-chart-legend-row:hover,
.td-chart-bar-row:hover {
  background: color-mix(in srgb, var(--primary-soft) 52%, transparent);
}
.td-chart-legend-menu {
  position: fixed;
  z-index: 9999;
  display: grid;
  gap: 0.25rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 24%, var(--line-soft));
  border-radius: 0.75rem;
  background: var(--surface);
  padding: 0.375rem;
  box-shadow: 0 1.125rem 2.875rem rgba(15, 23, 42, 0.18);
}
.td-chart-legend-menu button {
  min-height: 2.125rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 0.5625rem;
  background: transparent;
  color: var(--text);
  padding: 0 0.5625rem;
  font-size: 0.75rem;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}
.td-chart-legend-menu button:hover {
  background: var(--primary-soft);
  color: var(--primary);
}
.td-chart-legend-menu .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.125rem;
}
.td-chart-bar-row {
  display: grid;
  grid-template-columns: minmax(5.375rem, 0.62fr) minmax(7.5rem, 1fr) 3.375rem;
  align-items: center;
  gap: 0.5625rem;
}
.td-chart-bar-row > div {
  height: 0.5625rem;
  overflow: hidden;
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--line-soft) 74%, transparent);
}
.td-chart-bar-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}
.td-chart-bar-row strong {
  color: var(--panel-title);
  font-size: 0.6875rem;
  font-weight: 900;
  text-align: right;
}
.td-chart-card.is-bubble {
  grid-column: span 2;
}
.td-chart-bubbles {
  min-height: 14.875rem;
  max-height: min(32.5rem, 58vh);
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.625rem, 1fr));
  grid-auto-rows: 3.375rem;
  grid-auto-flow: dense;
  align-items: center;
  justify-items: center;
  gap: 0.75rem 0.625rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.875rem;
  background:
    radial-gradient(
      circle at 16% 12%,
      color-mix(in srgb, var(--primary-soft) 54%, transparent),
      transparent 34%),
    color-mix(in srgb, var(--control-bg) 76%, var(--surface));
  padding: 1.5rem 1.125rem 1.875rem;
}
.td-chart-bubble-wrap {
  position: relative;
  z-index: 1;
  width: 5.125rem;
  height: 5.125rem;
  display: grid;
  place-items: center;
  transform: translate(var(--bubble-dx, 0), var(--bubble-dy, 0));
}
.td-chart-bubble-wrap.is-active {
  z-index: 7;
}
.td-chart-bubble {
  width: var(--bubble-size);
  height: var(--bubble-size);
  min-width: var(--bubble-size);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.0625rem;
  overflow: hidden;
  border: 0.0625rem solid rgba(255, 255, 255, 0.72);
  border-radius: 62.4375rem;
  background:
    radial-gradient(
      circle at 34% 24%,
      rgba(255, 255, 255, 0.42),
      transparent 36%),
    var(--bubble-color);
  box-shadow: inset 0 -0.625rem 1.375rem rgba(15, 23, 42, 0.12), 0 0.625rem 1.25rem rgba(15, 23, 42, 0.1);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease;
}
.td-chart-bubble:hover,
.td-chart-bubble:focus-visible,
.td-chart-bubble[aria-expanded=true] {
  filter: saturate(1.08);
  outline: none;
  transform: scale(1.07);
  box-shadow: inset 0 -0.625rem 1.375rem rgba(15, 23, 42, 0.14), 0 0.9375rem 1.75rem rgba(124, 58, 237, 0.22);
}
.td-chart-bubble strong {
  max-width: 86%;
  overflow: hidden;
  font-size: 0.6875rem;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-chart-bubble em {
  max-width: 86%;
  overflow: hidden;
  font-size: 0.5312rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  opacity: 0.88;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-chart-bubble span {
  max-width: 78%;
  overflow: hidden;
  font-size: 0.5312rem;
  font-weight: 850;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-chart-bubble.is-compact span {
  display: none;
}
.td-chart-bubble-dropdown {
  position: fixed;
  z-index: 9999;
  display: grid;
  gap: 0.625rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 28%, var(--line-soft));
  border-radius: 0.75rem;
  background: var(--surface);
  box-shadow: 0 1.375rem 3.75rem rgba(15, 23, 42, 0.22);
  padding: 0.75rem;
}
.td-chart-bubble-dropdown::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 0.75rem;
  height: 0.75rem;
  border-left: 0.0625rem solid color-mix(in srgb, var(--primary) 28%, var(--line-soft));
  border-top: 0.0625rem solid color-mix(in srgb, var(--primary) 28%, var(--line-soft));
  background: var(--surface);
}
.td-chart-bubble-dropdown.is-down::before {
  top: -0.4375rem;
  transform: translateX(-50%) rotate(45deg);
}
.td-chart-bubble-dropdown.is-up::before {
  bottom: -0.4375rem;
  transform: translateX(-50%) rotate(225deg);
}
.td-chart-bubble-dropdown header {
  min-width: 0;
  display: grid;
  grid-template-columns: 0.625rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
}
.td-chart-bubble-dropdown header span {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 62.4375rem;
}
.td-chart-bubble-dropdown header strong {
  min-width: 0;
  overflow: hidden;
  color: var(--panel-title);
  font-size: 0.8125rem;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-chart-bubble-dropdown dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4375rem;
  margin: 0;
}
.td-chart-bubble-dropdown dl div {
  min-width: 0;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.5625rem;
  background: color-mix(in srgb, var(--control-bg) 78%, var(--surface));
  padding: 0.4375rem;
}
.td-chart-bubble-dropdown dt {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.5625rem;
  font-weight: 850;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.td-chart-bubble-dropdown dd {
  margin: 0.125rem 0 0;
  overflow: hidden;
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-chart-bubble-dropdown p {
  margin: 0;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 720;
  line-height: 1.35;
}
.td-number-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
}
.td-number-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
}
.td-number-card dl div {
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--control-bg) 72%, transparent);
  padding: 0.5625rem;
}
.td-number-card dt {
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 850;
  text-transform: uppercase;
}
.td-number-card dd {
  margin: 0.1875rem 0 0;
  color: var(--panel-title);
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.12;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.td-number-card dd.is-sm {
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
}
.td-number-card dd.is-xs {
  font-size: 0.6875rem;
  letter-spacing: -0.02em;
}
.td-chart-constant-table {
  overflow: hidden;
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 86%, var(--primary));
  border-radius: 1rem;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--surface) 96%, transparent),
      color-mix(in srgb, var(--control-bg) 82%, transparent));
  box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.08);
}
.td-chart-constant-head,
.td-chart-constant-row {
  display: grid;
  grid-template-columns: minmax(10rem, 0.8fr) minmax(13.75rem, 1.3fr) 6rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6875rem 0.875rem;
}
.td-chart-constant-head {
  border-bottom: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--control-bg) 82%, var(--surface));
  color: var(--table-head);
  font-size: 0.625rem;
  font-weight: 950;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.td-chart-constant-row {
  min-height: 3rem;
  border-bottom: 0.0625rem solid color-mix(in srgb, var(--line-soft) 70%, transparent);
}
.td-chart-constant-row:last-child {
  border-bottom: 0;
}
.td-chart-constant-row strong,
.td-chart-constant-row span,
.td-chart-constant-row em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-chart-constant-row strong {
  color: var(--panel-title);
  font-size: 0.75rem;
  font-weight: 900;
}
.td-chart-constant-row span {
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 700;
}
.td-chart-constant-row em {
  color: var(--muted);
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}
.td-chart-skip,
.td-chart-empty {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 1rem;
  padding: 0.875rem;
}
.td-chart-skip > .material-symbols-rounded,
.td-chart-empty > .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.5rem;
}
.td-chart-skip strong,
.td-chart-empty strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
  font-weight: 950;
}
.td-chart-skip p,
.td-chart-empty p {
  margin: 0.125rem 0 0;
  color: var(--muted);
  font-size: 0.7188rem;
  font-weight: 650;
}
.td-canvas-table-panel {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  --td-table-grid-row: color-mix(in srgb, var(--line) 48%, transparent);
  --td-table-grid-column: color-mix(in srgb, var(--line) 38%, transparent);
  --td-table-grid-strong: color-mix(in srgb, var(--line) 62%, transparent);
  --td-table-resize-handle: color-mix(in srgb, var(--muted) 22%, transparent);
  --td-table-resize-active: var(--primary);
  --td-table-row-alt: color-mix(in srgb, var(--control-bg) 52%, var(--surface));
  --td-table-action-bg: color-mix(in srgb, var(--primary-soft) 74%, var(--surface));
  --td-table-action-border: color-mix(in srgb, var(--primary) 28%, var(--line));
  background:
    radial-gradient(
      circle at top left,
      color-mix(in srgb, var(--primary-soft) 42%, transparent),
      transparent 34%),
    var(--surface);
}
[data-theme=dark] .td-canvas-table-panel {
  --td-table-grid-row: color-mix(in srgb, var(--line) 52%, transparent);
  --td-table-grid-column: color-mix(in srgb, var(--line) 42%, transparent);
  --td-table-grid-strong: color-mix(in srgb, var(--line) 68%, transparent);
  --td-table-resize-handle: color-mix(in srgb, var(--muted) 30%, transparent);
  --td-table-row-alt: color-mix(in srgb, var(--control-bg) 62%, var(--surface));
  --td-table-action-bg: color-mix(in srgb, var(--primary-soft) 48%, var(--surface));
  --td-table-action-border: color-mix(in srgb, var(--primary) 42%, var(--line));
}
.td-table-column-resizing,
.td-table-column-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}
.td-table-mode {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  background: var(--surface);
}
.td-table-pager {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--surface) 94%, var(--control-bg));
  color: var(--muted);
  font-size: 0.7188rem;
  font-weight: 750;
  padding: 0.4375rem 0.625rem;
}
.td-table-pager > span {
  color: var(--panel-title);
  white-space: nowrap;
}
.td-table-pager-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4375rem;
}
.td-table-pager-actions label {
  min-height: 1.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.4375rem;
  background: var(--control-bg);
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 0 0.25rem 0 0.5625rem;
}
.td-table-pager-actions select {
  height: 1.5rem;
  border: 0;
  border-left: 0.0625rem solid var(--line-soft);
  background: transparent;
  color: var(--text);
  font-size: 0.6875rem;
  font-weight: 850;
  padding-left: 0.375rem;
  outline: none;
}
.td-table-pager-actions .secondary-button {
  min-height: 1.875rem;
  gap: 0.1875rem;
  padding: 0 0.5rem;
  font-size: 0.6875rem;
}
.td-table-pager-actions .secondary-button .material-symbols-rounded {
  font-size: 1rem;
}
.td-table-pager-actions strong {
  min-width: 4rem;
  color: var(--panel-title);
  font-size: 0.6875rem;
  font-weight: 900;
  text-align: center;
}
.td-filter-menu {
  position: relative;
  z-index: 18;
}
.td-filter-trigger {
  position: relative;
  max-width: 100%;
  height: 2.125rem;
  min-height: 2.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  padding: 0 0.625rem;
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
}
.td-filter-trigger.is-active {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line-soft));
  background: color-mix(in srgb, var(--primary-soft) 76%, var(--surface));
  color: var(--primary);
}
.td-filter-trigger strong {
  min-width: 1.125rem;
  height: 1.125rem;
  display: inline-grid;
  place-items: center;
  border-radius: 62.4375rem;
  background: var(--primary);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 900;
}
.td-filter-popover {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 80;
  width: min(48.75rem, calc(100vw - 2.125rem));
  max-height: min(78vh, 42.5rem);
  display: grid;
  grid-template-rows: auto auto minmax(6rem, 1fr) auto auto auto auto;
  overflow: hidden;
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 76%, var(--primary));
  border-radius: 0.875rem;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary-soft) 38%, transparent),
      transparent 44%),
    var(--surface);
  box-shadow: 0 1.5rem 4.375rem rgba(15, 23, 42, 0.22);
  color: var(--text);
}
.td-filter-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.875rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  padding: 0.875rem 1rem 0.75rem;
}
.td-filter-head div {
  display: grid;
  gap: 0.1875rem;
}
.td-filter-head strong {
  color: var(--panel-title);
  font-size: 0.9375rem;
  font-weight: 900;
}
.td-filter-head span {
  color: var(--muted);
  font-size: 0.7188rem;
  font-weight: 650;
}
.td-filter-head button,
.td-filter-icon-button,
.td-filter-saved-item > button:last-child {
  width: 1.875rem;
  height: 1.875rem;
  display: inline-grid;
  place-items: center;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.5625rem;
  background: var(--control-bg);
  color: var(--muted);
  cursor: pointer;
}
.td-filter-head button:hover,
.td-filter-icon-button:hover,
.td-filter-saved-item > button:last-child:hover {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--line-soft));
  color: var(--primary);
}
.td-filter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  padding: 0.625rem 0.75rem;
}
.td-filter-toolbar label,
.td-filter-save-box label {
  display: inline-grid;
  gap: 0.3125rem;
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.td-filter-toolbar select,
.td-filter-save-box input,
.td-filter-row select,
.td-filter-row input {
  min-height: 2.125rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.5625rem;
  background: var(--input-bg);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 750;
  outline: none;
}
.td-filter-toolbar select {
  min-width: 11.875rem;
  padding: 0 0.5625rem;
}
.td-filter-conditions {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  overflow: auto;
  padding: 0.75rem;
  background: color-mix(in srgb, var(--control-bg) 48%, transparent);
}
.td-filter-row {
  display: grid;
  grid-template-columns: 1.875rem minmax(9.375rem, 1.2fr) minmax(8.125rem, 0.9fr) minmax(8.125rem, 1fr) 2.125rem;
  align-items: center;
  gap: 0.4375rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--surface) 94%, var(--control-bg));
  padding: 0.4375rem;
}
.td-filter-row > span {
  height: 1.75rem;
  display: inline-grid;
  place-items: center;
  border-radius: 0.5rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.6875rem;
  font-weight: 900;
}
.td-filter-row select,
.td-filter-row input {
  width: 100%;
  min-width: 0;
  padding: 0 0.5625rem;
}
.td-filter-row input:disabled {
  opacity: 0.62;
  background: var(--control-bg);
}
.td-filter-empty {
  min-height: 8.75rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.375rem;
  border: 0.0625rem dashed color-mix(in srgb, var(--primary) 34%, var(--line-soft));
  border-radius: 0.8125rem;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--muted);
  text-align: center;
  padding: 1.125rem;
}
.td-filter-empty .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.75rem;
}
.td-filter-empty strong {
  color: var(--panel-title);
  font-size: 0.8125rem;
  font-weight: 900;
}
.td-filter-empty p {
  max-width: 20rem;
  margin: 0;
  font-size: 0.7188rem;
  font-weight: 650;
}
.td-filter-save-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.625rem;
  border-top: 0.0625rem solid var(--line-soft);
  padding: 0.6875rem 0.75rem;
}
.td-filter-save-box input {
  width: 100%;
  padding: 0 0.625rem;
}
.td-filter-saved {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  overflow-x: auto;
  border-top: 0.0625rem solid var(--line-soft);
  padding: 0.5625rem 0.75rem;
}
.td-filter-saved > strong {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.td-filter-saved-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 62.4375rem;
  background: var(--control-bg);
  padding: 0.125rem;
}
.td-filter-saved-item > button:first-child {
  min-height: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  border: 0;
  background: transparent;
  color: var(--panel-title);
  font-size: 0.6875rem;
  font-weight: 850;
  padding: 0 0.5rem;
  cursor: pointer;
}
.td-filter-saved-item > button:first-child:hover {
  color: var(--primary);
}
.td-filter-saved-item > button:last-child {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 62.4375rem;
}
.td-filter-saved-item .material-symbols-rounded {
  font-size: 0.9375rem;
}
.td-filter-batch-actions {
  display: grid;
  gap: 0.5rem;
  border-top: 0.0625rem solid var(--line-soft);
  padding: 0.625rem 0.75rem;
  background: color-mix(in srgb, var(--surface) 96%, var(--control-bg));
}
.td-filter-batch-actions > strong {
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.td-filter-batch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.td-filter-batch-grid .secondary-button {
  min-height: 2.125rem;
  justify-content: center;
  gap: 0.375rem;
  font-size: 0.7188rem;
}
.td-filter-batch-grid .secondary-button.is-danger {
  border-color: color-mix(in srgb, var(--red) 45%, var(--line-soft));
  color: var(--red);
}
.td-filter-batch-grid .secondary-button.is-danger:hover {
  background: color-mix(in srgb, var(--red) 12%, var(--surface));
}
.td-filter-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 0.0625rem solid var(--line-soft);
  padding: 0.6875rem 0.75rem;
  background: color-mix(in srgb, var(--surface) 92%, var(--control-bg));
}
.td-filter-footer .primary-button,
.td-filter-footer .secondary-button,
.td-filter-save-box .secondary-button,
.td-filter-toolbar .secondary-button {
  min-height: 2.125rem;
  font-size: 0.7188rem;
}
.td-canvas-scroll {
  position: absolute;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: transparent;
}
.td-canvas-spacer {
  min-width: 100%;
  min-height: 100%;
}
.td-canvas-layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: block;
  touch-action: none;
  user-select: none;
}
.td-canvas-edit-input {
  position: absolute;
  z-index: 5;
  border: 0.125rem solid var(--primary);
  border-radius: 0.4375rem;
  background: var(--input-bg);
  color: var(--text);
  font:
    700 0.75rem/1.2 "Inter",
    system-ui,
    sans-serif;
  padding: 0 0.5rem;
  outline: none;
  box-shadow: 0 0.875rem 1.75rem rgba(37, 99, 235, 0.18);
}
.td-canvas-status-dropdown {
  position: absolute;
  z-index: 7;
  display: grid;
  gap: 0.3125rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 0.8125rem;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--primary-soft) 36%, transparent),
      transparent 58%),
    color-mix(in srgb, var(--surface) 98%, var(--control-bg));
  overflow: auto;
  padding: 0.4375rem;
  box-shadow: 0 1.25rem 2.875rem rgba(15, 23, 42, 0.22);
}
.td-canvas-status-dropdown-head {
  min-height: 1.625rem;
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 0.4375rem 0.1875rem;
}
.td-canvas-status-dropdown-head .material-symbols-rounded {
  color: var(--primary);
  font-size: 1rem;
}
.td-canvas-status-option {
  min-height: 2rem;
  display: grid;
  grid-template-columns: 0.625rem minmax(0, 1fr) 1rem;
  align-items: center;
  gap: 0.5625rem;
  border: 0.0625rem solid transparent;
  border-radius: 0.625rem;
  background: transparent;
  color: var(--text);
  font:
    850 0.75rem/1.1 "Inter",
    system-ui,
    sans-serif;
  padding: 0 0.5625rem;
  text-align: left;
  cursor: pointer;
}
.td-canvas-status-option:hover,
.td-canvas-status-option.is-active {
  border-color: color-mix(in srgb, currentColor 22%, var(--line-soft));
  background: color-mix(in srgb, currentColor 11%, var(--surface));
}
.td-canvas-status-option .material-symbols-rounded {
  color: inherit;
  font-size: 1rem;
}
.td-canvas-status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 62.4375rem;
  background: currentColor;
  box-shadow: 0 0 0 0.1875rem color-mix(in srgb, currentColor 15%, transparent);
}
.td-canvas-status-option.tone-success {
  color: var(--green);
}
.td-canvas-status-option.tone-error {
  color: var(--red);
}
.td-canvas-status-option.tone-waiting {
  color: var(--amber);
}
.td-canvas-status-option.tone-pending {
  color: var(--primary);
}
.td-canvas-status-option.tone-custom {
  color: var(--muted);
}
.td-canvas-context-menu {
  position: absolute;
  z-index: 12;
  min-width: 11rem;
  display: grid;
  gap: 0.1875rem;
  border: 0.0625rem solid color-mix(in srgb, var(--line-soft) 74%, var(--primary));
  border-radius: 0.625rem;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary-soft) 34%, transparent),
      transparent 62%),
    var(--surface);
  padding: 0.3125rem;
  box-shadow: 0 1.125rem 2.625rem rgba(15, 23, 42, 0.22);
}
.td-canvas-context-menu button {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 850;
  padding: 0 0.5625rem;
  text-align: left;
  cursor: pointer;
}
.td-canvas-context-menu button:hover {
  background: color-mix(in srgb, var(--primary-soft) 62%, var(--surface));
  color: var(--primary);
}
.td-canvas-context-menu button.is-danger {
  color: var(--red);
}
.td-canvas-context-menu button.is-danger:hover {
  background: color-mix(in srgb, var(--red) 12%, var(--surface));
  color: var(--red);
}
.td-canvas-context-menu .material-symbols-rounded {
  color: inherit;
  font-size: 1.0625rem;
}
.td-table-bulk-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.38);
  padding: 1.125rem;
}
.td-table-bulk-modal {
  width: min(35rem, 100%);
  overflow: hidden;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 22%, var(--line-soft));
  border-radius: 1rem;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--primary-soft) 34%, transparent),
      transparent 52%),
    var(--surface);
  box-shadow: 0 1.75rem 5.625rem rgba(15, 23, 42, 0.28);
}
.td-table-bulk-modal > header {
  min-height: 5.375rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.125rem;
  gap: 0.875rem;
  align-items: start;
  border-bottom: 0.0625rem solid var(--line-soft);
  padding: 1rem 1.125rem 0.875rem;
}
.td-table-bulk-modal > header div {
  min-width: 0;
  display: grid;
  gap: 0.1875rem;
}
.td-table-bulk-modal > header span {
  overflow: hidden;
  color: var(--primary);
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.td-table-bulk-modal > header strong {
  color: var(--panel-title);
  font-size: 1.125rem;
  font-weight: 950;
}
.td-table-bulk-modal > header p,
.td-table-bulk-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 680;
  line-height: 1.45;
}
.td-table-bulk-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 1rem 1.125rem;
}
.td-table-bulk-body .modal-field-wide,
.td-table-bulk-hint,
.td-table-bulk-error {
  grid-column: 1 / -1;
}
.td-table-bulk-hint strong {
  color: var(--panel-title);
}
.td-table-bulk-error {
  border: 0.0625rem solid rgba(239, 68, 68, 0.24);
  border-radius: 0.625rem;
  background: rgba(239, 68, 68, 0.08);
  color: #991b1b;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.5625rem 0.625rem;
}
.td-table-bulk-modal > footer {
  min-height: 3.625rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--control-bg) 74%, var(--surface));
  padding: 0.625rem 1.125rem;
}
.td-filter-transfer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.44);
  backdrop-filter: blur(0.125rem);
  padding: 1.125rem;
}
.td-filter-transfer-modal {
  width: min(39rem, 100%);
  overflow: hidden;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 20%, var(--line-soft));
  border-radius: 1rem;
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--primary-soft) 28%, transparent),
      transparent 56%),
    var(--surface);
  box-shadow: 0 1.75rem 5.625rem rgba(15, 23, 42, 0.32);
}
.td-filter-transfer-modal > header {
  min-height: 5.375rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.125rem;
  gap: 0.875rem;
  align-items: start;
  border-bottom: 0.0625rem solid var(--line-soft);
  padding: 1rem 1.125rem 0.875rem;
}
.td-filter-transfer-modal > header div {
  min-width: 0;
  display: grid;
  gap: 0.1875rem;
}
.td-filter-transfer-modal > header span {
  overflow: hidden;
  color: var(--primary);
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.td-filter-transfer-modal > header strong {
  color: var(--panel-title);
  font-size: 1.125rem;
  font-weight: 950;
}
.td-filter-transfer-modal > header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 680;
  line-height: 1.45;
}
.td-filter-transfer-body {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
}
.td-filter-status-modal {
  width: min(31rem, 100%);
}
.td-filter-status-body {
  grid-template-columns: minmax(0, 1fr);
}
.td-filter-status-body .modal-field {
  margin: 0;
}
.td-filter-transfer-loading {
  min-height: 6.5rem;
  display: grid;
  place-items: center;
  gap: 0.5rem;
  border: 0.0625rem dashed var(--line-soft);
  border-radius: 0.75rem;
  color: var(--muted);
  font-size: 0.7812rem;
  font-weight: 800;
}
.td-filter-transfer-loading .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.25rem;
  animation: td-filter-transfer-spin 1s linear infinite;
}
@keyframes td-filter-transfer-spin {
  to {
    transform: rotate(360deg);
  }
}
.td-filter-transfer-list {
  max-height: min(21.25rem, 52vh);
  display: grid;
  gap: 0.5rem;
  overflow: auto;
  padding-right: 0.125rem;
}
.td-filter-transfer-item {
  min-height: 3.4375rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.625rem;
  align-items: center;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.6875rem;
  background: color-mix(in srgb, var(--control-bg) 86%, var(--surface));
  color: var(--text);
  text-align: left;
  padding: 0.625rem 0.75rem;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}
.td-filter-transfer-item:hover {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line-soft));
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.08);
  transform: translateY(-0.0625rem);
}
.td-filter-transfer-item.is-selected {
  border-color: color-mix(in srgb, var(--primary) 52%, var(--line-soft));
  background: color-mix(in srgb, var(--primary-soft) 56%, var(--surface));
}
.td-filter-transfer-item > div {
  min-width: 0;
  display: grid;
  gap: 0.1875rem;
}
.td-filter-transfer-item strong {
  overflow: hidden;
  color: var(--panel-title);
  font-size: 0.8125rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-filter-transfer-item span,
.td-filter-transfer-item small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-filter-transfer-danger {
  min-height: 6rem;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.625rem;
  align-items: flex-start;
  border: 0.0625rem solid rgba(239, 68, 68, 0.24);
  border-radius: 0.75rem;
  background: rgba(239, 68, 68, 0.08);
  padding: 0.75rem;
}
.td-filter-transfer-danger .material-symbols-rounded {
  color: #dc2626;
  font-size: 1.25rem;
}
.td-filter-transfer-danger p {
  margin: 0;
  color: #991b1b;
  font-size: 0.7812rem;
  font-weight: 780;
  line-height: 1.45;
}
.td-filter-transfer-error {
  border: 0.0625rem solid rgba(239, 68, 68, 0.24);
  border-radius: 0.625rem;
  background: rgba(239, 68, 68, 0.08);
  color: #991b1b;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.5625rem 0.625rem;
}
.td-filter-transfer-modal > footer {
  min-height: 3.625rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--control-bg) 74%, var(--surface));
  padding: 0.625rem 1.125rem;
}
.td-structured-viewer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9300;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(0.125rem);
  padding: 0.9375rem;
}
.td-structured-viewer-modal {
  width: min(66rem, 100%);
  max-height: min(84vh, 52rem);
  display: grid;
  grid-template-rows: auto auto auto minmax(10rem, 1fr) auto;
  overflow: hidden;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 20%, var(--line-soft));
  border-radius: 0.9375rem;
  background:
    linear-gradient(
      140deg,
      color-mix(in srgb, var(--primary-soft) 28%, transparent),
      transparent 52%),
    var(--surface);
  box-shadow: 0 1.75rem 5.625rem rgba(15, 23, 42, 0.34);
}
.td-structured-viewer-modal > header {
  min-height: 4.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.125rem;
  gap: 0.75rem;
  align-items: start;
  border-bottom: 0.0625rem solid var(--line-soft);
  padding: 0.875rem 1rem 0.75rem;
}
.td-structured-viewer-modal > header div {
  min-width: 0;
  display: grid;
  gap: 0.1875rem;
}
.td-structured-viewer-modal > header span {
  overflow: hidden;
  color: var(--primary);
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.td-structured-viewer-modal > header strong {
  color: var(--panel-title);
  font-size: 1.0625rem;
  font-weight: 950;
}
.td-structured-viewer-modal > header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}
.td-structured-viewer-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--surface) 93%, var(--control-bg));
  padding: 0.625rem 0.8125rem;
}
.td-structured-viewer-toolbar .secondary-button {
  min-height: 2rem;
  gap: 0.25rem;
  font-size: 0.7188rem;
  padding: 0 0.5625rem;
}
.td-structured-viewer-meta {
  border-bottom: 0.0625rem solid var(--line-soft);
  color: var(--muted);
  font-size: 0.7188rem;
  font-weight: 800;
  padding: 0.4375rem 0.875rem;
}
.td-structured-viewer-body {
  overflow: auto;
  padding: 0.8125rem 0.875rem;
}
.td-structured-viewer-body > pre {
  margin: 0;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--control-bg) 58%, var(--surface));
  color: var(--text);
  font:
    650 0.7188rem/1.45 "JetBrains Mono",
    "SFMono-Regular",
    ui-monospace,
    monospace;
  overflow: auto;
  padding: 0.75rem;
  white-space: pre;
}
.td-structured-empty,
.td-structured-scalar-value {
  border: 0.0625rem dashed var(--line-soft);
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--surface) 94%, var(--control-bg));
  color: var(--muted);
  font-size: 0.7812rem;
  font-weight: 700;
  padding: 0.75rem;
}
.td-structured-simple-list,
.td-structured-mixed-list {
  display: grid;
  gap: 0.3125rem;
  margin: 0;
  padding: 0 0 0 1.375rem;
}
.td-structured-simple-list li,
.td-structured-mixed-list li {
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 740;
  line-height: 1.42;
}
.td-structured-mixed-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}
.td-structured-mixed-list strong {
  color: var(--panel-title);
  font-weight: 900;
}
.td-structured-table-wrap {
  max-width: 100%;
  overflow: auto;
}
.td-structured-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.td-structured-table th,
.td-structured-table td {
  border-bottom: 0.0625rem solid var(--line-soft);
  color: var(--text);
  font-size: 0.7188rem;
  font-weight: 700;
  overflow-wrap: anywhere;
  padding: 0.5rem 0.4375rem;
  text-align: left;
  vertical-align: middle;
}
.td-structured-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--surface) 92%, var(--control-bg));
  color: var(--muted);
  font-size: 0.6562rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.td-structured-table thead th:first-child,
.td-structured-table tbody th {
  width: 2.875rem;
  text-align: right;
}
.td-structured-object-grid {
  display: grid;
  gap: 0.4375rem;
}
.td-structured-object-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.55fr) minmax(0, 1fr);
  gap: 0.625rem;
  align-items: start;
  border: 0.0625rem solid var(--line-soft);
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--surface) 95%, var(--control-bg));
  padding: 0.5rem 0.625rem;
}
.td-structured-object-row > span {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.td-structured-object-row > div {
  min-width: 0;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 740;
  line-height: 1.4;
}
.td-structured-nested-link {
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 26%, var(--line-soft));
  border-radius: 62.4375rem;
  background: color-mix(in srgb, var(--primary-soft) 74%, var(--surface));
  color: var(--primary);
  font-size: 0.6875rem;
  font-weight: 820;
  padding: 0.1875rem 0.5rem;
  text-align: left;
}
.td-structured-nested-link:hover {
  filter: brightness(0.98);
}
.td-structured-viewer-modal > footer {
  border-top: 0.0625rem solid var(--line-soft);
  background: color-mix(in srgb, var(--control-bg) 70%, var(--surface));
  color: var(--green);
  font-size: 0.7188rem;
  font-weight: 850;
  padding: 0.5rem 0.875rem;
}
.td-filter-transfer-modal .primary-button.is-danger {
  border-color: rgba(239, 68, 68, 0.36);
  background:
    linear-gradient(
      145deg,
      rgba(239, 68, 68, 0.96),
      rgba(220, 38, 38, 0.96));
  color: #fff;
}
.td-filter-transfer-modal .primary-button.is-danger:hover {
  filter: brightness(1.03);
}
.td-kanban-context-menu {
  position: fixed;
  z-index: 9000;
}
.td-canvas-save-notice {
  position: absolute;
  right: 0.875rem;
  bottom: 0.875rem;
  z-index: 6;
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 22%, var(--line-soft));
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--panel-title);
  font-size: 0.7188rem;
  font-weight: 850;
  line-height: 1;
  padding: 0 0.625rem;
  box-shadow: 0 0.875rem 2rem rgba(15, 23, 42, 0.14);
  pointer-events: none;
}
.td-canvas-save-notice .material-symbols-rounded {
  color: var(--primary);
  font-size: 1.0625rem;
}
.td-canvas-save-notice.is-error {
  border-color: rgba(239, 68, 68, 0.28);
  color: #991b1b;
}
.td-canvas-save-notice.is-error .material-symbols-rounded {
  color: #dc2626;
}
.td-canvas-save-notice.is-success {
  border-color: rgba(34, 197, 94, 0.28);
  color: #166534;
}
.td-canvas-save-notice.is-success .material-symbols-rounded {
  color: #16a34a;
}
.td-canvas-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: min(22.5rem, calc(100% - 2.25rem));
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  transform: translate(-50%, -50%);
  border: 0.0625rem solid var(--line-soft);
  border-radius: 1.125rem;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--surface) 96%, transparent),
      color-mix(in srgb, var(--control-bg) 92%, transparent));
  color: var(--text);
  padding: 1.25rem;
  text-align: center;
  box-shadow: 0 1.375rem 3.125rem rgba(15, 23, 42, 0.15);
  pointer-events: none;
}
.td-canvas-empty .material-symbols-rounded {
  width: 2.625rem;
  height: 2.625rem;
  display: grid;
  place-items: center;
  border-radius: 0.875rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.4375rem;
}
.td-canvas-empty strong {
  color: var(--panel-title);
  font-size: 0.875rem;
  font-weight: 900;
}
.td-canvas-empty p {
  max-width: 17.5rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.7188rem;
  font-weight: 650;
  line-height: 1.45;
}
.td-share-password-card {
  width: min(28.75rem, 100%);
  display: grid;
  justify-items: stretch;
  gap: 0.75rem;
  margin: 4.5rem auto;
  border: 0.0625rem solid rgba(148, 163, 184, 0.34);
  border-radius: 1.375rem;
  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(37, 99, 235, 0.14),
      transparent 34%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 98%, transparent),
      color-mix(in srgb, var(--control-bg) 98%, transparent));
  padding: 1.625rem;
  box-shadow: 0 1.75rem 4.375rem rgba(15, 23, 42, 0.16);
  text-align: left;
}
.td-share-password-card > .material-symbols-rounded {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 1rem;
  background: #0f172a;
  color: #fff;
  font-size: 1.5rem;
}
.td-share-password-card strong {
  color: var(--panel-title);
  font-size: 1.3125rem;
  line-height: 1.12;
}
.td-share-password-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.td-share-password-card label {
  display: grid;
  gap: 0.4375rem;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 850;
}
.td-share-password-card input {
  height: 2.75rem;
  border: 0.0625rem solid rgba(148, 163, 184, 0.42);
  border-radius: 0.8125rem;
  background: var(--input-bg);
  color: var(--text);
  padding: 0 0.75rem;
  font-size: 0.875rem;
}
.td-share-password-card button {
  justify-content: center;
  min-height: 2.625rem;
}
@media (max-width: 68.75rem) {
  .tasks-board-controls {
    justify-content: flex-start;
  }
}
@media (max-width: 40rem) {
  .tasks-board-controls {
    width: 100%;
    flex-wrap: wrap;
  }
  .tasks-view-toggle {
    width: 100%;
  }
  .td-charts-dashboard {
    padding: 0.625rem;
  }
  .td-charts-hero,
  .td-chart-skip,
  .td-chart-empty {
    align-items: flex-start;
    flex-direction: column;
  }
  .td-charts-hero-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .td-chart-kpis,
  .td-chart-main-grid,
  .td-text-chart-grid,
  .td-chart-pie-grid {
    grid-template-columns: 1fr;
  }
  .td-chart-card.is-bubble {
    grid-column: auto;
  }
  .td-chart-bar-row {
    grid-template-columns: minmax(4.625rem, 0.58fr) minmax(5.625rem, 1fr) 2.875rem;
  }
  .td-chart-constant-head {
    display: none;
  }
  .td-chart-constant-row {
    grid-template-columns: 1fr;
    gap: 0.3125rem;
  }
  .td-chart-constant-row strong,
  .td-chart-constant-row span,
  .td-chart-constant-row em {
    white-space: normal;
    text-align: left;
  }
  .td-table-pager {
    align-items: stretch;
    flex-direction: column;
  }
  .td-table-pager-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .td-filter-menu,
  .td-filter-trigger {
    width: 100%;
  }
  .td-filter-popover {
    position: fixed;
    inset: auto 0.625rem 0.625rem 0.625rem;
    width: auto;
    max-height: 82vh;
  }
  .td-filter-toolbar,
  .td-filter-save-box,
  .td-filter-batch-grid,
  .td-filter-footer {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }
  .td-filter-row {
    grid-template-columns: 1.75rem 1fr;
  }
  .td-filter-row select,
  .td-filter-row input {
    grid-column: 1 / -1;
  }
  .td-filter-icon-button {
    grid-column: 2;
    justify-self: end;
  }
}
.td-kanban,
.td-table-mode,
.td-charts-dashboard,
.td-canvas-table-panel,
.tasks-board-controls,
.tasks-view-toggle,
.td-table-pager,
.td-table-pager-actions {
  min-width: 0;
}
.td-kanban-kit,
.td-canvas-scroll {
  -webkit-overflow-scrolling: touch;
}
.td-filter-popover {
  max-width: calc(100vw - 1.25rem);
}
@media (max-width: 67.5rem) {
  .tasks-board-controls {
    justify-content: flex-start;
  }
  .tasks-view-toggle {
    flex: 0 1 auto;
  }
  .td-table-pager {
    align-items: stretch;
    flex-direction: column;
  }
  .td-table-pager-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}
@media (max-width: 47.5rem) {
  .tasks-board-controls {
    width: 100%;
    gap: 0.375rem;
  }
  .tasks-view-toggle {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tasks-view-toggle button,
  .td-filter-trigger,
  .td-table-pager-actions .secondary-button {
    min-height: 2.75rem;
  }
  .td-kanban-column {
    min-width: min(86vw, 20rem);
  }
  .td-charts-dashboard {
    padding: 0.625rem;
  }
  .td-charts-hero-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .td-filter-popover {
    position: fixed;
    inset: auto 0.625rem 0.625rem 0.625rem;
    width: auto;
    max-height: 82dvh;
    overflow: auto;
  }
  .td-filter-transfer-backdrop {
    padding: 0.75rem;
  }
  .td-filter-transfer-modal > header,
  .td-filter-transfer-body,
  .td-filter-transfer-modal > footer {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .td-filter-transfer-modal > footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .td-filter-transfer-modal > footer .secondary-button,
  .td-filter-transfer-modal > footer .primary-button {
    width: 100%;
    justify-content: center;
  }
  .td-filter-transfer-item {
    grid-template-columns: 1fr;
    gap: 0.375rem;
  }
  .td-filter-transfer-item small {
    justify-self: start;
  }
  .td-structured-viewer-backdrop {
    padding: 0.625rem;
  }
  .td-structured-viewer-modal {
    width: 100%;
    max-height: 88dvh;
    border-radius: 0.8125rem;
  }
  .td-structured-viewer-modal > header,
  .td-structured-viewer-toolbar,
  .td-structured-viewer-body,
  .td-structured-viewer-meta,
  .td-structured-viewer-modal > footer {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }
  .td-structured-object-row {
    grid-template-columns: 1fr;
    gap: 0.3125rem;
  }
  .td-structured-table th,
  .td-structured-table td {
    min-width: 6.5rem;
  }
}
.td-task-ttable-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}
.td-task-ttable-host {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 20rem;
  overflow: hidden;
}
.td-task-ttable-host > .tt-container {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.td-task-ttable-host .tt-header,
.td-task-ttable-host .tt-filters,
.td-task-ttable-host .tt-pagination {
  flex: 0 0 auto;
}
.td-task-ttable-host .tt-table-wrapper {
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.td-task-ttable-host .tt-canvas-table-panel {
  min-height: 20rem;
}
.td-task-ttable-host .tt-header {
  min-height: 2.75rem;
  padding: 0.35rem 0.7rem;
}
.td-task-ttable-host .tt-pagination {
  min-height: 2.625rem;
  padding: 0.45rem 0.75rem;
  background: #fff;
}
.td-task-ttable-host .tt-pagination-custom {
  display: flex;
  align-items: center;
}
.td-ttable-pagination-content {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.td-ttable-pagination-summary {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}
.td-ttable-pagination-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
  font-size: 0.72rem;
}
.td-ttable-pagination-actions label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
}
.td-ttable-pagination-actions select {
  height: 1.9rem;
  min-width: 4rem;
  border: 1px solid var(--line-soft);
  border-radius: 0.35rem;
  background: var(--surface);
  color: var(--text);
  padding: 0 1.35rem 0 0.45rem;
  font-size: 0.72rem;
}
.td-ttable-pagination-actions .tt-page-btn {
  width: 1.9rem;
  height: 1.9rem;
  display: inline-grid;
  place-items: center;
}
.td-ttable-pagination-actions .material-symbols-rounded {
  font-size: 1.05rem;
}
.td-ttable-pagination-actions strong {
  min-width: 3.6rem;
  color: var(--text);
  text-align: center;
}
.td-task-ttable-actions {
  justify-content: center;
  padding: 0;
}
.td-task-ttable-actions .tt-custom-action-btn {
  min-width: 5.75rem;
  height: 1.875rem;
  border-radius: 0.4rem;
  padding-inline: 0.55rem;
}
.td-task-ttable-host .searchable-select__trigger-tags.td-task-table-relation-tags {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  overflow: hidden;
}
.td-task-ttable-host .td-task-table-relation-tags .searchable-select__tag {
  min-width: 0;
  min-height: 1.375rem;
  flex: 0 1 auto;
  border: 0.0625rem solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface));
  color: var(--primary-strong);
  padding: 0 0.4375rem;
  font-size: 0.6875rem;
  font-weight: 780;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
}
.td-task-ttable-host .td-task-table-relation-tags .searchable-select__tag--more {
  flex: 0 0 auto;
  color: var(--primary);
  font-weight: 900;
}
.td-task-table-list-tag {
  max-width: 100%;
  min-width: 0;
  min-height: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 0.0625rem solid color-mix(in srgb, var(--td-list-color) 34%, var(--line-soft));
  border-radius: 0.4375rem;
  background: color-mix(in srgb, var(--td-list-color) 13%, var(--surface));
  color: color-mix(in srgb, var(--td-list-color) 66%, var(--text));
  padding: 0.1875rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 800;
}
.td-task-table-list-tag > i {
  width: 0.4375rem;
  height: 0.4375rem;
  flex: 0 0 0.4375rem;
  border-radius: 50%;
  background: var(--td-list-color);
  box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--td-list-color) 18%, transparent);
}
.td-task-table-list-tag > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-task-table-relation-empty {
  color: var(--muted);
  font-size: 0.75rem;
}
.td-ttable-header-context-menu {
  position: fixed;
  z-index: 9500;
  min-width: 13.5rem;
}
.td-ttable-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3600;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.44);
  backdrop-filter: blur(3px);
}
.td-ttable-editor {
  width: min(35rem, 100%);
  max-height: min(42rem, calc(100dvh - 2rem));
  display: grid;
  gap: 1rem;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line-soft));
  border-radius: 0.5rem;
  background: var(--surface);
  padding: 1rem;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}
.td-ttable-editor > header {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.25rem;
  align-items: center;
  gap: 0.75rem;
}
.td-ttable-editor > header > div:nth-child(2) {
  min-width: 0;
}
.td-ttable-editor-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--primary);
}
.td-ttable-editor-icon .material-symbols-rounded {
  font-size: 1.25rem;
}
.td-ttable-editor > header span,
.td-ttable-editor > header p {
  display: block;
  margin: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-ttable-editor > header h3 {
  margin: 0.1rem 0;
  color: var(--text);
  font-size: 1rem;
}
.td-ttable-editor .modal-field textarea {
  min-height: 8rem;
  resize: vertical;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.78rem;
}
.td-ttable-editor > footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  border-top: 1px solid var(--line-soft);
  padding-top: 0.8rem;
}
[data-theme=dark] .td-task-ttable-host .tt-pagination {
  background: var(--surface);
}
@media (max-width: 42rem) {
  .td-task-ttable-host,
  .td-task-ttable-host .tt-canvas-table-panel {
    min-height: 17rem;
  }
  .td-ttable-editor-backdrop {
    align-items: end;
    padding: 0;
  }
  .td-ttable-editor {
    width: 100%;
    max-height: 88dvh;
    border-radius: 0.5rem 0.5rem 0 0;
  }
  .td-ttable-pagination-content {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.4rem;
  }
  .td-ttable-pagination-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
/*# sourceMappingURL=tasks-kanban.css.map */