html.ui-v2 :is(.ticket-list-page, .ticket-detail-page) .card,
html.ui-v2 .page:has(#create-ticket-form) .card {
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-panel);
  color: var(--ui-text);
}

html.ui-v2 :is(.ticket-list-page, .ticket-detail-page, .page:has(#create-ticket-form)) :is(.btn-secondary, .btn-ghost) {
  border-color: var(--ui-border-strong);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}

html.ui-v2 :is(.ticket-list-page, .ticket-detail-page, .page:has(#create-ticket-form)) .btn-primary {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  color: var(--ui-on-accent);
}

html.ui-v2 .ticket-saved-views {
  display: flex;
  min-width: 0;
  gap: var(--ui-space-1);
  margin-bottom: var(--ui-space-3);
  border-bottom: 1px solid var(--ui-border-subtle);
  overflow-x: auto;
  scrollbar-width: thin;
}

html.ui-v2 .ticket-saved-views button {
  min-height: var(--ui-control-height);
  flex: 0 0 auto;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ui-text-secondary);
  padding: 0 var(--ui-space-4);
  white-space: nowrap;
}

html.ui-v2 .ticket-saved-views button:hover {
  background: var(--ui-surface-hover);
  color: var(--ui-text);
}

html.ui-v2 .ticket-saved-views button.active {
  border-bottom-color: var(--ui-accent);
  color: var(--ui-text);
}

html.ui-v2 .ticket-list-page .filter-bar {
  display: grid;
  grid-template-columns: minmax(240px, 1.8fr) repeat(3, minmax(150px, 1fr)) auto;
  align-items: center;
  gap: var(--ui-space-2);
  margin-bottom: var(--ui-space-3);
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface);
  padding: var(--ui-space-3);
}

html.ui-v2 .ticket-list-page .filter-bar :is(.input-field, .select-input) {
  width: 100%;
  min-width: 0;
  max-width: none;
  border-color: var(--ui-border-strong);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}

html.ui-v2 .ticket-list-page #btn-my-tickets[aria-pressed="true"] {
  border-color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent), transparent 86%);
  color: var(--ui-accent);
}

html.ui-v2 .ticket-list-page .stats-row {
  display: none;
}

html.ui-v2 .ticket-list-page .filter-badges {
  gap: var(--ui-space-2);
}

html.ui-v2 .ticket-list-page .filter-badge {
  border-color: var(--ui-border);
  background: var(--ui-surface-raised);
  box-shadow: none;
  color: var(--ui-text-secondary);
}

html.ui-v2 .ticket-list-page :is(.filter-badge-remove, .filter-reset) {
  color: var(--ui-text-muted);
}

html.ui-v2 .tickets-table-wrapper {
  border-color: var(--ui-border-subtle);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface);
  box-shadow: none;
}

html.ui-v2 .tickets-table-wrapper .data-table {
  min-width: 860px;
}

html.ui-v2 .tickets-table-wrapper .data-table th {
  top: 0;
  border-color: var(--ui-border-subtle);
  background: var(--ui-surface-raised);
  color: var(--ui-text-muted);
  font-size: var(--font-xs);
  padding: var(--ui-space-3);
}

html.ui-v2 .tickets-table-wrapper .data-table td {
  min-height: var(--ui-row-height);
  border-color: var(--ui-border-subtle);
  background: var(--ui-surface);
  color: var(--ui-text);
  font-size: var(--font-sm);
  padding: var(--ui-space-3);
}

html.ui-v2 .tickets-table-wrapper .data-table tbody tr:hover td {
  background: var(--ui-surface-hover);
}

html.ui-v2 .ticket-table-nr {
  color: var(--ui-text-muted);
  font-size: var(--font-xs);
}

html.ui-v2 .ticket-table-category {
  display: block;
  margin-top: var(--ui-space-1);
}

html.ui-v2 :is(.ticket-table-assignee, .ticket-table-updated) {
  color: var(--ui-text-secondary);
}

html.ui-v2 .ticket-table-updated {
  white-space: nowrap;
}

html.ui-v2 .ticket-list-page .empty-state {
  background: var(--ui-surface);
  color: var(--ui-text-secondary);
}

html.ui-v2 .ticket-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-4);
  color: var(--ui-text-secondary);
}

html.ui-v2 .ticket-pagination span {
  min-width: 180px;
  text-align: center;
}

html.ui-v2 :is(.ticket-list-page, .ticket-detail-page) :is(
  .badge-offen,
  .badge-bearbeitung,
  .badge-custom,
  .badge-erledigt,
  .badge-rejected,
  [class*="badge-cat"],
  [class*="badge-niedrig"],
  [class*="badge-mittel"],
  [class*="badge-hoch"],
  [class*="badge-kritisch"]
) {
  border-color: var(--ui-border);
  background: var(--ui-surface-raised);
  color: var(--ui-text-secondary);
}

html.ui-v2 :is(.ticket-list-page, .ticket-detail-page) .badge-kritisch {
  border-color: color-mix(in srgb, var(--ui-danger), transparent 45%);
  background: color-mix(in srgb, var(--ui-danger), transparent 86%);
  color: var(--ui-danger);
}

html.ui-v2 :is(.ticket-list-page, .ticket-detail-page) .badge-hoch {
  border-color: color-mix(in srgb, var(--ui-warning), transparent 48%);
  background: color-mix(in srgb, var(--ui-warning), transparent 87%);
  color: var(--ui-warning);
}

html.ui-v2 :is(.ticket-list-page, .ticket-detail-page) .badge-erledigt {
  border-color: color-mix(in srgb, var(--ui-success), transparent 45%);
  background: color-mix(in srgb, var(--ui-success), transparent 85%);
  color: var(--ui-success);
}

html.ui-v2 :is(.ticket-list-page, .ticket-detail-page) :is(.badge-offen, .badge-bearbeitung) {
  border-color: color-mix(in srgb, var(--ui-info), transparent 48%);
  background: color-mix(in srgb, var(--ui-info), transparent 86%);
  color: var(--ui-info);
}

html.ui-v2 .ticket-card {
  border-color: var(--ui-border-subtle);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface);
  box-shadow: none;
}

html.ui-v2 .ticket-card-title {
  color: var(--ui-text);
}

html.ui-v2 :is(.ticket-card-nr, .ticket-card-sub, .ticket-card-pl, .ticket-card-date, .transfer-list-hint) {
  color: var(--ui-text-muted);
}

html.ui-v2 .ticket-detail-page > .page-header {
  position: sticky;
  z-index: 18;
  top: 56px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-panel);
  background: color-mix(in srgb, var(--ui-surface-raised), transparent 3%);
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.22);
  padding: var(--ui-space-3);
}

html.ui-v2 .ticket-header-info {
  gap: var(--ui-space-3);
}

html.ui-v2 .ticket-header-info .page-title {
  font-size: var(--font-xl);
}

html.ui-v2 .ticket-nr-badge {
  border-color: var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text-secondary);
}

html.ui-v2 .ticket-record-summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ui-space-2);
  flex-wrap: wrap;
}

html.ui-v2 .ticket-record-assignee {
  color: var(--ui-text-secondary);
  font-size: var(--font-sm);
  font-weight: 600;
}

html.ui-v2 .ticket-detail-page .detail-grid {
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--ui-space-4);
}

html.ui-v2 .ticket-detail-page .detail-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--ui-space-3);
}

html.ui-v2 .ticket-detail-page .detail-main > * {
  margin-bottom: 0;
}

html.ui-v2 .ticket-detail-page .ticket-properties {
  order: 1;
}

html.ui-v2 .ticket-detail-page .comments-card {
  order: 2;
}

html.ui-v2 .ticket-detail-page .action-panel {
  order: 3;
}

html.ui-v2 .ticket-detail-page :is(.transfer-history-card, .attachments-card) {
  order: 4;
}

html.ui-v2 .ticket-detail-page #delete-panel {
  order: 5;
}

html.ui-v2 .ticket-properties > summary,
html.ui-v2 .ticket-detail-page .detail-sidebar summary {
  min-height: var(--ui-control-height);
  cursor: pointer;
  color: var(--ui-text);
  font-size: var(--font-md);
  font-weight: 700;
  padding: var(--ui-space-3) var(--ui-space-4);
}

html.ui-v2 .ticket-properties[open] > summary,
html.ui-v2 .ticket-detail-page .detail-sidebar details[open] > summary {
  border-bottom: 1px solid var(--ui-border-subtle);
}

html.ui-v2 .ticket-properties-content {
  padding: var(--ui-space-4);
}

html.ui-v2 .ticket-detail-page .meta-label,
html.ui-v2 .ticket-detail-page .field-hint {
  color: var(--ui-text-muted);
}

html.ui-v2 .ticket-detail-page .detail-description {
  border-color: var(--ui-border-subtle);
}

html.ui-v2 .ticket-detail-page .detail-description p {
  color: var(--ui-text-secondary);
}

html.ui-v2 .ticket-detail-page .detail-sidebar {
  position: sticky;
  top: 150px;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--ui-space-3);
}

html.ui-v2 .ticket-detail-page .detail-sidebar > .card {
  margin: 0;
}

html.ui-v2 .ticket-detail-page .detail-sidebar :is(.history-list, .rejection-history-list) {
  padding: var(--ui-space-4);
}

html.ui-v2 .ticket-detail-page :is(.history-status, .comment-author, .comment-label, .action-section > label, .claim-state) {
  color: var(--ui-text);
}

html.ui-v2 .ticket-detail-page :is(.history-meta, .history-note, .comment-time) {
  color: var(--ui-text-muted);
}

html.ui-v2 .ticket-detail-page .history-item:not(:last-child)::before {
  background: var(--ui-border);
}

html.ui-v2 .ticket-detail-page .history-dot {
  border-color: var(--ui-border-strong);
  background: var(--ui-surface-raised);
}

html.ui-v2 .ticket-detail-page .comment-card {
  border-color: var(--ui-border-subtle);
  background: var(--ui-surface-raised);
}

html.ui-v2 .ticket-detail-page .comment-body {
  color: var(--ui-text-secondary);
}

html.ui-v2 .ticket-detail-page .comment-form-wrapper,
html.ui-v2 .ticket-detail-page .action-section + .action-section,
html.ui-v2 .ticket-detail-page .detail-description {
  border-color: var(--ui-border-subtle);
}

html.ui-v2 .ticket-detail-page .action-panel,
html.ui-v2 .ticket-detail-page .comments-card,
html.ui-v2 .ticket-detail-page .attachments-card {
  padding: var(--ui-space-4);
}

html.ui-v2 .ticket-detail-page .upload-zone {
  border-color: var(--ui-border-strong);
  background: var(--ui-surface-raised);
}

html.ui-v2 .ticket-detail-page .mention-dropdown,
html.ui-v2 .page:has(#create-ticket-form) .assignment-dropdown-menu {
  border-color: var(--ui-border-strong);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}

html.ui-v2 .ticket-detail-page .mention-item,
html.ui-v2 .page:has(#create-ticket-form) .assignment-dropdown-toggle {
  border-color: var(--ui-border-strong);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}

html.ui-v2 .ticket-detail-page .mention-item:hover,
html.ui-v2 .ticket-detail-page .mention-item.active {
  background: var(--ui-surface-hover);
}

html.ui-v2 .page:has(#create-ticket-form) .form-card-create {
  max-width: 780px;
  margin-inline: auto;
  padding: var(--ui-space-5);
}

@media (max-width: 1180px) {
  html.ui-v2 .ticket-list-page .filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  html.ui-v2 .ticket-detail-page .detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  html.ui-v2 .ticket-detail-page .detail-sidebar {
    position: static;
    order: 2;
  }

  html.ui-v2 .ticket-detail-page .detail-sidebar > details:not([open]) > :not(summary) {
    display: none;
  }
}

@media (max-width: 640px) {
  html.ui-v2 .ticket-list-page .filter-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  html.ui-v2 .ticket-saved-views {
    margin-inline: 0;
  }

  html.ui-v2 .ticket-detail-page > .page-header {
    position: static;
    grid-template-columns: minmax(0, 1fr);
  }

  html.ui-v2 .ticket-detail-page > .page-header > .btn {
    width: fit-content;
  }

  html.ui-v2 .ticket-record-summary {
    justify-content: flex-start;
  }

  html.ui-v2 .ticket-detail-page .meta-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  html.ui-v2 .page:has(#create-ticket-form) .form-card-create {
    padding: var(--ui-space-4);
  }
}