@layer components {

/* ============================================
 * ISSUES PAGE REDESIGN - Enhanced Visual Hierarchy
 * ============================================ */

/* Issues Page Layout */
.issues-page {
  max-inline-size: 900px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Enhanced Issues Page */
.issues-page--redesigned {
  max-inline-size: 1000px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
  background: var(--color-bg-subtle);
  min-block-size: 100vh;
  min-block-size: 100dvh;
}

  @media (width <= 768px) {
.issues-page--redesigned {
    padding: var(--space-4) var(--space-3)
}
  }

/* Issues Page Header (MC-45: Redesigned with inline view-as dropdown) */
.issues-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-block-end: var(--space-4);
  flex-wrap: wrap;
}

  .issues-page-header__title-section {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
  }

.issues-page-header__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  line-height: var(--leading-tight);
}

  .issues-page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
  }

/* ============================================
 * ENHANCED PAGE HEADER
 * ============================================ */

.page-header--enhanced {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-block-end: var(--space-4);
  padding: var(--space-6);
  background: var(--color-bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--color-border-primary);
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}

  @media (width <= 768px) {
.page-header--enhanced {
    flex-direction: column;
    padding: var(--space-4)
}
  }

.page-header__title-section {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-1);
}

.page-header__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  line-height: var(--leading-tight);
}

.page-header__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  font-weight: 500;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

  @media (width <= 768px) {
.header-actions {
    inline-size: 100%;
    flex-wrap: wrap
}

    .header-actions .btn-primary,
    .header-actions .btn-secondary {
      flex: 1;
      min-inline-size: 120px;
    }
  }

.workspace-status {
  font-size: var(--text-sm);
  color: var(--color-status-success-action);
  background: var(--color-status-success-bg);
  padding: var(--space-1) var(--space-3);
  border-radius: 9999px;
  font-weight: 500;
}

/* ============================================
 * ENHANCED TEAM SECTIONS
 * ============================================ */

.teams-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Flat issues container (no team grouping) */
.issues-container {
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.team-section--enhanced {
  background: var(--color-bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--color-border-primary);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.team-header--enhanced {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-block-end: none;
  margin-block-end: 0;
  background: var(--color-bg-subtle);
}

.team-header__indicator {
  inline-size: 4px;
  background: var(--team-color, var(--color-primary-500));
  flex-shrink: 0;
}

.team-header__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  flex: 1;
}

  @media (width <= 768px) {
.team-header__content {
    padding: var(--space-3) var(--space-4)
}
  }

.team-header__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.team-header__name {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-emphasis);
  margin: 0;
}

.team-header__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 24px;
  block-size: 24px;
  padding: 0 var(--space-2);
  background: var(--team-color, var(--color-primary-500));
  color: var(--color-text-inverse);
  border-radius: 9999px;
  font-size: var(--text-xs);
  font-weight: 600;
}

.team-header__meta {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* ============================================
 * ENHANCED ISSUES LIST
 * ============================================ */

.issues-list--enhanced {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

  .issues-list--enhanced .issue-card--enhanced:not(:last-child) {
    border-block-end: none;
  }

  /* Remove any borders between compact issue cards */
  .issues-list--enhanced .issue-card--compact:not(:last-child) {
    border-block-end: none;
  }

/* ============================================
 * ENHANCED ISSUE CARD
 * ============================================ */

/* stylelint-disable-next-line no-descending-specificity */
.issue-card--enhanced {
  display: flex;
  gap: 0;
  padding: 0;
  background: var(--color-bg-secondary);
  border: none;
  border-radius: 0;
  transition: background-color 0.15s ease;
}

/* stylelint-disable-next-line no-descending-specificity */
.issue-card--enhanced:hover {
  background: var(--color-bg-subtle);
}

.issue-card__priority-indicator {
  inline-size: 3px;
  flex-shrink: 0;
}

  .issue-card__priority-indicator.priority-urgent {
    background: var(--color-error-500);
  }

  .issue-card__priority-indicator.priority-high {
    background: #f97316;
  }

  .issue-card__priority-indicator.priority-medium {
    background: var(--color-warning-500);
  }

  .issue-card__priority-indicator.priority-low {
    background: var(--color-success-500);
  }

  .issue-card__priority-indicator.priority-none {
    background: var(--color-border-secondary);
  }

.issue-card__main {
  flex: 1;
  min-inline-size: 0;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

  @media (width <= 768px) {
.issue-card__main {
    padding: var(--space-3) var(--space-4)
}
  }

.issue-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.issue-card__identifier {
  font-family: var(--font-family-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  background: var(--color-bg-tertiary);
  padding: var(--space-0-5) var(--space-2);
  border-radius: 4px;
  font-weight: 500;
}

.issue-card__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
}

.issue-card__status-dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--status-color, #888);
}

.issue-card__status-label {
  color: var(--color-text-secondary);
}

.issue-card__title {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-emphasis);
  margin: 0;
  line-height: var(--leading-snug);
}

.issue-card__title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.issue-card__title-link:hover {
  color: var(--color-text-accent-bright);
  text-decoration: none;
}

/* Issue Card Labels */
.issue-card__labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-block-start: var(--space-2);
}

  .issue-card__labels .label-tag {
    font-size: 0.6875rem;
    padding: var(--space-0-5) var(--space-1-5);
  }

  .issue-card__labels .label-dot {
    inline-size: 5px;
    block-size: 5px;
    border-radius: 50%;
    background: var(--label-color, #888);
    flex-shrink: 0;
  }

  .issue-card__labels .label-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-inline-size: 100px;
  }

/* Clickable Label Tags */
.label-tag--clickable {
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}

  .label-tag--clickable:hover {
    background: color-mix(in srgb, var(--label-color, #888) 20%, white);
    border-color: color-mix(in srgb, var(--label-color, #888) 35%, white);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .label-tag--clickable:active {
    transform: translateY(0);
    box-shadow: none;
  }

.issue-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-start: var(--space-1);
}

  @media (width <= 768px) {
.issue-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2)
}
  }

.issue-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Priority Badge Styles */
.priority-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: 500;
}

  .priority-badge__icon {
    inline-size: 4px;
    block-size: 4px;
    border-radius: 50%;
  }

.priority-badge--urgent {
  background: var(--color-status-error-bg);
  color: var(--color-error-700);
}

    .priority-badge--urgent .priority-badge__icon {
      background: var(--color-error-500);
    }

  .priority-badge--high {
    background: #fff7ed;
    color: #c2410c;
  }

    .priority-badge--high .priority-badge__icon {
      background: #f97316;
    }

.priority-badge--medium {
  background: var(--color-status-warning-bg);
  color: var(--color-status-warning-text);
}

    .priority-badge--medium .priority-badge__icon {
      background: var(--color-warning-500);
    }

.priority-badge--low {
  background: var(--color-status-success-bg);
  color: var(--color-green-800);
}

    .priority-badge--low .priority-badge__icon {
      background: var(--color-success-500);
    }

.priority-badge--none {
  background: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
}

    .priority-badge--none .priority-badge__icon {
      background: var(--color-border-muted);
    }

/* Assignee Styles */
.issue-card__assignee {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.issue-card__avatar {
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.issue-card__avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-accent-hover);
  color: var(--color-text-accent-bright);
  font-size: var(--text-xs);
  font-weight: 600;
}

.issue-card__assignee-name {
  font-weight: 500;
}

.issue-card__assignee-name--unassigned {
  color: var(--color-text-muted);
  font-style: italic;
  font-weight: 400;
}

/* ============================================
 * COMPACT ISSUE CARD (Linear-style Layout)
 * Two-section layout: left (main info) + right (metadata)
 * ============================================ */

/* MC-167: Card stays within the period group boundary. A ::before pseudo-element
   extends into the gutter for hover detection so checkboxes appear when hovering
   the gutter column. This avoids background color bleeding into the gutter. */
.issue-card.issue-card--compact {
  --checkbox-gutter: 24px;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px var(--space-3);
  background: transparent;
  border: none;
  border-radius: 0;
  min-block-size: 28px;
  gap: var(--space-4);
  box-shadow: none;
}

  /* Invisible hover zone extending into the gutter for checkbox hover detection.
     The pseudo-element is part of the card, so hovering it triggers :hover on
     the card, revealing the checkbox without extending the card's background. */
  .issue-card.issue-card--compact::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-block-end: 0;
    left: calc(-1 * var(--checkbox-gutter));
    inline-size: var(--checkbox-gutter);
  }

  .issue-card.issue-card--compact:hover {
    box-shadow: none;
    background: transparent;
  }

  /* Compact card selected state - minimal styling */
  .issue-card.issue-card--compact:has(.issue-checkbox--compact:checked) {
    background: transparent;
  }

  @media (width <= 768px) {
.issue-card.issue-card--compact {
    --checkbox-gutter: 20px;

    padding: 2px var(--space-2);
    gap: var(--space-2)
}
  }

/* Left Section - Main content */
.issue-card-compact__left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
  flex: 1;
  position: relative;
}

  @media (width <= 640px) {
.issue-card-compact__left {
    gap: var(--space-1-5)
}
  }

/* Right Section - Metadata */
.issue-card-compact__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

  @media (width <= 640px) {
.issue-card-compact__right {
    gap: var(--space-2)
}
  }

/* MC-167: Compact Checkbox - positioned in gutter area outside period group border.
   left value places the checkbox ~8px outside the period group border.
   Uses the --checkbox-gutter variable defined on .issue-card--compact. */
/* Note: :has() requires Chrome 105+, Safari 15.4+, Firefox 121+ */
.issue-card-compact__checkbox {
  position: absolute;
  left: calc(-1 * var(--checkbox-gutter) - 10px);
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 14px;
  z-index: 1;
  visibility: hidden;
}

.issue-card--compact:hover .issue-card-compact__checkbox,
.issue-card--compact:has(.issue-checkbox--compact:checked) .issue-card-compact__checkbox,
/* stylelint-disable-next-line no-descending-specificity */
.issue-card--compact:focus-within .issue-card-compact__checkbox {
  visibility: visible;
}

.issue-checkbox--compact {
  /* Override inherited visibility:hidden so checkbox stays in tab order */
  visibility: visible;
  opacity: 0;
  appearance: none;
  box-sizing: border-box;
  inline-size: 14px;
  block-size: 14px;
  min-inline-size: 14px;
  max-block-size: 14px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border: 1.5px solid var(--color-border-muted);
  border-radius: 3px;
  background-color: var(--color-bg-secondary);
  transition: all 0.15s ease;
}

  .issue-checkbox--compact:checked {
    opacity: 1;
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
    background-size: 10px;
    background-position: center;
    background-repeat: no-repeat;
  }

  .issue-checkbox--compact:hover {
    border-color: var(--color-primary-400);
  }

  .issue-checkbox--compact:focus-visible {
    opacity: 1;
    outline: 2px solid var(--color-primary-300);
    outline-offset: 1px;
  }

  html[data-theme="dark"] .issue-checkbox--compact {
    background-color: var(--color-slate-800, #1e293b);
    border-color: var(--color-slate-500, #64748b);
  }

    html[data-theme="dark"] .issue-checkbox--compact:checked {
      background-color: var(--color-primary-500);
      border-color: var(--color-primary-500);
    }

    html[data-theme="dark"] .issue-checkbox--compact:hover {
      border-color: var(--color-primary-400);
    }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .issue-checkbox--compact {
      background-color: var(--color-slate-800, #1e293b);
      border-color: var(--color-slate-500, #64748b);
    }

      html:not([data-theme]) .issue-checkbox--compact:checked {
        background-color: var(--color-primary-500);
        border-color: var(--color-primary-500);
      }

      html:not([data-theme]) .issue-checkbox--compact:hover {
        border-color: var(--color-primary-400);
      }
  }

/* stylelint-disable-next-line no-descending-specificity */
.issue-card--compact:hover .issue-checkbox--compact {
  opacity: 1;
}

/* Priority Icon (bar chart style) */
.issue-card-compact__priority {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

  .issue-card-compact__priority.priority-urgent {
    color: var(--color-error-500);
  }

  .issue-card-compact__priority.priority-high {
    color: #f97316;
  }

  .issue-card-compact__priority.priority-medium {
    color: var(--color-warning-500);
  }

.issue-card-compact__priority.priority-low {
  color: var(--color-text-muted);
}

  .issue-card-compact__priority.priority-none {
    color: var(--color-text-muted);
  }

/* Compact Identifier - fixed width for vertical alignment */
.issue-card-compact__identifier {
  font-family: var(--font-family-mono);
  font-size: 13px;
  color: var(--color-text-tertiary);
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
  min-inline-size: 72px;
  text-align: start;
}

  @media (width <= 640px) {
.issue-card-compact__identifier {
    font-size: 11px;
    min-inline-size: 60px
}
  }

/* Status Icon (circle with state indicator) */
.issue-card-compact__status {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

  .issue-card-compact__status svg {
    display: block;
  }

/* Compact Title */
.issue-card-compact__title {
  flex: 1;
  min-inline-size: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-strong);
  margin: 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

  @media (width <= 640px) {
.issue-card-compact__title {
    font-size: 12px
}
  }

.issue-card-compact__title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.issue-card-compact__title-link:hover {
  color: var(--color-text-primary);
}

/* Labels (pill style with dot + text) - expandable on hover */
.issue-card-compact__labels {
  display: flex;
  align-items: center;
  gap: 8px;  /* MC-77: Fixed 8px gap for reliable visual separation */
  flex-shrink: 0;
  position: relative;
}

  .issue-card-compact__labels:hover .issue-card-compact__label--hidden {
    max-inline-size: 150px;
    padding: 2px 8px 2px 6px;
    margin-inline-start: 0;
    opacity: 1;
  }

  /* Hide the +N indicator when labels are expanded */
  .issue-card-compact__labels:hover .issue-card-compact__label-more {
    opacity: 0;
    pointer-events: none;
  }

  /* MC-114: Tablet and below - hide labels but show project (project hidden at 640px) */
  @media (width <= 1024px) {
.issue-card-compact__labels {
    display: none
}
  }

.issue-card-compact__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 6px;
  border-radius: 12px;
  background: transparent;
  transition: opacity 0.2s ease, max-width 0.3s ease, padding 0.3s ease, margin 0.3s ease;
}

  /* Hidden labels (all except the first) */
  /* stylelint-disable-next-line no-descending-specificity */
  .issue-card-compact__label--hidden {
    max-inline-size: 0;
    padding: 2px 0;
    margin-inline-start: -4px;
    opacity: 0;
    overflow: hidden;
  }

.issue-card-compact__label-dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--label-color, #888);
  flex-shrink: 0;
}

.issue-card-compact__label-text {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: 500;
  white-space: nowrap;
  max-inline-size: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

  @media (width <= 1024px) {
.issue-card-compact__label-text {
    max-inline-size: 60px
}
  }

/* stylelint-disable-next-line no-descending-specificity */
.issue-card-compact__label-more {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

/* MC-114: Project badge with Linear project color */
.issue-card-compact__project {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  /* Limit badge width to ~15 characters before truncation */
  max-inline-size: 120px;
  flex-shrink: 0;
  /* Use project color with 15% opacity for background, or theme-appropriate gray fallback */
  background: color-mix(in srgb, var(--project-color, var(--color-neutral-400)) 15%, transparent);
  color: var(--color-text-secondary);
}

  /* MC-114: Mobile - hide project badge */
  @media (width <= 640px) {
.issue-card-compact__project {
    display: none
}
  }

.issue-card-compact__project-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Meta items (comments, sub-issues, etc.) */
.issue-card-compact__meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 500;
}

  .issue-card-compact__meta-item svg {
    flex-shrink: 0;
  }

  @media (width <= 768px) {
    .issue-card-compact__meta-item span {
      display: none;
    }
  }

/* Compact Assignee */
.issue-card-compact__assignee {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-inline-size: 20px;
}

button.issue-card-compact__assignee--editable {
  border: none;
  background: transparent;
  padding: 2px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.15s ease;
}

button.issue-card-compact__assignee--editable:hover {
  background: var(--color-bg-tertiary);
  box-shadow: 0 0 0 2px var(--color-border-primary);
}

.issue-card-compact__avatar {
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.issue-card-compact__avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-accent-hover);
  color: var(--color-text-accent-bright);
  font-size: 10px;
  font-weight: 600;
}

/* Date */
.issue-card-compact__date {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 400;
  white-space: nowrap;
  min-inline-size: 45px;
  text-align: end;
}

  @media (width <= 768px) {
.issue-card-compact__date {
    display: none
}
  }

/* ============================================
 * RESPONSIVE DESIGN FOR ENHANCED STYLES
 * ============================================ */

/* (Responsive rules for enhanced styles are nested into their respective
   component blocks above.) */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-block-end: 2rem;
  flex-wrap: wrap;
}

.page-header h1 {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-text-emphasis);
  margin: 0;
}

/* Filters Container */
.filters-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-block-end: var(--space-4);
}

/* Filters Header and Toggle Button */
.filters-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.filters-toggle-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.filters-toggle-button:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-secondary);
  color: var(--color-text-strong);
}

  .filters-toggle-button:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-indigo-alpha-10);
  }

  .filters-toggle-button[aria-expanded="true"] .filters-chevron {
    transform: rotate(180deg);
  }

.filters-toggle-icon {
  color: var(--color-text-tertiary);
  transition: transform 0.2s ease;
}

  .filters-toggle-icon--collapsed {
    transform: rotate(0deg);
  }

  .filters-toggle-icon--expanded {
    transform: rotate(180deg);
  }

/* stylelint-disable-next-line no-descending-specificity */
.filters-chevron {
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}

.filters-content--expanded + .filters-header .filters-chevron {
  transform: rotate(180deg);
}

/* Filters Content - Collapsible */
.filters-content {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-bg-subtle);
  border-radius: 6px;
}

  /* Search filter takes full width on desktop */
  .filters-content .search-filter {
    inline-size: 100%;
    flex-basis: 100%;
  }

  .filters-content--collapsed {
    display: none;
  }

  .filters-content--expanded {
    display: flex;
    margin-block-start: 0.5rem;
  }

  html[data-theme="dark"] .filters-content {
    background: var(--color-surface-dark);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .filters-content {
      background: var(--color-surface-dark);
    }
  }

/* Search Filter */
/* stylelint-disable-next-line no-descending-specificity */
.search-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: none;
  border-radius: 0;
  flex-wrap: nowrap;
}

  @media (width <= 768px) {
.search-filter {
    flex-direction: column;
    align-items: flex-start
}
  }

.search-filter-form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-inline-size: 0;
  flex-wrap: wrap;
}

  @media (width <= 768px) {
.search-filter-form {
    inline-size: 100%
}
  }

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-inline-size: 200px;
  max-inline-size: 400px;
}

  @media (width <= 768px) {
.search-input-wrapper {
    max-inline-size: none
}
  }

.search-icon {
  position: absolute;
  inset-inline-start: 0.75rem;
  color: var(--color-text-muted);
  pointer-events: none;
  flex-shrink: 0;
}

.search-input {
  inline-size: 100%;
  padding: 0.5rem 2.25rem;
  padding-inline-start: 2.25rem;
  padding-inline-end: 2.25rem;
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  font-size: 0.875rem;
  font-family: inherit;
  background: var(--color-bg-secondary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

  .search-input:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-indigo-alpha-10);
  }

.search-input::placeholder {
  color: var(--color-text-muted);
}

.search-clear-button {
  position: absolute;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.search-clear-button:hover {
  color: var(--color-text-secondary);
  background: var(--color-bg-tertiary);
}

  .search-clear-button.hidden {
    display: none;
  }

.search-filter-clear {
  font-size: 0.8125rem;
  color: var(--color-text-link);
  text-decoration: none;
  white-space: nowrap;
}

  .search-filter-clear:hover {
    text-decoration: underline;
  }

/* Priority Filter */
.priority-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: none;
  border-radius: 0;
  flex-wrap: nowrap;
}

  @media (width <= 768px) {
.priority-filter {
    flex-direction: column;
    align-items: flex-start
}
  }

.filter-label {
  display: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

  html[data-theme="dark"] .filter-label {
    color: var(--color-slate-400);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .filter-label {
      color: var(--color-slate-400);
    }
  }

.priority-filter-dropdown {
  position: relative;
}

  .priority-filter-dropdown.open .priority-filter-toggle {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-indigo-alpha-10);
  }

  .priority-filter-dropdown .dropdown-arrow {
    transition: transform 0.15s ease;
  }

  .priority-filter-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
  }

  .priority-filter-dropdown.open .priority-filter-menu {
    display: block;
  }

  @media (width <= 768px) {
.priority-filter-dropdown {
    inline-size: 100%
}
  }

/* stylelint-disable-next-line no-descending-specificity */
.priority-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: transparent;
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-strong);
  cursor: pointer;
  transition: all 0.15s ease;
  min-inline-size: 140px;
  justify-content: space-between;
}

  /* stylelint-disable-next-line no-descending-specificity */
  .priority-filter-toggle:hover {
    border-color: var(--color-border-muted);
    background: var(--color-hover-subtle);
  }

  @media (width <= 768px) {
.priority-filter-toggle {
    inline-size: 100%
}
  }

.priority-icon {
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  background: transparent;
}

/* stylelint-disable-next-line no-descending-specificity */
.priority-filter-menu {
  position: absolute;
  inset-block-start: calc(100% + 4px);
  left: 0;
  z-index: 50;
  min-inline-size: 180px;
  max-block-size: 300px;
  overflow-y: auto;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-dropdown);
  padding: 0.5rem;
  display: none;
}

  @media (width <= 768px) {
.priority-filter-menu {
    inline-size: 100%
}
  }

.priority-filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--color-text-strong);
}

.priority-filter-option:hover {
  background: var(--color-bg-subtle);
}

.priority-filter-option.active {
  background: var(--color-bg-accent);
}

.priority-filter-option input[type="checkbox"] {
  appearance: none;
  inline-size: 16px;
  block-size: 16px;
  min-inline-size: 16px;
  border: 1.5px solid var(--color-border-muted);
  border-radius: 4px;
  background-color: var(--color-bg-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

    .priority-filter-option input[type="checkbox"]:checked {
      background-color: var(--color-primary-500);
      border-color: var(--color-primary-500);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
      background-size: 12px;
      background-position: center;
      background-repeat: no-repeat;
    }

    .priority-filter-option input[type="checkbox"]:hover {
      border-color: var(--color-primary-400);
    }

  .priority-filter-option.priority-urgent .priority-color-dot {
    background: var(--color-error-500);
  }

  .priority-filter-option.priority-high .priority-color-dot {
    background: #f97316;
  }

  .priority-filter-option.priority-medium .priority-color-dot {
    background: var(--color-warning-500);
  }

  .priority-filter-option.priority-low .priority-color-dot {
    background: var(--color-success-500);
  }

  .priority-filter-option.priority-none .priority-color-dot {
    background: var(--color-border-muted);
  }

    html[data-theme="dark"] .priority-filter-option.priority-urgent, html[data-theme="dark"] .priority-filter-option.priority-high, html[data-theme="dark"] .priority-filter-option.priority-medium, html[data-theme="dark"] .priority-filter-option.priority-low, html[data-theme="dark"] .priority-filter-option.priority-none {
      background: transparent;
      color: var(--color-slate-200);
    }

      html[data-theme="dark"] .priority-filter-option.priority-urgent.active, html[data-theme="dark"] .priority-filter-option.priority-high.active, html[data-theme="dark"] .priority-filter-option.priority-medium.active, html[data-theme="dark"] .priority-filter-option.priority-low.active, html[data-theme="dark"] .priority-filter-option.priority-none.active {
        background: var(--color-primary-alpha-15);
      }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) .priority-filter-option.priority-urgent, html:not([data-theme]) .priority-filter-option.priority-high, html:not([data-theme]) .priority-filter-option.priority-medium, html:not([data-theme]) .priority-filter-option.priority-low, html:not([data-theme]) .priority-filter-option.priority-none {
        background: transparent;
        color: var(--color-slate-200);
      }

        html:not([data-theme]) .priority-filter-option.priority-urgent.active, html:not([data-theme]) .priority-filter-option.priority-high.active, html:not([data-theme]) .priority-filter-option.priority-medium.active, html:not([data-theme]) .priority-filter-option.priority-low.active, html:not([data-theme]) .priority-filter-option.priority-none.active {
          background: rgba(19, 164, 236, 0.15);
        }
    }

/* stylelint-disable-next-line no-descending-specificity */
.priority-color-dot {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.priority-filter-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 16px;
  block-size: 16px;
  flex-shrink: 0;
  color: var(--color-text-tertiary);
  background: transparent;
}

  .priority-filter-icon svg {
    background: transparent;
  }

  .priority-filter-icon.priority-urgent {
    color: var(--color-error-500);
  }

  .priority-filter-icon.priority-high {
    color: #f97316;
  }

  .priority-filter-icon.priority-medium {
    color: var(--color-warning-500);
  }

  .priority-filter-icon.priority-low {
    color: var(--color-success-500);
  }

.priority-filter-icon.priority-none {
  color: var(--color-text-muted);
}

.priority-filter-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.priority-filter-actions {
  border-block-start: 1px solid var(--color-border-primary);
  margin-block-start: 0.5rem;
  padding-block-start: 0.5rem;
}

.priority-filter-clear {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-link);
  text-decoration: none;
  padding: 0.375rem 0.625rem;
  text-align: center;
}

  .priority-filter-clear:hover {
    text-decoration: underline;
  }

/* Status Filter */
.status-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: none;
  border-radius: 0;
  flex-wrap: nowrap;
}

  @media (width <= 768px) {
.status-filter {
    flex-direction: column;
    align-items: flex-start
}
  }

.status-filter-dropdown {
  position: relative;
}

  .status-filter-dropdown.open .status-filter-toggle {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-indigo-alpha-10);
  }

  .status-filter-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
  }

  .status-filter-dropdown.open .status-filter-menu {
    display: block;
  }

  @media (width <= 768px) {
.status-filter-dropdown {
    inline-size: 100%
}
  }

/* stylelint-disable-next-line no-descending-specificity */
.dropdown-arrow {
  transition: transform 0.15s ease;
}

/* stylelint-disable-next-line no-descending-specificity */
.status-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: transparent;
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-strong);
  cursor: pointer;
  transition: all 0.15s ease;
  min-inline-size: 140px;
  justify-content: space-between;
}

  /* stylelint-disable-next-line no-descending-specificity */
  .status-filter-toggle:hover {
    border-color: var(--color-border-muted);
    background: var(--color-hover-subtle);
  }

  @media (width <= 768px) {
.status-filter-toggle {
    inline-size: 100%
}
  }

/* stylelint-disable-next-line no-descending-specificity */
.status-filter-menu {
  position: absolute;
  inset-block-start: calc(100% + 4px);
  left: 0;
  z-index: 50;
  min-inline-size: 200px;
  max-block-size: 300px;
  overflow-y: auto;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-dropdown);
  padding: 0.5rem;
  display: none;
}

  @media (width <= 768px) {
.status-filter-menu {
    inline-size: 100%
}
  }

.status-filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--color-text-strong);
}

.status-filter-option:hover {
  background: var(--color-bg-subtle);
}

.status-filter-option.active {
  background: var(--color-bg-selected);
}

/* stylelint-disable-next-line no-descending-specificity */
.status-filter-option input[type="checkbox"] {
  appearance: none;
  inline-size: 16px;
  block-size: 16px;
  min-inline-size: 16px;
  border: 1.5px solid var(--color-border-muted);
  border-radius: 4px;
  background-color: var(--color-bg-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

    .status-filter-option input[type="checkbox"]:checked {
      background-color: var(--color-primary-500);
      border-color: var(--color-primary-500);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
      background-size: 12px;
      background-position: center;
      background-repeat: no-repeat;
    }

    .status-filter-option input[type="checkbox"]:hover {
      border-color: var(--color-primary-400);
    }

.status-color-dot {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--status-color, #888);
  flex-shrink: 0;
}

.status-filter-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-filter-actions {
  border-block-start: 1px solid var(--color-border-primary);
  margin-block-start: 0.5rem;
  padding-block-start: 0.5rem;
}

.status-filter-clear {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-link);
  text-decoration: none;
  padding: 0.375rem 0.625rem;
  text-align: center;
}

  .status-filter-clear:hover {
    text-decoration: underline;
  }

/* Team Filter */
.team-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: none;
  border-radius: 0;
  flex-wrap: nowrap;
}

  @media (width <= 768px) {
.team-filter {
    flex-direction: column;
    align-items: flex-start
}
  }

.team-filter-dropdown {
  position: relative;
}

  .team-filter-dropdown.open .team-filter-toggle {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-indigo-alpha-10);
  }

  /* stylelint-disable-next-line no-descending-specificity */
  .team-filter-dropdown .dropdown-arrow {
    transition: transform 0.15s ease;
  }

  .team-filter-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
  }

  .team-filter-dropdown.open .team-filter-menu {
    display: block;
  }

  @media (width <= 768px) {
.team-filter-dropdown {
    inline-size: 100%
}
  }

/* stylelint-disable-next-line no-descending-specificity */
.team-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: transparent;
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-strong);
  cursor: pointer;
  transition: all 0.15s ease;
  min-inline-size: 140px;
  justify-content: space-between;
}

  /* stylelint-disable-next-line no-descending-specificity */
  .team-filter-toggle:hover {
    border-color: var(--color-border-muted);
    background: var(--color-hover-subtle);
  }

  @media (width <= 768px) {
.team-filter-toggle {
    inline-size: 100%
}
  }

.team-icon {
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

/* stylelint-disable-next-line no-descending-specificity */
.team-filter-menu {
  position: absolute;
  inset-block-start: calc(100% + 4px);
  left: 0;
  z-index: 50;
  min-inline-size: 220px;
  max-block-size: 300px;
  overflow-y: auto;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-dropdown);
  padding: 0.5rem;
  display: none;
}

  @media (width <= 768px) {
.team-filter-menu {
    inline-size: 100%
}
  }

.team-filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--color-text-strong);
}

.team-filter-option:hover {
  background: var(--color-bg-subtle);
}

.team-filter-option.active {
  background: var(--color-bg-selected);
}

/* stylelint-disable-next-line no-descending-specificity */
.team-filter-option input[type="checkbox"] {
  appearance: none;
  inline-size: 16px;
  block-size: 16px;
  min-inline-size: 16px;
  border: 1.5px solid var(--color-border-muted);
  border-radius: 4px;
  background-color: var(--color-bg-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

    .team-filter-option input[type="checkbox"]:checked {
      background-color: var(--color-primary-500);
      border-color: var(--color-primary-500);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
      background-size: 12px;
      background-position: center;
      background-repeat: no-repeat;
    }

    .team-filter-option input[type="checkbox"]:hover {
      border-color: var(--color-primary-400);
    }

.team-color-dot {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--team-color, #6366f1);
  flex-shrink: 0;
}

.team-filter-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-filter-actions {
  border-block-start: 1px solid var(--color-border-primary);
  margin-block-start: 0.5rem;
  padding-block-start: 0.5rem;
}

.team-filter-clear {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-link);
  text-decoration: none;
  padding: 0.375rem 0.625rem;
  text-align: center;
}

  .team-filter-clear:hover {
    text-decoration: underline;
  }

/* Assignee Filter */
.assignee-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: none;
  border-radius: 0;
  flex-wrap: nowrap;
}

  @media (width <= 768px) {
.assignee-filter {
    flex-direction: column;
    align-items: flex-start
}
  }

.assignee-filter-dropdown {
  position: relative;
}

  .assignee-filter-dropdown.open .assignee-filter-toggle {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-indigo-alpha-10);
  }

  /* stylelint-disable-next-line no-descending-specificity */
  .assignee-filter-dropdown .dropdown-arrow {
    transition: transform 0.15s ease;
  }

  .assignee-filter-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
  }

  .assignee-filter-dropdown.open .assignee-filter-menu {
    display: block;
  }

  @media (width <= 768px) {
.assignee-filter-dropdown {
    inline-size: 100%
}
  }

/* stylelint-disable-next-line no-descending-specificity */
.assignee-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: transparent;
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-strong);
  cursor: pointer;
  transition: all 0.15s ease;
  min-inline-size: 140px;
  justify-content: space-between;
}

  /* stylelint-disable-next-line no-descending-specificity */
  .assignee-filter-toggle:hover {
    border-color: var(--color-border-muted);
    background: var(--color-hover-subtle);
  }

  @media (width <= 768px) {
.assignee-filter-toggle {
    inline-size: 100%
}
  }

.assignee-icon {
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

/* stylelint-disable-next-line no-descending-specificity */
.assignee-filter-menu {
  position: absolute;
  inset-block-start: calc(100% + 4px);
  left: 0;
  z-index: 50;
  min-inline-size: 220px;
  max-block-size: 300px;
  overflow-y: auto;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-dropdown);
  padding: 0.5rem;
  display: none;
}

  @media (width <= 768px) {
.assignee-filter-menu {
    inline-size: 100%
}
  }

.assignee-filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--color-text-strong);
}

.assignee-filter-option:hover {
  background: var(--color-bg-subtle);
}

.assignee-filter-option.active {
  background: var(--color-bg-selected);
}

/* stylelint-disable-next-line no-descending-specificity */
.assignee-filter-option input[type="checkbox"] {
  appearance: none;
  inline-size: 16px;
  block-size: 16px;
  min-inline-size: 16px;
  border: 1.5px solid var(--color-border-muted);
  border-radius: 4px;
  background-color: var(--color-bg-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

    .assignee-filter-option input[type="checkbox"]:checked {
      background-color: var(--color-primary-500);
      border-color: var(--color-primary-500);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
      background-size: 12px;
      background-position: center;
      background-repeat: no-repeat;
    }

    .assignee-filter-option input[type="checkbox"]:hover {
      border-color: var(--color-primary-400);
    }

.assignee-avatar {
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.assignee-avatar--unassigned {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-subtle);
  color: var(--color-text-tertiary);
}

.assignee-avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-accent-hover);
  color: var(--color-text-accent);
  font-size: 0.625rem;
  font-weight: 600;
}

.assignee-filter-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assignee-filter-divider {
  block-size: 1px;
  background: var(--color-bg-subtle);
  margin: 0.375rem 0;
}

  html[data-theme="dark"] .assignee-filter-divider {
    background: var(--color-border-dark);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .assignee-filter-divider {
      background: var(--color-border-dark);
    }
  }

.assignee-filter-actions {
  border-block-start: 1px solid var(--color-border-primary);
  margin-block-start: 0.5rem;
  padding-block-start: 0.5rem;
}

.assignee-filter-clear {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-link);
  text-decoration: none;
  padding: 0.375rem 0.625rem;
  text-align: center;
}

  .assignee-filter-clear:hover {
    text-decoration: underline;
  }

/* Label Filter */
.label-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: none;
  border-radius: 0;
  flex-wrap: nowrap;
}

  @media (width <= 768px) {
.label-filter {
    flex-direction: column;
    align-items: flex-start
}
  }

.label-filter-dropdown {
  position: relative;
}

  .label-filter-dropdown.open .label-filter-toggle {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-indigo-alpha-10);
  }

  /* stylelint-disable-next-line no-descending-specificity */
  .label-filter-dropdown .dropdown-arrow {
    transition: transform 0.15s ease;
  }

  .label-filter-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
  }

  .label-filter-dropdown.open .label-filter-menu {
    display: block;
  }

  @media (width <= 768px) {
.label-filter-dropdown {
    inline-size: 100%
}
  }

/* stylelint-disable-next-line no-descending-specificity */
.label-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: transparent;
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-strong);
  cursor: pointer;
  transition: all 0.15s ease;
  min-inline-size: 140px;
  justify-content: space-between;
}

  /* stylelint-disable-next-line no-descending-specificity */
  .label-filter-toggle:hover {
    border-color: var(--color-border-muted);
    background: var(--color-hover-subtle);
  }

  @media (width <= 768px) {
.label-filter-toggle {
    inline-size: 100%
}
  }

.label-icon {
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

/* stylelint-disable-next-line no-descending-specificity */
.label-filter-menu {
  position: absolute;
  inset-block-start: calc(100% + 4px);
  left: 0;
  z-index: 50;
  min-inline-size: 220px;
  max-block-size: 300px;
  overflow-y: auto;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-dropdown);
  padding: 0.5rem;
  display: none;
}

  @media (width <= 768px) {
.label-filter-menu {
    inline-size: 100%
}
  }

.label-filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--color-text-strong);
}

.label-filter-option:hover {
  background: var(--color-bg-subtle);
}

.label-filter-option.active {
  background: var(--color-bg-selected);
}

/* stylelint-disable-next-line no-descending-specificity */
.label-filter-option input[type="checkbox"] {
  appearance: none;
  inline-size: 16px;
  block-size: 16px;
  min-inline-size: 16px;
  border: 1.5px solid var(--color-border-muted);
  border-radius: 4px;
  background-color: var(--color-bg-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

    .label-filter-option input[type="checkbox"]:checked {
      background-color: var(--color-primary-500);
      border-color: var(--color-primary-500);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
      background-size: 12px;
      background-position: center;
      background-repeat: no-repeat;
    }

    .label-filter-option input[type="checkbox"]:hover {
      border-color: var(--color-primary-400);
    }

.label-color-dot {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--label-color, #888);
}

.label-filter-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.label-filter-actions {
  border-block-start: 1px solid var(--color-border-primary);
  margin-block-start: 0.5rem;
  padding-block-start: 0.5rem;
}

.label-filter-clear {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-link);
  text-decoration: none;
  padding: 0.375rem 0.625rem;
  text-align: center;
}

  .label-filter-clear:hover {
    text-decoration: underline;
  }

/* Error and Empty States */
.error-banner {
  background: var(--color-status-error-bg);
  border: 1px solid var(--color-error-200);
  border-radius: 8px;
  padding: 1rem;
  color: var(--color-status-error-text);
}

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-text-tertiary);
}

/* Team Sections */
.team-section {
  margin-block-end: 2rem;
}

.team-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-block-end: 3px solid var(--team-color, var(--color-primary-500));
  margin-block-end: 1rem;
}

.team-header h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-emphasis);
  margin: 0;
}

.issue-count {
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
}

/* Issues List */
.issues-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Issue Card */
.issue-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  transition: box-shadow 0.15s ease;
}

  .issue-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

.issue-identifier {
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  min-inline-size: 5rem;
}

.issue-content {
  flex: 1;
  min-inline-size: 0;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 2rem;
}

  @media (width <= 768px) {
.issue-content {
    grid-template-columns: 1fr
}
  }

.issue-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-emphasis);
  margin: 0 0 0.5rem;
  line-height: 1.4;
}


/* Issue Meta */
.issue-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.8125rem;
}

.issue-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

  .issue-status::before {
    content: '';
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--status-color, #888);
  }

/* Priority Badges */
.issue-priority {
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
}

.priority-urgent {
  background: var(--color-status-error-bg);
  color: var(--color-status-error-text);
}

.priority-high {
  background: #fff7ed;
  color: #c2410c;
}

.priority-medium {
  background: var(--color-status-warning-bg);
  color: var(--color-status-warning-text);
}

.priority-low {
  background: var(--color-status-success-bg);
  color: var(--color-green-800);
}

.priority-none {
  background: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
}

/* Assignee */
.issue-assignee {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-text-strong);
}

.issue-assignee.unassigned {
  color: var(--color-text-muted);
  font-style: italic;
}

.issue-title a {
  color: inherit;
  text-decoration: none;
}

.issue-title a:hover {
  color: var(--color-text-link);
}

/* Issue Detail Page */
.issue-detail-page {
  max-inline-size: 1100px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

  .issue-detail-page .issue-identifier {
    font-family: ui-monospace, monospace;
    font-size: 1rem;
    color: var(--color-text-tertiary);
  }

  .issue-detail-page .issue-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-strong);
    margin: 0;
  }

/* ============================================
 * BREADCRUMB NAVIGATION
 * ============================================ */

.issue-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  margin-block-end: var(--space-3);
}

.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-link);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

.breadcrumb-link:hover {
  color: var(--color-text-accent-bright);
  text-decoration: none;
}

  .breadcrumb-link svg {
    flex-shrink: 0;
  }

.breadcrumb-separator {
  color: var(--color-text-muted);
  user-select: none;
}

.breadcrumb-team {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-secondary);
  font-weight: 500;
}

  .breadcrumb-team::before {
    content: '';
    inline-size: 8px;
    block-size: 8px;
    border-radius: 2px;
    background: var(--team-color, var(--color-primary-500));
  }

.breadcrumb-current {
  color: var(--color-text-tertiary);
  font-family: var(--font-family-mono);
}

.breadcrumb-linear-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-inline-start: var(--space-2);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: 500;
  transition: color 0.15s ease;
}

.breadcrumb-linear-link:hover {
  color: var(--color-text-link);
}

/* ============================================
 * ISSUE DESCRIPTION (NO CARD)
 * ============================================ */

.issue-description-section {
  margin-block-end: var(--space-6);
}

/* stylelint-disable-next-line selector-class-pattern -- ProseMirror is a third-party class */
.issue-description-section .tiptap-editor-wrapper--readonly .ProseMirror {
  min-block-size: unset;
  padding: 0;
}

.description-edit-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-block-start: var(--space-1);
  padding: 0;
  border: none;
  background: transparent;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}

.description-edit-link:hover {
  color: var(--color-text-link);
}

/* ============================================
 * ACTIVITY SECTION (NO CARD)
 * ============================================ */

.activity-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.activity-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.activity-section-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-emphasis);
  margin: 0;
}

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

.activity-comment-form {
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border-primary);
}

/* ============================================
 * ISSUE HEADER REDESIGN
 * ============================================ */

.issue-header-redesign {
  margin: 0;
  padding: 0;
}

.issue-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.issue-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: color-mix(in srgb, var(--status-color, #888) 12%, white);
  border: 1px solid color-mix(in srgb, var(--status-color, #888) 25%, white);
  border-radius: 9999px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: color-mix(in srgb, var(--status-color, #888) 80%, black);
}

  .issue-status-badge .status-indicator {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--status-color, #888);
  }

.issue-priority-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: 9999px;
  font-size: var(--text-sm);
  font-weight: 500;
}

.issue-priority-badge.priority-urgent {
  background: var(--color-status-error-bg);
  color: var(--color-error-700);
  border: 1px solid var(--color-error-200);
}

  .issue-priority-badge.priority-high {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
  }

.issue-priority-badge.priority-medium {
  background: var(--color-status-warning-bg);
  color: var(--color-status-warning-text);
  border: 1px solid var(--color-warning-200);
}

.issue-priority-badge.priority-low {
  background: var(--color-status-success-bg);
  color: var(--color-green-800);
  border: 1px solid var(--color-success-200);
}

.issue-priority-badge.priority-none {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-primary);
}

.issue-id-badge {
  font-family: var(--font-family-mono);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  background: var(--color-bg-tertiary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--space-1);
}

.issue-title-redesign {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  margin: 0;
  padding: 0;
}

.issue-meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.meta-item svg {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.meta-avatar {
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.meta-avatar-placeholder {
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  background: var(--color-bg-accent-hover);
  color: var(--color-text-accent-bright);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 600;
}

.meta-text {
  color: var(--color-text-strong);
}

.meta-item--overdue {
  color: var(--color-status-error-action);
}

  .meta-item--overdue svg {
    color: var(--color-error-500);
  }

/* ============================================
 * ISSUE LAYOUT (MAIN + SIDEBAR)
 * ============================================ */

.issue-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-8);
  align-items: start;
}

  @media (width <= 900px) {
.issue-layout {
    grid-template-columns: 1fr
}
  }

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

  @media (width <= 900px) {
.issue-sidebar-redesign {
    order: -1
}
  }

.issue-main-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
}

/* ============================================
 * CONTENT CARDS
 * ============================================ */

.content-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.content-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--color-border-primary);
  background: var(--color-bg-subtle);
}

.content-card-header svg {
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

.content-card-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-emphasis);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 22px;
  block-size: 22px;
  padding: 0 var(--space-2);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  border-radius: 9999px;
  font-size: var(--text-xs);
  font-weight: 600;
}

.content-card-body {
  padding: var(--space-5);
}

.content-card-footer {
  padding: var(--space-4) var(--space-5);
  border-block-start: 1px solid var(--color-border-primary);
  background: var(--color-bg-subtle);
}

/* Description Content */
.description-text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-strong);
}

  .description-text p {
    margin: 0 0 var(--space-4);
  }

    .description-text p:last-child {
      margin-block-end: 0;
    }

  html[data-theme="dark"] .description-text {
    color: var(--color-slate-300);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .description-text {
      color: var(--color-slate-300);
    }
  }

/* ============================================
 * MARKDOWN CONTENT STYLES
 * ============================================ */

.markdown-content {
  overflow-wrap: break-word;
}

/* Headings */
.markdown-content h1 {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
  padding-block-end: var(--space-2);
  border-block-end: 1px solid var(--color-border-primary);
  line-height: var(--leading-tight);
}

.markdown-content h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text-emphasis);
  margin: var(--space-6) 0 var(--space-3);
  line-height: var(--leading-tight);
}

.markdown-content h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-emphasis);
  margin: var(--space-5) 0 var(--space-2);
  line-height: var(--leading-snug);
}

.markdown-content h4 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-emphasis);
  margin: var(--space-4) 0 var(--space-2);
  line-height: var(--leading-snug);
}

.markdown-content h5,
.markdown-content h6 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-strong);
  margin: var(--space-3) 0 var(--space-2);
  line-height: var(--leading-normal);
}

    .markdown-content h3:first-child {
      margin-block-start: 0;
    }


  /* Paragraphs */
  /* stylelint-disable-next-line no-descending-specificity */
  .markdown-content p {
    margin: 0 0 var(--space-4);
    line-height: var(--leading-relaxed);
  }

    .markdown-content p:last-child {
      margin-block-end: 0;
    }

  /* Lists */
  .markdown-content ul,
  .markdown-content ol {
    margin: 0 0 var(--space-4);
    padding-inline-start: var(--space-6);
  }

  .markdown-content ul {
    list-style-type: disc;
  }

    .markdown-content ul ul {
      list-style-type: circle;
    }

      .markdown-content ul ul ul {
        list-style-type: square;
      }

/* Inline Code */
.markdown-content code {
  font-family: var(--font-family-mono);
  font-size: 0.9em;
  background: var(--color-bg-tertiary);
  color: var(--color-error-700);
  padding: var(--space-0-5) var(--space-1);
  border-radius: 4px;
  border: 1px solid var(--color-border-primary);
}

/* Code Blocks */
.markdown-content pre {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  background: var(--color-bg-tertiary);
  border-radius: 8px;
  overflow-x: auto;
  border: 1px solid var(--color-border-primary);
}

    .markdown-content li:last-child {
      margin-block-end: 0;
    }

/* Blockquotes */
.markdown-content blockquote {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  /* Physical: paired with physical border-radius shorthand */
  border-left: 4px solid var(--color-primary-400);
  background: var(--color-bg-accent);
  border-radius: 0 8px 8px 0;
  color: var(--color-text-strong);
}


/* Links */
/* stylelint-disable-next-line no-descending-specificity */
.markdown-content a {
  color: var(--color-text-accent-bright);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.markdown-content a:hover {
  color: var(--color-text-accent);
}

/* Emphasis */
.markdown-content strong,
.markdown-content b {
  font-weight: 600;
  color: var(--color-text-emphasis);
}

      /* stylelint-disable-next-line no-descending-specificity */
      .markdown-content blockquote p + p {
        margin-block-start: var(--space-3);
      }

.markdown-content del,
.markdown-content s,
.markdown-content strike {
  text-decoration: line-through;
  color: var(--color-text-tertiary);
}

/* Highlight */
.markdown-content mark {
  background: var(--color-warning-200);
  color: var(--color-text-emphasis);
  padding: var(--space-0) var(--space-1);
  border-radius: 2px;
}


  .markdown-content em,
  .markdown-content i {
    font-style: italic;
  }

.markdown-content thead {
  background: var(--color-bg-tertiary);
}

.markdown-content th {
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  text-align: start;
  color: var(--color-text-emphasis);
  border-block-end: 2px solid var(--color-border-secondary);
}

.markdown-content td {
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--color-border-primary);
  color: var(--color-text-strong);
}

  /* Tables */
  .markdown-content table {
    inline-size: 100%;
    margin: 0 0 var(--space-4);
    border-collapse: collapse;
    font-size: var(--text-sm);
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    overflow: hidden;
  }

.markdown-content tbody tr:hover {
  background: var(--color-bg-subtle);
}


  /* Images */
  .markdown-content img {
    max-inline-size: 100%;
    block-size: auto;
    border-radius: 8px;
    margin: var(--space-2) 0;
  }

  /* Superscript */
  .markdown-content sup {
    font-size: 0.75em;
    vertical-align: super;
  }

  /* Todo Checkboxes (Linear-style) */
  .markdown-content .markdown-todo {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-2);
    cursor: default;
    margin: 0;
    font-weight: normal;
  }

.markdown-content .markdown-todo--checked span {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

    .markdown-content .markdown-todo input[type="checkbox"] {
      appearance: none;
      inline-size: 16px;
      block-size: 16px;
      min-inline-size: 16px;
      border: 1.5px solid var(--color-border-muted);
      border-radius: 4px;
      background-color: var(--color-bg-secondary);
      cursor: pointer;
      position: relative;
      flex-shrink: 0;
      margin-block-start: 2px;
    }

      .markdown-content .markdown-todo input[type="checkbox"]:checked {
        background: var(--color-primary-500);
        border-color: var(--color-primary-500);
      }

      .markdown-content .markdown-todo input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        left: 4px;
        inset-block-start: 1px;
        inline-size: 5px;
        block-size: 9px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
      }

    .markdown-content .markdown-todo span {
      flex: 1;
    }


  /* Hide default list bullet when todo is present */
  .markdown-content li:has(.markdown-todo) {
    list-style: none;
    margin-inline-start: -1.25em;
  }

  /* Mention badges in rendered markdown reuse .tiptap-mention from tiptap-editor.css */

  html[data-theme="dark"] .markdown-content h1,
  html[data-theme="dark"] .markdown-content h2,
  html[data-theme="dark"] .markdown-content h3,
  html[data-theme="dark"] .markdown-content h4,
  html[data-theme="dark"] .markdown-content h5,
  html[data-theme="dark"] .markdown-content h6 {
    color: var(--color-slate-100);
  }

  html[data-theme="dark"] .markdown-content strong,
  html[data-theme="dark"] .markdown-content b {
    color: var(--color-slate-100);
  }

  html[data-theme="dark"] .markdown-content p,
  html[data-theme="dark"] .markdown-content li,
  html[data-theme="dark"] .markdown-content td {
    color: var(--color-slate-300);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .markdown-content h1,
    html:not([data-theme]) .markdown-content h2,
    html:not([data-theme]) .markdown-content h3,
    html:not([data-theme]) .markdown-content h4,
    html:not([data-theme]) .markdown-content h5,
    html:not([data-theme]) .markdown-content h6 {
      color: var(--color-slate-100);
    }

    html:not([data-theme]) .markdown-content strong,
    html:not([data-theme]) .markdown-content b {
      color: var(--color-slate-100);
    }

    html:not([data-theme]) .markdown-content p,
    html:not([data-theme]) .markdown-content li,
    html:not([data-theme]) .markdown-content td {
      color: var(--color-slate-300);
    }
  }

  /* Dark mode blockquotes */
  html[data-theme="dark"] .markdown-content blockquote {
    background: var(--color-primary-alpha-10);
    border-inline-start-color: var(--color-primary-400);
    color: var(--color-slate-300);
  }

    html[data-theme="dark"] .markdown-content blockquote p {
      color: var(--color-slate-300);
    }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .markdown-content blockquote {
      background: rgba(19, 164, 236, 0.1);
      border-inline-start-color: var(--color-primary-400);
      color: var(--color-slate-300);
    }

      html:not([data-theme]) .markdown-content blockquote p {
        color: var(--color-slate-300);
      }
  }

  /* Dark mode links in markdown */
  html[data-theme="dark"] .markdown-content a {
    color: var(--color-primary-400);
  }

    html[data-theme="dark"] .markdown-content a:hover {
      color: var(--color-primary-300);
    }

  html[data-theme="dark"] .markdown-content del,
  html[data-theme="dark"] .markdown-content s,
  html[data-theme="dark"] .markdown-content strike {
    color: var(--color-slate-500);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .markdown-content a {
      color: var(--color-primary-400);
    }

      html:not([data-theme]) .markdown-content a:hover {
        color: var(--color-primary-300);
      }

    html:not([data-theme]) .markdown-content del,
    html:not([data-theme]) .markdown-content s,
    html:not([data-theme]) .markdown-content strike {
      color: var(--color-slate-500);
    }
  }

  /* Dark mode code blocks */
  html[data-theme="dark"] .markdown-content code {
    background: var(--color-slate-800);
    color: var(--color-primary-300);
  }

  html[data-theme="dark"] .markdown-content pre {
    background: var(--color-slate-900);
    border-color: var(--color-border-dark);
  }

    html[data-theme="dark"] .markdown-content pre code {
      background: transparent;
      color: var(--color-slate-200);
    }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .markdown-content code {
      background: var(--color-slate-800);
      color: var(--color-primary-300);
    }

    html:not([data-theme]) .markdown-content pre {
      background: var(--color-slate-900);
      border-color: var(--color-border-dark);
    }

      html:not([data-theme]) .markdown-content pre code {
        background: transparent;
        color: var(--color-slate-200);
      }
  }

  /* Dark mode tables */
  html[data-theme="dark"] .markdown-content table {
    border-color: var(--color-border-dark);
  }

  html[data-theme="dark"] .markdown-content th {
    background: var(--color-slate-800);
    color: var(--color-slate-200);
  }

  html[data-theme="dark"] .markdown-content td {
    border-color: var(--color-border-dark);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .markdown-content table {
      border-color: var(--color-border-dark);
    }

    html:not([data-theme]) .markdown-content th {
      background: var(--color-slate-800);
      border-color: var(--color-border-dark);
      color: var(--color-slate-200);
    }

    html:not([data-theme]) .markdown-content td {
      border-color: var(--color-border-dark);
    }
  }


  /* Dark mode horizontal rule */
  html[data-theme="dark"] .markdown-content hr {
    border-color: var(--color-border-dark);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .markdown-content hr {
      border-color: var(--color-border-dark);
    }
  }

/* Empty State Inline */
.empty-state-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}

  .empty-state-inline svg {
    opacity: 0.5;
  }

  /* stylelint-disable-next-line no-descending-specificity */
  .empty-state-inline p {
    margin: 0;
    font-size: var(--text-sm);
  }

/* ============================================
 * ACTIVITY TIMELINE
 * ============================================ */

.activity-timeline {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.timeline-event {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-0-5) 0;
}

/* Comment cards in the timeline */
.timeline-comment-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.timeline-event-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  background: var(--color-bg-subtle);
  color: var(--color-text-tertiary);
}

.timeline-event-icon svg {
  width: 10px;
  height: 10px;
}

.timeline-event-icon--status {
  color: var(--color-blue-600);
  background: color-mix(in srgb, var(--color-blue-600) 10%, transparent);
}

.timeline-event-icon--assigned {
  color: var(--color-amber-600);
  background: color-mix(in srgb, var(--color-amber-600) 10%, transparent);
}

.timeline-event-icon--created {
  color: var(--color-green-600);
  background: color-mix(in srgb, var(--color-green-600) 10%, transparent);
}

.timeline-event-icon--updated {
  color: var(--color-text-tertiary);
  background: var(--color-bg-subtle);
}

.timeline-event-content {
  flex: 1;
  min-inline-size: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-tertiary);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.timeline-event-actor {
  font-weight: 500;
  color: var(--color-text-secondary);
}

.timeline-event-description {
  color: var(--color-text-tertiary);
}

.timeline-event-separator {
  color: var(--color-text-muted);
}

.timeline-event-timestamp {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Dark mode */
html[data-theme="dark"] .timeline-event-icon--status {
  color: var(--color-blue-400);
  background: color-mix(in srgb, var(--color-blue-400) 12%, transparent);
}

html[data-theme="dark"] .timeline-event-icon--assigned {
  color: var(--color-amber-400);
  background: color-mix(in srgb, var(--color-amber-400) 12%, transparent);
}

html[data-theme="dark"] .timeline-event-icon--created {
  color: var(--color-green-400);
  background: color-mix(in srgb, var(--color-green-400) 12%, transparent);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .timeline-event-icon--status {
    color: var(--color-blue-400);
    background: color-mix(in srgb, var(--color-blue-400) 12%, transparent);
  }

  html:not([data-theme]) .timeline-event-icon--assigned {
    color: var(--color-amber-400);
    background: color-mix(in srgb, var(--color-amber-400) 12%, transparent);
  }

  html:not([data-theme]) .timeline-event-icon--created {
    color: var(--color-green-400);
    background: color-mix(in srgb, var(--color-green-400) 12%, transparent);
  }
}

/* Dark mode for comment cards in timeline */
html[data-theme="dark"] .timeline-comment-card {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-dark);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .timeline-comment-card {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-dark);
  }
}

/* Collapsed activity group */
.timeline-event--collapsed {
  opacity: 0.7;
}

/* Comment reactions below body */
.comment-reactions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-block-start: var(--space-2);
}

/* Add reaction button in header (hidden until hover) */
.reaction-add-btn--header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 28px;
  block-size: 28px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text-muted);
  opacity: 0;
  transition: all 0.15s ease;
}

.reaction-add-btn--header:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.comment-item:hover .reaction-add-btn--header,
.comment-item:focus-within .reaction-add-btn--header {
  opacity: 1;
}

/* Inline add reaction button (shown next to existing reactions) */
.reaction-inline-wrapper {
  position: relative;
  display: inline-flex;
}

/* Header reaction wrapper */
.reaction-header-wrapper {
  position: relative;
  display: inline-flex;
}

/* ============================================
 * COMMENTS LIST REDESIGN
 * ============================================ */

.comments-list-redesign {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.comment-item {
  display: flex;
  gap: var(--space-3);
}

.comment-avatar-wrapper {
  flex-shrink: 0;
}

.comment-avatar-img {
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.comment-avatar-placeholder {
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  background: var(--color-bg-accent-hover);
  color: var(--color-text-accent-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 600;
}

.comment-content {
  flex: 1;
  min-inline-size: 0;
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
}

.comment-author-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-emphasis);
}

.comment-timestamp {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

  .comment-timestamp::before {
    content: '\2022';
    margin-inline-end: var(--space-2);
    color: var(--color-text-muted);
  }

.comment-body-text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-strong);
}

  /* stylelint-disable-next-line no-descending-specificity */
  .comment-body-text p {
    margin: 0 0 var(--space-2);
  }

    /* stylelint-disable-next-line no-descending-specificity */
    .comment-body-text p:last-child {
      margin-block-end: 0;
    }

/* Comment Visibility Badge (Admin Only) */
.comment-visibility-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  padding: var(--space-px) var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  border: none;
  background: transparent;
}

  .comment-visibility-badge svg {
    flex-shrink: 0;
  }

.comment-visibility-badge--private {
  --_vis-color: var(--color-orange-400);
  --_vis-bg: transparent;
  --_vis-border: var(--color-orange-200);
  --_vis-bg-hover: var(--color-orange-50);

  color: var(--_vis-color);
  background: var(--_vis-bg);
  border: 1px solid var(--_vis-border);
}

.comment-visibility-badge--private:hover {
  background: var(--_vis-bg-hover);
}

.comment-visibility-badge--public {
  --_vis-color: var(--color-neutral-400);
  --_vis-bg: transparent;
  --_vis-border: var(--color-neutral-200);
  --_vis-bg-hover: var(--color-neutral-50);

  color: var(--_vis-color);
  background: var(--_vis-bg);
  border: 1px solid var(--_vis-border);
}

.comment-visibility-badge--public:hover {
  background: var(--_vis-bg-hover);
}

/* Comment Resolution Badge (static indicator for non-admins) */
.comment-resolution-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  border: none;
  background: transparent;
}

  .comment-resolution-badge svg {
    flex-shrink: 0;
  }

.comment-resolution-badge--resolved {
  --_res-color: var(--color-purple-600);
  --_res-bg: var(--color-purple-50);
  --_res-border: var(--color-purple-200);

  color: var(--_res-color);
  background: var(--_res-bg);
  border: 1px solid var(--_res-border);
}

/* Green check on the reply that resolved the thread */
.comment-resolution-check {
  display: inline-flex;
  align-items: center;
  color: var(--color-green-600);
}

/* Resolved comment styling */
.comment-item--resolved {
  color: var(--color-text-muted);
}

.comment-item--resolved:hover,
.comment-item--resolved:focus-within {
  color: inherit;
}

/* MC-291: Comment deep-link highlight animation */
.comment-item--highlighted {
  animation: comment-highlight 2s ease-out;
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin: calc(-1 * var(--space-2));
}

@keyframes comment-highlight {
  0% {
    box-shadow: inset 0 0 0 2px var(--color-focus-ring);
  }

  70% {
    box-shadow: inset 0 0 0 2px var(--color-focus-ring);
  }

  100% {
    box-shadow: none;
  }
}

/* MC-291: Comment anchor link styling */
.comment-anchor-link {
  color: inherit;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

/* ============================================
 * COMMENT FORM REDESIGN
 * ============================================ */

.comment-form-wrapper {
  /* No additional styles needed */
}

.comment-form-redesign {
  display: flex;
  flex-direction: column;
}

.form-field-wrapper {
  inline-size: 100%;
}

.comment-textarea {
  inline-size: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border-secondary);
  border-radius: 8px;
  font-size: var(--text-sm);
  font-family: inherit;
  line-height: var(--leading-normal);
  resize: vertical;
  min-block-size: 80px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

  .comment-textarea:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-indigo-alpha-10);
  }

.comment-textarea::placeholder {
  color: var(--color-text-muted);
}

.form-actions-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  margin-block-start: var(--space-3);
}

/* MC-119: Comment visibility control for admins */
.comment-visibility-control {
  display: flex;
  align-items: center;
}

.comment-visibility-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  user-select: none;
}

  .comment-visibility-label:hover .comment-visibility-text {
    color: var(--color-text-strong);
  }

.comment-visibility-checkbox {
  inline-size: 16px;
  block-size: 16px;
  cursor: pointer;
  accent-color: var(--color-brand-600);
}

/* stylelint-disable-next-line no-descending-specificity */
.comment-visibility-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.sidebar-card-title svg {
  color: var(--color-text-muted);
}

/* Details List Redesign */
.details-list-redesign {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

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

.detail-row dt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

.detail-row dt svg {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.detail-row dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-emphasis);
  text-align: end;
}

.detail-value-with-avatar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.detail-avatar {
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  object-fit: cover;
}

.detail-empty {
  color: var(--color-text-muted);
  font-style: italic;
}

.detail-value--overdue {
  color: var(--color-danger-500);
  font-weight: var(--font-weight-medium);
}

.detail-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

  .detail-status-badge .status-dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--status-color, #888);
  }

.detail-priority-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-0) var(--space-2);
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
}

.detail-priority-badge.priority-urgent {
  background: var(--color-status-error-bg);
  color: var(--color-error-700);
}

  .detail-priority-badge.priority-high {
    background: var(--color-status-error-bg);
    color: var(--color-error-700);
  }

.detail-priority-badge.priority-medium {
  background: var(--color-status-warning-bg);
  color: var(--color-status-warning-text);
}

.detail-priority-badge.priority-low {
  background: var(--color-status-success-bg);
  color: var(--color-status-success-text);
}

.detail-priority-badge.priority-none {
  background: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
}

/* MC-51: Priority Editor Dropdown */
.priority-editable-cell {
  position: relative;
}

.priority-edit-trigger {
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
}

  .priority-edit-trigger:hover {
    filter: brightness(0.95);
    transform: translateY(-1px);
  }

  .priority-edit-trigger:focus {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
  }

  .priority-edit-trigger.loading {
    opacity: 0.6;
    pointer-events: none;
  }

.priority-dropdown {
  position: fixed;
  z-index: 9999;
  min-inline-size: 160px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-dropdown);
  padding: 0.5rem;
}

  .priority-dropdown.hidden {
    display: none;
  }

  html[data-theme="dark"] .priority-dropdown {
    background: var(--color-slate-800);
    border-color: var(--color-border-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .priority-dropdown {
      background: var(--color-slate-800);
      border-color: var(--color-border-dark);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
  }

.priority-dropdown-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  inline-size: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--color-text-strong);
  background: transparent;
  text-align: start;
}

.priority-dropdown-option:hover {
  background: var(--color-bg-subtle);
}

.priority-dropdown-option.active {
  background: var(--color-bg-accent);
}

.priority-dropdown-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 20px;
  block-size: 20px;
  background: transparent;
}

  /* stylelint-disable-next-line no-descending-specificity */
  .priority-dropdown-icon svg {
    background: transparent;
  }

  .priority-dropdown-icon.priority-urgent {
    color: var(--color-error-500);
  }

  .priority-dropdown-icon.priority-high {
    color: #c2410c;
  }

  .priority-dropdown-icon.priority-medium {
    color: var(--color-warning-500);
  }

  .priority-dropdown-icon.priority-low {
    color: #166534;
  }

.priority-dropdown-icon.priority-none {
  color: var(--color-text-muted);
}

.priority-dropdown-label {
  flex: 1;
}

/* MC-51: Priority Selector for New Issue Form */
.priority-selector-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-strong);
  cursor: pointer;
  transition: all 0.15s ease;
  min-inline-size: 160px;
}

  .priority-selector-trigger:hover {
    border-color: var(--color-border-muted);
    background: var(--color-hover-extra-subtle);
  }

  .priority-selector-trigger:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-indigo-alpha-10);
  }

  html[data-theme="dark"] .priority-selector-trigger {
    background: var(--color-slate-800);
    border-color: var(--color-border-dark);
    color: var(--color-slate-200);
  }

    html[data-theme="dark"] .priority-selector-trigger:hover {
      background: var(--color-slate-700);
      border-color: var(--color-slate-600);
    }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .priority-selector-trigger {
      background: var(--color-slate-800);
      border-color: var(--color-border-dark);
      color: var(--color-slate-200);
    }

      html:not([data-theme]) .priority-selector-trigger:hover {
        background: var(--color-slate-700);
        border-color: var(--color-slate-600);
      }
  }

[data-controller="priority-selector"] {
  position: relative;
}

  /* stylelint-disable-next-line no-descending-specificity */
  [data-controller="priority-selector"].open .priority-selector-trigger {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-indigo-alpha-10);
  }

  [data-controller="priority-selector"].open .priority-selector-arrow {
    transform: rotate(180deg);
  }

.priority-selector-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 20px;
  block-size: 20px;
  flex-shrink: 0;
  background: transparent;
}

  /* stylelint-disable-next-line no-descending-specificity */
  .priority-selector-icon svg {
    background: transparent;
  }

  .priority-selector-icon.priority-urgent {
    color: var(--color-error-500);
  }

  .priority-selector-icon.priority-high {
    color: #c2410c;
  }

  .priority-selector-icon.priority-medium {
    color: var(--color-warning-500);
  }

  .priority-selector-icon.priority-low {
    color: #166534;
  }

.priority-selector-icon.priority-none {
  color: var(--color-text-muted);
}

.priority-selector-label {
  flex: 1;
  text-align: start;
}

/* stylelint-disable-next-line no-descending-specificity */
.priority-selector-arrow {
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}

.priority-selector-menu {
  position: absolute;
  inset-block-start: calc(100% + 4px);
  left: 0;
  z-index: 50;
  min-inline-size: 180px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
}

  .priority-selector-menu.hidden {
    display: none;
  }

  html[data-theme="dark"] .priority-selector-menu {
    background: var(--color-slate-800);
    border-color: var(--color-border-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .priority-selector-menu {
      background: var(--color-slate-800);
      border-color: var(--color-border-dark);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
  }

.priority-selector-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  inline-size: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--color-text-strong);
  background: transparent;
  text-align: start;
}

.priority-selector-option:hover {
  background: var(--color-bg-subtle);
}

.priority-selector-option.active {
  background: var(--color-bg-accent);
}

.priority-selector-option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 20px;
  block-size: 20px;
  background: transparent;
}

  /* stylelint-disable-next-line no-descending-specificity */
  .priority-selector-option-icon svg {
    background: transparent;
  }

  .priority-selector-option-icon.priority-urgent {
    color: var(--color-error-500);
  }

  .priority-selector-option-icon.priority-high {
    color: #c2410c;
  }

  .priority-selector-option-icon.priority-medium {
    color: var(--color-warning-500);
  }

  .priority-selector-option-icon.priority-low {
    color: #166534;
  }

.priority-selector-option-icon.priority-none {
  color: var(--color-text-muted);
}

.priority-selector-option-label {
  flex: 1;
}

/* Team Info */
.team-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.team-color-indicator {
  inline-size: 12px;
  block-size: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.team-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-emphasis);
}

/* Labels List Redesign */
.labels-list-redesign {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* stylelint-disable-next-line no-descending-specificity */
.label-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--label-color, #888) 12%, white);
  color: color-mix(in srgb, var(--label-color, #888) 80%, black);
  border: 1px solid color-mix(in srgb, var(--label-color, #888) 25%, white);
}

  .label-tag .label-dot {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--label-color, #888);
  }

/* MC-289: Labels row inside Details card */
.detail-labels-trigger .labels-list-redesign,
.detail-row--labels .labels-list-redesign {
  padding: 0;
  justify-content: flex-end;
  gap: var(--space-1);
}

/* Shrink label tags inside detail row to match text-line height */
.detail-row--labels .label-tag {
  padding: var(--space-0-5) var(--space-1-5);
  font-size: 0.6875rem;
}

.detail-row--labels .label-dot {
  inline-size: 5px;
  block-size: 5px;
}

/* Accessibility */
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================
 * LEGACY STYLES (keeping for backward compatibility)
 * ============================================ */

/* MC-54: List View Inline Editors */
.issue-card-compact__priority-editor,
.issue-card-compact__status-editor {
  position: relative;
}

  .issue-card-compact__priority-editor button.issue-card-compact__priority,
  .issue-card-compact__priority-editor button.issue-card-compact__status,
  .issue-card-compact__status-editor button.issue-card-compact__priority,
  .issue-card-compact__status-editor button.issue-card-compact__status {
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    transition: all 0.15s ease;
    border-radius: 4px;
  }

    .issue-card-compact__priority-editor button.issue-card-compact__priority:hover, .issue-card-compact__priority-editor button.issue-card-compact__status:hover, .issue-card-compact__status-editor button.issue-card-compact__priority:hover, .issue-card-compact__status-editor button.issue-card-compact__status:hover {
      background: var(--color-hover-moderate);
      transform: scale(1.1);
    }

    .issue-card-compact__priority-editor button.issue-card-compact__priority:focus, .issue-card-compact__priority-editor button.issue-card-compact__status:focus, .issue-card-compact__status-editor button.issue-card-compact__priority:focus, .issue-card-compact__status-editor button.issue-card-compact__status:focus {
      outline: 2px solid var(--color-primary-500);
      outline-offset: 2px;
    }

    .issue-card-compact__priority-editor button.issue-card-compact__priority.loading, .issue-card-compact__priority-editor button.issue-card-compact__status.loading, .issue-card-compact__status-editor button.issue-card-compact__priority.loading, .issue-card-compact__status-editor button.issue-card-compact__status.loading {
      opacity: 0.5;
      pointer-events: none;
    }

  html[data-theme="dark"] .issue-card-compact__priority-editor button.issue-card-compact__priority:hover,
  html[data-theme="dark"] .issue-card-compact__priority-editor button.issue-card-compact__status:hover,
  html[data-theme="dark"] .issue-card-compact__status-editor button.issue-card-compact__priority:hover,
  html[data-theme="dark"] .issue-card-compact__status-editor button.issue-card-compact__status:hover {
    background: var(--color-white-alpha-10);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .issue-card-compact__priority-editor button.issue-card-compact__priority:hover,
    html:not([data-theme]) .issue-card-compact__priority-editor button.issue-card-compact__status:hover,
    html:not([data-theme]) .issue-card-compact__status-editor button.issue-card-compact__priority:hover,
    html:not([data-theme]) .issue-card-compact__status-editor button.issue-card-compact__status:hover {
      background: rgba(255, 255, 255, 0.1);
    }
  }

.list-editor-dropdown {
  position: absolute;
  inset-block-start: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  min-inline-size: 160px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-dropdown);
  padding: 0.5rem;
}

  .list-editor-dropdown.hidden {
    display: none;
  }

  html[data-theme="dark"] .list-editor-dropdown {
    background: var(--color-slate-800);
    border-color: var(--color-border-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .list-editor-dropdown {
      background: var(--color-slate-800);
      border-color: var(--color-border-dark);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
  }

.list-editor-dropdown__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  inline-size: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--color-text-strong);
  background: transparent;
  text-align: start;
}

.list-editor-dropdown__option:hover {
  background: var(--color-bg-subtle);
}

.list-editor-dropdown__option.active {
  background: var(--color-bg-accent);
}

.list-editor-dropdown__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 18px;
  block-size: 18px;
  flex-shrink: 0;
  background: transparent;
}

  /* stylelint-disable-next-line no-descending-specificity */
  .list-editor-dropdown__icon svg {
    background: transparent;
  }

  .list-editor-dropdown__icon.priority-urgent {
    color: var(--color-error-500);
  }

  .list-editor-dropdown__icon.priority-high {
    color: #c2410c;
  }

  .list-editor-dropdown__icon.priority-medium {
    color: var(--color-warning-500);
  }

  .list-editor-dropdown__icon.priority-low {
    color: #166534;
  }

.list-editor-dropdown__icon.priority-none {
  color: var(--color-text-muted);
}

.list-editor-dropdown__label {
  flex: 1;
}

.list-editor-dropdown__divider {
  block-size: 1px;
  margin-block: var(--space-1);
  background-color: var(--color-border-primary);
}

/* MC-54: Global dropdown styles for inline editing */
.global-dropdown {
  position: fixed;
  z-index: 1000;
}

  .global-dropdown.hidden {
    display: none;
  }

  /* MC-59: When list-editor-dropdown is inside global-dropdown, reset positioning
     since the parent container handles fixed positioning via JavaScript */
  /* stylelint-disable-next-line no-descending-specificity */
  .global-dropdown .list-editor-dropdown {
    position: static;
    inset-block-start: auto;
    left: auto;
    transform: none;
  }

.global-dropdown__content {
  min-inline-size: 160px;
}

/* MC-168: Empty/none option styling for dropdown editors */
.list-editor-dropdown__option--empty .list-editor-dropdown__label {
  color: var(--color-text-tertiary);
  font-style: italic;
}

/* MC-54: Editable button styles */
.issue-card-compact__priority--editable,
.issue-card-compact__status--editable {
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  background: transparent;
  border-radius: 4px;
  padding: 2px;
}

  /* stylelint-disable-next-line no-descending-specificity */
  .issue-card-compact__priority--editable svg, .issue-card-compact__status--editable svg {
    background: transparent;
  }

  .issue-card-compact__priority--editable:hover, .issue-card-compact__status--editable:hover {
    background: var(--color-hover-moderate);
  }

  .issue-card-compact__priority--editable.loading, .issue-card-compact__status--editable.loading {
    opacity: 0.5;
    pointer-events: none;
  }

.issue-header {
  margin-block-end: 2rem;
}

.issue-header-top {
  margin-block-end: 1rem;
}

.back-link {
  color: var(--color-text-tertiary);
  text-decoration: none;
  font-size: 0.875rem;
}

.back-link:hover {
  color: var(--color-text-link);
}

.issue-header-main {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-block-end: 0.75rem;
}

/* stylelint-disable-next-line no-descending-specificity */
.issue-description h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-emphasis);
  margin: 0 0 1rem;
}

.description-content {
  background: var(--color-bg-subtle);
  border-radius: 8px;
  padding: 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-strong);
}

/* Comments */
/* stylelint-disable-next-line no-descending-specificity */
.issue-comments h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-emphasis);
  margin: 0 0 1rem;
}

.no-comments {
  color: var(--color-text-tertiary);
  font-style: italic;
}

.comments-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.comment {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  padding: 1rem;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 0.75rem;
}

.comment-avatar {
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
}

.comment-author {
  font-weight: 500;
  color: var(--color-text-emphasis);
}

.comment-date {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

.comment-body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-strong);
}

  /* stylelint-disable-next-line no-descending-specificity */
  .comment-body p {
    margin: 0 0 0.5rem;
  }

    /* stylelint-disable-next-line no-descending-specificity */
    .comment-body p:last-child {
      margin-block-end: 0;
    }

/* Comment Form */
.comment-form-section {
  border-block-start: 1px solid var(--color-border-primary);
  padding-block-start: 1.5rem;
}

/* stylelint-disable-next-line no-descending-specificity */
.comment-form-section h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-emphasis);
  margin: 0 0 1rem;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

  .comment-form textarea {
    inline-size: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border-secondary);
    border-radius: 6px;
    font-size: 0.9375rem;
    font-family: inherit;
    resize: vertical;
    min-block-size: 100px;
  }

    .comment-form textarea:focus {
      outline: none;
      border-color: var(--color-primary-500);
      box-shadow: 0 0 0 3px var(--color-indigo-alpha-10);
    }

  .comment-form .btn-primary {
    align-self: flex-start;
  }

/* Sidebar */
.issue-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* stylelint-disable-next-line no-descending-specificity */
.sidebar-section h3 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  margin: 0 0 0.75rem;
}

.details-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  font-size: 0.875rem;
}

.details-list dt {
  color: var(--color-text-tertiary);
}

.details-list dd {
  margin: 0;
  color: var(--color-text-emphasis);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.small-avatar {
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
}

.unassigned {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Labels */
.labels-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}


/* Issue Form Page */
.issue-form-page {
  max-inline-size: 700px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Issue Form Container */
.issue-form-container {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  padding: 1.5rem;
}

  @media (width <= 768px) {
.issue-form-container {
    padding: 1rem
}
  }

  html[data-theme="dark"] .issue-form-container {
    background: var(--color-surface-dark);
    border-color: var(--color-border-dark);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .issue-form-container {
      background: var(--color-surface-dark);
      border-color: var(--color-border-dark);
    }
  }

/* Issue Form */
.issue-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

  /* Form Sections (extending admin styles) */
  .issue-form .form-section:last-of-type {
      padding-block-end: 0;
    }

.issue-form .form-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-emphasis);
}

.issue-form .form-section-description {
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
}

  /* Form Fields */
  .issue-form .field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

.issue-form label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-strong);
}

.issue-form input[type="text"],
/* stylelint-disable-next-line no-descending-specificity */
.issue-form textarea {
  padding: 0.625rem 0.75rem;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .issue-form input[type="text"]:focus, .issue-form textarea:focus {
      outline: none;
      border-color: var(--color-primary-500);
      box-shadow: 0 0 0 3px var(--color-indigo-alpha-10);
    }

.issue-form input::placeholder,
.issue-form textarea::placeholder {
  color: var(--color-text-muted);
}

  /* stylelint-disable-next-line no-descending-specificity */
  .issue-form textarea {
    resize: vertical;
    min-block-size: 120px;
  }

/* Field Hints */
.issue-form .field-hint {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  margin-block-start: 0.25rem;
  margin-block-end: 0;
}

/* Team Selection (Radio Buttons) */
.team-selection {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.issue-form .radio-field {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
}

.radio-input {
  appearance: none;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  min-inline-size: 1.125rem;
  margin-block-start: 0.125rem;
  background-color: var(--color-bg-secondary);
  border: 1.5px solid var(--color-border-secondary);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

  .radio-input:checked {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='white'/%3E%3C/svg%3E");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  .radio-input:hover:not(:checked) {
    border-color: var(--color-primary-400);
  }

  /* stylelint-disable-next-line no-descending-specificity */
  .radio-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-indigo-alpha-15);
  }

  /* stylelint-disable-next-line no-descending-specificity */
  html[data-theme="dark"] .radio-input {
    background-color: var(--color-slate-800);
    border-color: var(--color-border-dark);
  }

    html[data-theme="dark"] .radio-input:hover:not(:checked) {
      border-color: var(--color-primary-400);
    }

    /* stylelint-disable-next-line no-descending-specificity */
    html[data-theme="dark"] .radio-input:focus {
      box-shadow: 0 0 0 3px var(--color-primary-alpha-20);
    }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .radio-input {
      background-color: var(--color-slate-800);
      border-color: var(--color-border-dark);
    }

      html:not([data-theme]) .radio-input:hover:not(:checked) {
        border-color: var(--color-primary-400);
      }

      /* stylelint-disable-next-line no-descending-specificity */
      html:not([data-theme]) .radio-input:focus {
        box-shadow: 0 0 0 3px rgba(19, 164, 236, 0.2);
      }
  }

.radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.radio-title {
  font-weight: 500;
  color: var(--color-text-emphasis);
}

  html[data-theme="dark"] .radio-title {
    color: var(--color-slate-200);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .radio-title {
      color: var(--color-slate-200);
    }
  }

.radio-description {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  font-weight: 400;
}

  html[data-theme="dark"] .radio-description {
    color: var(--color-slate-500);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .radio-description {
      color: var(--color-slate-500);
    }
  }

.team-radio {
  padding: 0.75rem;
  background: var(--color-bg-subtle);
  border-radius: 6px;
  margin-block-end: 0;
}

.team-radio:hover {
  background: var(--color-bg-tertiary);
}

.team-radio:has(input:checked) {
  --_checked-bg: var(--color-bg-accent);
  --_checked-border: var(--color-primary-500);

  background: var(--_checked-bg);
  border: 1px solid var(--_checked-border);
}

.team-color {
  inline-size: 12px;
  block-size: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Labels Section */
.labels-section {
  margin-block-end: 1rem;
}

.labels-team-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-tertiary);
  margin-block-end: 0.75rem;
}

  html[data-theme="dark"] .labels-team-title {
    color: var(--color-slate-400);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .labels-team-title {
      color: var(--color-slate-400);
    }
  }

/* MC-43: Labels display as vertical list with no internal wrapping */
.label-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.label-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-bg-subtle);
  border-radius: 6px;
  margin-block-end: 0;
  white-space: nowrap;
  max-inline-size: 100%;
  box-sizing: border-box;
}

.label-checkbox:hover {
  background: var(--color-bg-tertiary);
}

.label-checkbox:has(input:checked) {
  --_checked-bg: var(--color-bg-accent);
  --_checked-border: var(--color-primary-500);

  background: var(--_checked-bg);
  border: 1px solid var(--_checked-border);
}

.label-checkbox .form-checkbox {
  inline-size: 1rem;
  block-size: 1rem;
  min-inline-size: 1rem;
  margin: 0;
  border-radius: 3px;
}

    html[data-theme="dark"] .label-checkbox:hover {
      background: var(--color-slate-700);
    }

    html[data-theme="dark"] .label-checkbox:has(input:checked) {
      background: var(--color-primary-alpha-15);
      border-color: var(--color-primary-400);
    }

    html[data-theme="dark"] .label-checkbox .form-checkbox {
      background-color: var(--color-slate-800);
      border-color: var(--color-border-dark);
    }

      html[data-theme="dark"] .label-checkbox .form-checkbox:hover:not(:checked) {
        border-color: var(--color-primary-400);
      }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) .label-checkbox:hover {
        background: var(--color-slate-700);
      }

      html:not([data-theme]) .label-checkbox:has(input:checked) {
        background: rgba(19, 164, 236, 0.15);
        border-color: var(--color-primary-400);
      }

      html:not([data-theme]) .label-checkbox .form-checkbox {
        background-color: var(--color-slate-800);
        border-color: var(--color-border-dark);
      }

        html:not([data-theme]) .label-checkbox .form-checkbox:hover:not(:checked) {
          border-color: var(--color-primary-400);
        }
    }

.label-checkbox .form-check-label {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.label-checkbox .form-check-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-strong);
}

.label-color {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pagination-btn:hover:not(.pagination-btn--disabled) {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-muted);
  color: var(--color-text-emphasis);
}

  .pagination-btn:focus:not(.pagination-btn--disabled) {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-indigo-alpha-10);
  }

  /* stylelint-disable-next-line no-descending-specificity */
  .pagination-btn svg {
    flex-shrink: 0;
  }

  @media (width <= 768px) {
.pagination-btn {
    flex: 1;
    justify-content: center;
    max-inline-size: 120px
}
  }

.pagination-btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-bg-tertiary);
}

.pagination-page-size {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

  @media (width <= 768px) {
.pagination-page-size {
    inline-size: 100%;
    justify-content: center
}
  }

.pagination-page-size-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.pagination-page-size-select {
  padding: var(--space-1-5) var(--space-3);
  padding-inline-end: var(--space-8);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-strong);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
  transition: all 0.15s ease;
}

  .pagination-page-size-select:hover {
    border-color: var(--color-border-muted);
  }

  .pagination-page-size-select:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-indigo-alpha-10);
  }

/* ============================================
 * SORT FILTER STYLES
 * ============================================ */

.sort-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: none;
  border-radius: 0;
  flex-wrap: nowrap;
}

  @media (width <= 768px) {
.sort-filter {
    flex-direction: column;
    align-items: flex-start
}
  }

.sort-filter-dropdown {
  position: relative;
}

  .sort-filter-dropdown.open .sort-filter-toggle {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-indigo-alpha-10);
  }

  .sort-filter-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
  }

  .sort-filter-dropdown.open .sort-filter-menu {
    display: block;
  }

  /* stylelint-disable-next-line no-descending-specificity */
  .sort-filter-dropdown .dropdown-arrow {
    transition: transform 0.15s ease;
  }

  @media (width <= 768px) {
.sort-filter-dropdown {
    inline-size: 100%
}
  }

/* stylelint-disable-next-line no-descending-specificity */
.sort-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: transparent;
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-strong);
  cursor: pointer;
  transition: all 0.15s ease;
  min-inline-size: 140px;
  justify-content: space-between;
}

  /* stylelint-disable-next-line no-descending-specificity */
  .sort-filter-toggle:hover {
    border-color: var(--color-border-muted);
    background: var(--color-hover-subtle);
  }

  @media (width <= 768px) {
.sort-filter-toggle {
    inline-size: 100%
}
  }

.sort-icon {
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

.sort-filter-current {
  flex: 1;
  text-align: start;
}

/* stylelint-disable-next-line no-descending-specificity */
.sort-filter-menu {
  position: absolute;
  inset-block-start: calc(100% + 4px);
  left: 0;
  z-index: 50;
  min-inline-size: 260px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-dropdown);
  padding: 0.5rem;
  display: none;
}

  @media (width <= 768px) {
.sort-filter-menu {
    inline-size: 100%
}
  }

.sort-filter-option {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.625rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--color-text-strong);
  background: transparent;
  border: none;
  inline-size: 100%;
  text-align: start;
  position: relative;
}

.sort-filter-option:hover {
  background: var(--color-bg-subtle);
}

.sort-filter-option.active {
  background: var(--color-bg-accent);
  color: var(--color-text-accent);
}

.sort-option-label {
  display: block;
  font-weight: 500;
}

.sort-option-description {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-tertiary);
}

.issue-card--enhanced:has(.issue-checkbox:checked):hover {
  background: var(--color-bg-accent-hover);
}

/* Bulk Actions Toolbar - floats over content when visible */
.bulk-actions-toolbar {
  position: fixed;
  inset-block-start: var(--space-4);
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 1000;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 12px;
  box-shadow: var(--shadow-toolbar);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  max-inline-size: calc(100vw - var(--space-8));
}

  .bulk-actions-toolbar.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    visibility: visible;
    pointer-events: auto;
  }

  html[data-theme="dark"] .bulk-actions-toolbar {
    background: var(--color-surface-dark, #161b22);
    border-color: var(--color-border-dark, #30363d);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .bulk-actions-toolbar {
      background: var(--color-surface-dark, #161b22);
      border-color: var(--color-border-dark, #30363d);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }
  }

  /* Responsive Bulk Actions */
  @media (width <= 768px) {
    .bulk-actions-toolbar__content {
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-3);
    }

    .bulk-actions-toolbar__left {
      justify-content: space-between;
    }

    .bulk-actions-toolbar__actions {
      justify-content: flex-start;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-block-end: var(--space-1);
    }
  }

.bulk-actions-toolbar__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  flex-wrap: wrap;
  position: relative;
}

.bulk-actions-toolbar__left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.bulk-select-all {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-strong);
}

/* stylelint-disable-next-line no-descending-specificity */
.bulk-select-all input[type="checkbox"] {
  appearance: none;
  inline-size: 18px;
  block-size: 18px;
  min-inline-size: 18px;
  margin: 0;
  cursor: pointer;
  border: 1.5px solid var(--color-border-muted);
  border-radius: 4px;
  background-color: var(--color-bg-secondary);
  transition: all 0.15s ease;
}

    /* stylelint-disable-next-line no-descending-specificity */
    .bulk-select-all input[type="checkbox"]:checked {
      background-color: var(--color-primary-500);
      border-color: var(--color-primary-500);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
      background-size: 12px;
      background-position: center;
      background-repeat: no-repeat;
    }

    /* stylelint-disable-next-line no-descending-specificity */
    .bulk-select-all input[type="checkbox"]:hover {
      border-color: var(--color-primary-400);
    }

    /* stylelint-disable-next-line no-descending-specificity */
    html[data-theme="dark"] .bulk-select-all input[type="checkbox"] {
      background-color: var(--color-slate-800, #1e293b);
      border-color: var(--color-slate-500, #64748b);
    }

      html[data-theme="dark"] .bulk-select-all input[type="checkbox"]:checked {
        background-color: var(--color-primary-500);
        border-color: var(--color-primary-500);
      }

      html[data-theme="dark"] .bulk-select-all input[type="checkbox"]:hover {
        border-color: var(--color-primary-400);
      }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) .bulk-select-all input[type="checkbox"] {
        background-color: var(--color-slate-800, #1e293b);
        border-color: var(--color-slate-500, #64748b);
      }

        html:not([data-theme]) .bulk-select-all input[type="checkbox"]:checked {
          background-color: var(--color-primary-500);
          border-color: var(--color-primary-500);
        }

        html:not([data-theme]) .bulk-select-all input[type="checkbox"]:hover {
          border-color: var(--color-primary-400);
        }
    }

.bulk-actions-toolbar__count {
  --_count-color: var(--color-text-accent-bright);
  --_count-bg: var(--color-bg-accent);

  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--_count-color);
  background: var(--_count-bg);
  padding: var(--space-1) var(--space-3);
  border-radius: 9999px;
}

  html[data-theme="dark"] .bulk-actions-toolbar__count {
    color: var(--color-primary-400, #818cf8);
    background: var(--color-indigo-alpha-15);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .bulk-actions-toolbar__count {
      color: var(--color-primary-400, #818cf8);
      background: rgba(99, 102, 241, 0.15);
    }
  }

.bulk-actions-toolbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Bulk Action Buttons */
.bulk-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 8px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-strong);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.bulk-action-btn:hover:not(:disabled) {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-muted);
}

/* stylelint-disable-next-line no-descending-specificity */
.bulk-action-btn:focus-visible {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-focus-subtle);
}

/* stylelint-disable-next-line no-descending-specificity */
.bulk-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bulk-action-btn--secondary {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-tertiary);
}

.bulk-action-btn--secondary:hover:not(:disabled) {
  background: var(--color-bg-tertiary);
  border-color: transparent;
  color: var(--color-text-strong);
}

/* stylelint-disable-next-line no-descending-specificity */
.bulk-action-btn svg {
  flex-shrink: 0;
}

/* stylelint-disable-next-line no-descending-specificity */
.bulk-action-btn .dropdown-arrow {
  transition: transform 0.15s ease;
  margin-inline-start: var(--space-1);
}

/* Bulk Action Dropdown */
.bulk-action-dropdown {
  position: relative;
}

.bulk-action-dropdown.open .bulk-action-btn {
  background: var(--color-bg-tertiary);
  border-color: var(--color-primary-500);
}

.bulk-action-dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
}

/* Bulk Action Menu */
.bulk-action-menu {
  --_menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  --_menu-scrollbar: var(--color-border-secondary) transparent;

  position: absolute;
  inset-block-start: calc(100% + 4px);
  inset-inline-start: 0;
  z-index: 150;
  min-inline-size: 220px;
  max-block-size: 320px;
  overflow-y: auto;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 10px;
  box-shadow: var(--_menu-shadow);
  display: none;
  scrollbar-width: thin;
  scrollbar-color: var(--_menu-scrollbar);
}

/* Physical: non-standard pseudo-element may not support logical properties */
.bulk-action-menu::-webkit-scrollbar {
  width: 6px;
}

.bulk-action-menu::-webkit-scrollbar-track {
  background: transparent;
}

.bulk-action-menu::-webkit-scrollbar-thumb {
  background: var(--color-border-secondary);
  border-radius: 3px;
}

.bulk-action-menu::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-muted);
}

.bulk-action-dropdown.open .bulk-action-menu {
  display: block;
}

.bulk-action-menu__header {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  border-block-end: 1px solid var(--color-border-primary);
  background: var(--color-bg-subtle);
}

.bulk-action-menu__options {
  padding: var(--space-2);
}

.bulk-action-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-strong);
  cursor: pointer;
  text-align: start;
  transition: all 0.15s ease;
}

.bulk-action-option:hover {
  background: var(--color-bg-tertiary);
}

.bulk-action-option:focus-visible {
  outline: none;
  background: var(--color-bg-accent);
}

/* Status dot in dropdown */
.bulk-action-option .status-dot {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--status-color, var(--color-fallback));
  flex-shrink: 0;
}

.assignee-avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-accent-hover);
  color: var(--color-text-accent-bright);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Loading state in dropdown */
.bulk-action-loading {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}

/* Empty state in dropdown */
.bulk-action-empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-style: italic;
}

/* Loading Indicator */
.bulk-loading-indicator {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--color-overlay-light-strong);
  border-radius: 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.bulk-loading-indicator.visible {
  opacity: 1;
  visibility: visible;
}

.bulk-loading-spinner {
  inline-size: 20px;
  block-size: 20px;
  border: 2px solid var(--color-border-primary);
  /* Physical: spinner rotation is directional */
  border-top-color: var(--color-primary-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* stylelint-disable-next-line no-descending-specificity */
.bulk-loading-indicator span {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* Bulk Notification Toast */
.bulk-notification {
  position: fixed;
  /* Physical: centering pattern with translateX(-50%) */
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 9999;
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  border-radius: 10px;
  font-size: var(--text-sm);
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

    .bulk-notification.visible {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .bulk-notification--success {
      background: var(--color-success-600);
    }

    .bulk-notification--error {
      background: var(--color-error-600);
    }

    html[data-theme="dark"] .bulk-select-all__label {
      color: var(--color-slate-300, #cbd5e1);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) .bulk-select-all__label {
        color: var(--color-slate-300, #cbd5e1);
      }
    }

  /* Responsive: bulk-action-menu and issue-card__checkbox */
  @media (width <= 768px) {
    .bulk-action-menu {
      left: auto;
      right: 0;
      min-inline-size: 200px;
    }

    .issue-card__checkbox {
      padding: var(--space-2);
    }
  }

.bulk-action-option .priority-icon {
  background: transparent;
}

html[data-theme="dark"] .bulk-action-option .priority-icon {
  background: transparent;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .bulk-action-option .priority-icon {
    background: transparent;
  }
}

/* ============================================
 * COMMENT EDIT/DELETE FUNCTIONALITY
 * ============================================ */

/* Bot badge */
.comment-bot-badge {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  background-color: var(--color-interactive-secondary);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

/* Edited badge */
.comment-edited-badge {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* MC-289: Secondary meta (timestamp + visibility) wraps to new line on mobile */
.comment-meta-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

@media (width <= 768px) {
  .comment-header-row {
    align-items: flex-start;
  }

  .comment-meta {
    flex-wrap: wrap;
    row-gap: 0;
    line-height: 1;
    padding-inline-end: var(--space-8);
  }

  /* Take actions out of flex flow so they don't inflate line height */
  .comment-meta .comment-header-actions {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 0;
  }

  .comment-meta-secondary {
    flex-basis: 100%;
    order: 10;
    font-size: var(--text-xs);
    line-height: 1;
    margin-block-start: -2px;
    color: var(--color-text-muted);
  }

  .comment-meta-secondary .comment-timestamp::before {
    display: none;
  }
}

/* Comment header actions (reactions + ellipsis menu) */
.comment-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-inline-start: auto;
}

/* Resolved check icon in comment header */
.comment-resolved-check {
  display: flex;
  align-items: center;
  color: var(--color-green-600);
}

html[data-theme="dark"] .comment-resolved-check {
  color: var(--color-green-400);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .comment-resolved-check {
    color: var(--color-green-400);
  }
}

/* Hide add-reaction button in header until comment hover */
.comment-item .reaction-add-btn {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.comment-item:hover .reaction-add-btn,
.comment-item:focus-within .reaction-add-btn {
  opacity: 1;
}

/* Comment actions wrapper */
.comment-actions-wrapper {
  position: relative;
}

/* Actions trigger button (3 dots) */
.comment-actions-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 28px;
  block-size: 28px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all 0.15s ease;
}

.comment-actions-trigger:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.comment-actions-trigger:focus {
  outline: none;
  background: var(--color-bg-tertiary);
  box-shadow: 0 0 0 2px var(--color-primary-200);
}

/* Actions dropdown menu */
.comment-actions-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: 0;
  z-index: 50;
  min-inline-size: 200px;
  padding: var(--space-1);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.15s ease;
}

.comment-actions-menu.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(4px);
}

/* Action items in dropdown */
.comment-action-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  inline-size: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--color-text-strong);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
  text-align: start;
}

.comment-action-item:hover {
  background: var(--color-bg-subtle);
}

/* stylelint-disable-next-line no-descending-specificity */
.comment-action-item svg {
  flex-shrink: 0;
}

/* Danger variant for delete */
.comment-action-item--danger {
  color: var(--color-status-error-action);
}

.comment-action-item--danger:hover {
  background: var(--color-status-error-bg);
}

/* Edit form styles */
.comment-edit-form {
  margin-block-start: var(--space-2);
}

.comment-edit-form.hidden {
  display: none;
}

.comment-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

/* Hidden class for display content when editing */
.comment-body-text.hidden {
  display: none;
}

/* Delete confirmation modal */
.comment-delete-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-overlay);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.comment-delete-modal.visible {
  opacity: 1;
  visibility: visible;
}

.comment-delete-modal-content {
  background: var(--color-bg-secondary);
  padding: var(--space-6);
  border-radius: 12px;
  max-inline-size: 400px;
  inline-size: 90%;
  box-shadow: var(--shadow-xl);
  transform: scale(0.95);
  transition: transform 0.2s ease;
}

.comment-delete-modal.visible .comment-delete-modal-content {
  transform: scale(1);
}

.comment-delete-modal-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.comment-delete-modal-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-4);
}

.comment-delete-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* Danger button for delete confirmation */
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-neutral-white);
  background: var(--color-error-600);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-danger:hover {
  background: var(--color-error-700);
}

.btn-danger:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-error);
}

.btn-danger.btn-sm {
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--text-xs);
}

/* ============================================
 * ISSUE WATCH BUTTON STYLES
 * ============================================ */

.issue-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ==========================================================================
   Watch Button (MC-278)
   Uses .btn-split from the design system for layout.
   Active/watching state is handled by .btn-split--active in the design system.
   ========================================================================== */

/* Watcher Dropdown Panel */
.watcher-dropdown {
  position: fixed;
  z-index: 9999; /* dropdown overlay convention */
  inline-size: 280px;
  max-block-size: 400px;
  overflow-y: auto;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
  padding: var(--space-2);
}

.watcher-dropdown__section {
  padding: var(--space-1) 0;
}

.watcher-dropdown__section-header {
  padding: var(--space-1) var(--space-2);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
}

.watcher-dropdown__divider {
  block-size: 1px;
  margin: var(--space-1) 0;
  background: var(--color-border-secondary);
}

.watcher-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  inline-size: 100%;
  padding: var(--space-1-5) var(--space-2);
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-strong);
  background: transparent;
  text-align: start;
}

.watcher-dropdown__item--clickable {
  cursor: pointer;
  transition: background 0.15s ease;
}

.watcher-dropdown__item--clickable:hover {
  background: var(--color-bg-subtle);
}

.watcher-dropdown__avatar {
  inline-size: 24px;
  block-size: 24px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  object-fit: cover;
}

.watcher-dropdown__avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-accent);
  color: var(--color-text-accent);
  font-size: 0.6875rem;
  font-weight: 600;
}

.watcher-dropdown__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watcher-dropdown__me-badge {
  font-weight: 400;
  color: var(--color-text-tertiary);
}

.watcher-dropdown__remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 20px;
  block-size: 20px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-tertiary);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.watcher-dropdown__remove-btn:hover {
  background: var(--color-bg-danger-subtle);
  color: var(--color-text-danger);
}

.watcher-dropdown__user-list {
  max-block-size: 200px;
  overflow-y: auto;
}

.watcher-dropdown__empty {
  padding: var(--space-2) var(--space-2);
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
  text-align: center;
}

.watcher-dropdown__loading {
  padding: var(--space-4) var(--space-2);
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
  text-align: center;
}

.watcher-dropdown__error {
  padding: var(--space-4) var(--space-2);
  font-size: 0.8125rem;
  color: var(--color-text-danger);
  text-align: center;
}

.watcher-dropdown__toast {
  position: absolute;
  inset-block-end: calc(100% + var(--space-2));
  inset-inline-end: 0;
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-danger-subtle);
  color: var(--color-text-danger);
  font-size: 0.8125rem;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: opacity 0.2s ease;
}

.watcher-dropdown__toast.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   Period Groups - Issues grouped by plan period
   ========================================================================== */

.issues-container--grouped {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.issues-period-group {
  background: var(--color-white);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  overflow: visible;
}

.issues-period-group--current {
  border-color: var(--color-primary-300);
  box-shadow: 0 0 0 1px var(--color-primary-100);
}

.issues-period-group--backlog {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-secondary);
}

.issues-period-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-subtle);
  border-block-end: 1px solid var(--color-border-primary);
}

.issues-period-group--current .issues-period-header {
  background: var(--color-bg-accent);
  border-block-end-color: var(--color-status-info-border);
}

.issues-period-group--backlog .issues-period-header {
  background: var(--color-bg-tertiary);
}

.issues-period-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-emphasis);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.issues-period-group--current .issues-period-title {
  color: var(--color-text-accent);
}

.issues-period-dates {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-tertiary);
}

.issues-period-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  background: var(--color-bg-tertiary);
  padding: 2px 8px;
  border-radius: 12px;
}

.issues-period-group--current .issues-period-count {
  background: var(--color-bg-accent-hover);
  color: var(--color-text-accent);
}

.issues-period-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Period capacity progress bar */
.period-capacity-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: help;
}

.period-capacity-bar__track {
  inline-size: 240px;
  block-size: 8px;
  background: var(--color-bg-subtle);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
}

/* Completed issues - Linear Done color (indigo/purple-blue) */
.period-capacity-bar__completed {
  background: var(--color-indigo-500);
  block-size: 100%;
}

/* Legacy used class for backwards compatibility */
.period-capacity-bar__used {
  background: var(--color-indigo-500);
  block-size: 100%;
}

/* In-progress issues - amber/orange */
.period-capacity-bar__in-progress {
  background: var(--color-amber-500);
  block-size: 100%;
}

/* Scheduled/todo issues - neutral gray */
.period-capacity-bar__todo {
  background: var(--color-border-muted);
  block-size: 100%;
}

/* Legacy pending class for backwards compatibility */
.period-capacity-bar__pending {
  background: var(--color-border-muted);
  block-size: 100%;
}

/* Overflow indicator - red striped */
.period-capacity-bar__overflow {
  background: repeating-linear-gradient(
    45deg,
    var(--color-error-400),
    var(--color-error-400) 2px,
    var(--color-error-300) 2px,
    var(--color-error-300) 4px
  );
  block-size: 100%;
}

.period-capacity-bar--over .period-capacity-bar__pending {
  background: var(--color-warning-400);
}

.period-capacity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 16px;
  block-size: 16px;
  font-size: 10px;
  font-weight: 700;
  background: var(--color-warning-500);
  color: white;
  border-radius: 50%;
}

/* Progress bar legend */
.period-capacity-legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.period-capacity-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.period-capacity-legend__dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 2px;
}

.period-capacity-legend__item--completed .period-capacity-legend__dot {
  background: var(--color-indigo-500);
}

.period-capacity-legend__item--in-progress .period-capacity-legend__dot {
  background: var(--color-amber-500);
}

.period-capacity-legend__item--todo .period-capacity-legend__dot {
  background: var(--color-border-muted);
}

.period-capacity-legend__item--available .period-capacity-legend__dot {
  background: var(--color-bg-subtle);
}

/* MC-215: Capacity separator line for over-capacity periods */
.issues-capacity-separator {
  display: flex;
  align-items: center;
  padding-block: 0;
  padding-inline: var(--space-4);
  list-style: none;
}

.issues-capacity-separator::before,
.issues-capacity-separator::after {
  content: "";
  flex: 1;
  border-block-start: 2px dashed var(--color-capacity-separator-line);
}

.issues-capacity-separator__text {
  flex-shrink: 0;
  padding-block: 0;
  padding-inline: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-capacity-separator-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Past period completed checkmark */
.past-period-checkmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-link);
}

/* stylelint-disable-next-line no-descending-specificity */
.past-period-checkmark svg {
  inline-size: 18px;
  block-size: 18px;
}

.issues-period-group .issues-list {
  border-radius: 0;
  border: none;
  background: transparent;
}

/* Empty state for plan periods */
.issues-empty-state {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  background: var(--color-bg-subtle);
  border: 2px dashed var(--color-border-secondary);
  border-radius: 8px;
  margin: var(--space-2) var(--space-4) var(--space-4);
}

.issues-empty-state__text {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* Past periods section */
.issues-past-periods {
  margin-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border-primary);
  padding-block-start: var(--space-4);
}

.issues-past-periods-heading {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-block-end: var(--space-3);
  padding: 0 var(--space-4);
}

.issues-period-group--past {
  opacity: 0.85;
}

.issues-period-group--past .issues-period-header {
  background: var(--color-bg-tertiary);
}

.issues-period-group--collapsed .issues-period-header {
  cursor: pointer;
  border-block-end: none;
}

.issues-period-group--collapsed .issues-period-header:hover {
  background: var(--color-bg-subtle);
}

.issues-period-expand-icon {
  display: inline-block;
  inline-size: 16px;
  font-size: 10px;
  color: var(--color-text-tertiary);
  transition: transform 0.2s ease;
}

.issues-period-expand-icon::before {
  content: "\25B6"; /* Right-pointing triangle */
}

.issues-period-group:not(.issues-period-group--collapsed) .issues-period-expand-icon::before {
  content: "\25BC"; /* Down-pointing triangle */
}

.issues-period-content {
  display: none;
}

.issues-period-group:not(.issues-period-group--collapsed) .issues-period-content {
  display: block;
}

.issues-period-loading {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: 14px;
}

.issues-period-empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: 14px;
  list-style: none;
}

.issues-period-error {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-danger-600);
  font-size: 14px;
  list-style: none;
  cursor: pointer;
}

/* MC-276: Collapsible completed issues section within period groups */
.issues-completed-section {
  margin-block-start: 0;
}

.issues-completed-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  border-block-end: 1px solid var(--color-border-primary);
  background: var(--color-bg-tertiary);
  font-size: 13px;
}

.issues-completed-header:hover {
  background: var(--color-bg-subtle);
}

.issues-completed-count {
  color: var(--color-text-secondary);
  font-weight: 500;
}

.issues-completed-section .issues-completed-header .issues-period-expand-icon::before {
  content: "\25BC"; /* Down-pointing triangle (expanded) */
}

.issues-completed-section--collapsed .issues-completed-header .issues-period-expand-icon::before {
  content: "\25B6"; /* Right-pointing triangle (collapsed) */
}

.issues-completed-content {
  display: block;
  padding-block-start: var(--space-1);
  margin-block-end: var(--space-2);
}

.issues-completed-section--collapsed .issues-completed-content {
  display: none;
}

.issues-completed-section--collapsed .issues-completed-header {
  border-block-end: none;
  margin-block-end: var(--space-2);
}

/* Non-editable status/assignee elements need matching padding so they align
   with their editable <button> counterparts in the active issue rows */
.issues-completed-section .issue-card-compact__status {
  padding: 2px;
}

.issues-completed-section .issue-card-compact__assignee {
  padding: 2px;
  box-sizing: border-box;
}

/* ==========================================================================
   T-Shirt Size Estimate Badge
   ========================================================================== */

.issue-card-compact__estimate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 24px;
  block-size: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-primary);
  border-radius: 4px;
  flex-shrink: 0;
}

/* ============================================
   Drag and Drop Reordering - Sortable Sections
   ============================================ */

/* Make list items draggable in sections with sortable controller */
[data-controller="backlog-sortable"] .issues-list {
  /* Ensure list has relative positioning for drop indicator */
  position: relative;
}

[data-controller="backlog-sortable"] .issue-card {
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  /* Prevent iOS long-press context menu on draggable cards (MC-53) */
  -webkit-touch-callout: none;
  user-select: none;
}

[data-controller="backlog-sortable"] .issue-card:active {
  cursor: grabbing;
}

/* Ghost element - placeholder where item will be dropped */
.issue-card--ghost {
  opacity: 0.4;
  background: var(--color-bg-accent);
  border: 2px dashed var(--color-primary-300);
}

/* MC-187: Applied via onStart callback (not chosenClass) so clicks don't trigger animation */
.issue-card--dragging {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: scale(1.02);
  z-index: 1000;
}

/* Drag class - item while being moved */
.issue-card--drag {
  opacity: 0.9;
  background: var(--color-white);
}

/* Saving state - while API call is in progress */
.issue-card--saving {
  opacity: 0.6;
  pointer-events: none;
}

.issue-card--saving::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: 16px;
  inline-size: 16px;
  block-size: 16px;
  margin-block-start: -8px;
  border: 2px solid var(--color-border-secondary);
  border-top-color: var(--color-primary-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Notification toast for backlog reordering */
.backlog-notification {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-end: 24px;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  z-index: 10000;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: var(--shadow-dropdown);
}

.backlog-notification.visible {
  opacity: 1;
  transform: translateY(0);
}

.backlog-notification--error {
  background: var(--color-status-error-bg);
  color: var(--color-error-700);
  border: 1px solid var(--color-error-200);
}

/* Section header - add visual indicator for drag-drop capability */
/* stylelint-disable-next-line no-descending-specificity */
[data-controller="backlog-sortable"] .issues-period-header {
  position: relative;
}

[data-controller="backlog-sortable"] .issues-period-title::after {
  content: "Drag to reorder";
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-inline-start: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

[data-controller="backlog-sortable"]:hover .issues-period-title::after {
  opacity: 1;
}

/* ============================================
 * VIEW AS CLIENT FEATURE (Admin)
 * ============================================ */

/* View As Dropdown */
.view-as-dropdown {
  position: relative;
}

.view-as-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-strong);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.view-as-toggle:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-muted);
}

.view-as-icon {
  flex-shrink: 0;
  color: var(--color-text-tertiary);
}

.view-as-menu {
  position: absolute;
  inset-block-start: calc(100% + 4px);
  inset-inline-end: 0;
  min-inline-size: 220px;
  max-block-size: 480px;
  overflow-y: auto;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.15s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-secondary) transparent;
}

.view-as-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.view-as-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-strong);
  text-decoration: none;
  transition: background 0.1s ease;
}

.view-as-option:hover {
  background: var(--color-bg-subtle);
}

.view-as-option__name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-primary);
}

.view-as-option__teams {
  font-size: 12px;
  color: var(--color-text-tertiary);
}

/* View As Banner (shown when viewing as a client) */
.view-as-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  margin-block-end: var(--space-4);
  background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-primary-100) 100%);
  border: 1px solid var(--color-primary-200);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}

.view-as-banner__content {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-accent);
}

.view-as-banner__icon {
  flex-shrink: 0;
  color: var(--color-text-accent-bright);
}

/* stylelint-disable-next-line no-descending-specificity */
.view-as-banner__content strong {
  font-weight: 600;
  color: var(--color-primary-800);
}

.view-as-banner__hint {
  font-size: 12px;
  color: var(--color-text-link);
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid var(--color-primary-200);
}

.view-as-banner__close {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-accent);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-primary-200);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.view-as-banner__close:hover {
  background: var(--color-bg-accent);
  border-color: var(--color-primary-300);
  color: var(--color-primary-800);
}

/* stylelint-disable-next-line no-descending-specificity */
.view-as-banner__close svg {
  flex-shrink: 0;
}

/* MC-45: Inline view-as dropdown (next to Issues heading) */
.view-as-dropdown--inline {
  display: inline-flex;
  margin-inline-start: var(--space-2);
}

.view-as-toggle--inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.view-as-toggle--inline:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-primary);
}

.view-as-toggle--inline .view-as-icon {
  inline-size: 32px;
  block-size: 32px;
  color: var(--color-text-tertiary);
}

.view-as-toggle--inline .view-as-icon--contract {
  inline-size: 20px;
  block-size: 20px;
}

/* stylelint-disable-next-line no-descending-specificity */
.view-as-toggle--inline .dropdown-arrow {
  inline-size: 10px;
  block-size: 10px;
  color: var(--color-text-muted);
}

.view-as-toggle__label {
  color: var(--color-text-accent-bright);
  font-weight: 600;
}

@media (width <= 768px) {
  .issues-page-header__title-section {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* View-as menu styles for inline dropdown */
.view-as-dropdown--inline .view-as-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}

.view-as-menu__divider {
  block-size: 1px;
  background: var(--color-border-primary);
  margin: var(--space-1) 0;
}

.view-as-option--active {
  --_active-bg: var(--color-bg-accent);
  --_active-check: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5 4.5L6 12L2.5 8.5' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  background: var(--_active-bg);
}

.view-as-option--active .view-as-option__name {
  color: var(--color-text-accent);
}

.view-as-option--active::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  inline-size: 16px;
  block-size: 16px;
  background-image: var(--_active-check);
  background-repeat: no-repeat;
  background-position: center;
}

/* MC-57: View-as menu scrollbar styles (Light Mode) */
.view-as-menu::-webkit-scrollbar {
  width: 6px;
}

.view-as-menu::-webkit-scrollbar-track {
  background: transparent;
}

.view-as-menu::-webkit-scrollbar-thumb {
  background: var(--color-border-secondary);
  border-radius: 3px;
}

.view-as-menu::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-muted);
}

/* ============================================
 * ACTIVE FILTERS SUMMARY
 * ============================================ */

.active-filters-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-accent);
  border: 1px solid var(--color-primary-200);
  border-radius: 8px;
  font-size: var(--text-sm);
  color: var(--color-text-accent);
}

.active-filters-summary__label {
  font-weight: 600;
  color: var(--color-primary-800);
}

.active-filters-summary__items {
  font-weight: 500;
  color: var(--color-text-accent-bright);
}

.active-filters-summary__clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-accent-bright);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-primary-200);
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.15s ease;
  margin-inline-start: var(--space-2);
}

.active-filters-summary__clear:hover {
  background: var(--color-bg-accent-hover);
  border-color: var(--color-primary-300);
  color: var(--color-text-accent);
}

/* stylelint-disable-next-line no-descending-specificity */
.active-filters-summary__clear svg {
  flex-shrink: 0;
}

/* ============================================
 * SCROLLBAR STYLING FOR FILTER DROPDOWNS
 * ============================================ */

/* Scrollbar Styling */
/* stylelint-disable no-descending-specificity -- shared scrollbar styling for filter menus */
.status-filter-menu,
.team-filter-menu,
.assignee-filter-menu,
.label-filter-menu,
.sort-filter-menu,
.priority-filter-menu {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-secondary) transparent;
}
/* stylelint-enable no-descending-specificity */

.status-filter-menu::-webkit-scrollbar,
.team-filter-menu::-webkit-scrollbar,
.assignee-filter-menu::-webkit-scrollbar,
.label-filter-menu::-webkit-scrollbar,
.sort-filter-menu::-webkit-scrollbar,
.priority-filter-menu::-webkit-scrollbar {
  width: 6px;
}

.status-filter-menu::-webkit-scrollbar-track,
.team-filter-menu::-webkit-scrollbar-track,
.assignee-filter-menu::-webkit-scrollbar-track,
.label-filter-menu::-webkit-scrollbar-track,
.sort-filter-menu::-webkit-scrollbar-track,
.priority-filter-menu::-webkit-scrollbar-track {
  background: transparent;
}

.status-filter-menu::-webkit-scrollbar-thumb,
.team-filter-menu::-webkit-scrollbar-thumb,
.assignee-filter-menu::-webkit-scrollbar-thumb,
.label-filter-menu::-webkit-scrollbar-thumb,
.sort-filter-menu::-webkit-scrollbar-thumb,
.priority-filter-menu::-webkit-scrollbar-thumb {
  background: var(--color-border-secondary);
  border-radius: 3px;
}

.status-filter-menu::-webkit-scrollbar-thumb:hover,
.team-filter-menu::-webkit-scrollbar-thumb:hover,
.assignee-filter-menu::-webkit-scrollbar-thumb:hover,
.label-filter-menu::-webkit-scrollbar-thumb:hover,
.sort-filter-menu::-webkit-scrollbar-thumb:hover,
.priority-filter-menu::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-muted);
}

/* ===== MC-168: Admin Issue Editing Styles ===== */

/* Editable estimate badge on issue list */
.issue-card-compact__estimate-badge--editable {
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--color-bg-tertiary);
  transition: all 0.15s ease;
}

.issue-card-compact__estimate-badge--editable:hover {
  --_est-hover-border: var(--color-primary-300);
  --_est-hover-bg: var(--color-bg-accent);

  border-color: var(--_est-hover-border);
  background: var(--_est-hover-bg);
}

        html[data-theme="dark"] .view-as-option--active .view-as-option__name {
          color: var(--color-primary-300);
        }

        html[data-theme="dark"] .view-as-option--active::after {
          background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5 4.5L6 12L2.5 8.5' stroke='%23a5b4fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        }

        @media (prefers-color-scheme: dark) {
          html:not([data-theme]) .view-as-option--active .view-as-option__name {
            color: var(--color-primary-300);
          }

          html:not([data-theme]) .view-as-option--active::after {
            background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5 4.5L6 12L2.5 8.5' stroke='%23a5b4fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          }
        }

.detail-editable-value:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-primary);
}

      html[data-theme="dark"] .view-as-option:hover {
        background: var(--color-neutral-700);
      }

      @media (prefers-color-scheme: dark) {
        html:not([data-theme]) .view-as-option:hover {
          background: var(--color-neutral-700);
        }
      }

.detail-status-badge--editable:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-primary);
}

/* Detail editor dropdown positioning */
.detail-editor-dropdown,
.status-dropdown,
.label-editor-dropdown {
  position: fixed;
  z-index: 9999;
  min-inline-size: 180px;
  max-inline-size: 280px;
  max-block-size: 300px;
  overflow-y: auto;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-dropdown);
  padding: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-secondary) transparent;
}

.sidebar-card-edit-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
}

  /* ============================================
   * DARK MODE - FILTER DROPDOWNS
   * ============================================ */
    html[data-theme="dark"] .priority-filter, html[data-theme="dark"] .status-filter, html[data-theme="dark"] .team-filter, html[data-theme="dark"] .assignee-filter, html[data-theme="dark"] .label-filter, html[data-theme="dark"] .sort-filter {
      background: none;
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) .priority-filter, html:not([data-theme]) .status-filter, html:not([data-theme]) .team-filter, html:not([data-theme]) .assignee-filter, html:not([data-theme]) .label-filter, html:not([data-theme]) .sort-filter {
        background: none;
      }
    }

.label-editor-option:hover {
  background: var(--color-bg-subtle);
}

.label-editor-checkbox {
  inline-size: 16px;
  block-size: 16px;
  cursor: pointer;
  accent-color: var(--color-text-link);
}

    html[data-theme="dark"] .status-filter-dropdown.open .status-filter-toggle, html[data-theme="dark"] .team-filter-dropdown.open .team-filter-toggle, html[data-theme="dark"] .assignee-filter-dropdown.open .assignee-filter-toggle, html[data-theme="dark"] .label-filter-dropdown.open .label-filter-toggle, html[data-theme="dark"] .sort-filter-dropdown.open .sort-filter-toggle, html[data-theme="dark"] .priority-filter-dropdown.open .priority-filter-toggle {
      border-color: var(--color-primary-400);
      box-shadow: 0 0 0 3px var(--color-primary-alpha-20);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) .status-filter-dropdown.open .status-filter-toggle, html:not([data-theme]) .team-filter-dropdown.open .team-filter-toggle, html:not([data-theme]) .assignee-filter-dropdown.open .assignee-filter-toggle, html:not([data-theme]) .label-filter-dropdown.open .label-filter-toggle, html:not([data-theme]) .sort-filter-dropdown.open .sort-filter-toggle, html:not([data-theme]) .priority-filter-dropdown.open .priority-filter-toggle {
        border-color: var(--color-primary-400);
        box-shadow: 0 0 0 3px rgba(19, 164, 236, 0.2);
      }
    }

  /* Dropdown Icons */
    /* stylelint-disable-next-line no-descending-specificity */
    html[data-theme="dark"] .team-icon, html[data-theme="dark"] .assignee-icon, html[data-theme="dark"] .label-icon, html[data-theme="dark"] .sort-icon, html[data-theme="dark"] .priority-icon {
      color: var(--color-slate-400);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) .team-icon, html:not([data-theme]) .assignee-icon, html:not([data-theme]) .label-icon, html:not([data-theme]) .sort-icon, html:not([data-theme]) .priority-icon {
        color: var(--color-slate-400);
      }
    }

/* Assignee editor avatar in dropdown */
.assignee-editor-avatar {
  inline-size: 20px;
  block-size: 20px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.assignee-editor-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  font-size: 0.6875rem;
  font-weight: 600;
}

/* Detail avatar placeholder for assignee display */
.detail-avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 20px;
  block-size: 20px;
  border-radius: var(--radius-full);
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* Inline editor error flash */
.inline-editor-error {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  margin-block-start: 4px;
  padding: 4px 8px;
  font-size: 0.75rem;
  color: var(--color-text-inverse);
  background: var(--color-red-600, #dc2626);
  border-radius: 4px;
  white-space: nowrap;
  z-index: 10000;
  animation: editor-error-fade 3s ease-in-out;
  pointer-events: none;
}

  /* Dark mode filter checkboxes */
      /* stylelint-disable-next-line no-descending-specificity */
      html[data-theme="dark"] .priority-filter-option input[type="checkbox"], html[data-theme="dark"] .status-filter-option input[type="checkbox"], html[data-theme="dark"] .team-filter-option input[type="checkbox"], html[data-theme="dark"] .assignee-filter-option input[type="checkbox"], html[data-theme="dark"] .label-filter-option input[type="checkbox"] {
        background-color: var(--color-slate-800);
        border-color: var(--color-slate-500);
      }

        html[data-theme="dark"] .priority-filter-option input[type="checkbox"]:checked, html[data-theme="dark"] .status-filter-option input[type="checkbox"]:checked, html[data-theme="dark"] .team-filter-option input[type="checkbox"]:checked, html[data-theme="dark"] .assignee-filter-option input[type="checkbox"]:checked, html[data-theme="dark"] .label-filter-option input[type="checkbox"]:checked {
          background-color: var(--color-primary-500);
          border-color: var(--color-primary-500);
        }

        html[data-theme="dark"] .priority-filter-option input[type="checkbox"]:hover, html[data-theme="dark"] .status-filter-option input[type="checkbox"]:hover, html[data-theme="dark"] .team-filter-option input[type="checkbox"]:hover, html[data-theme="dark"] .assignee-filter-option input[type="checkbox"]:hover, html[data-theme="dark"] .label-filter-option input[type="checkbox"]:hover {
          border-color: var(--color-primary-400);
        }

      @media (prefers-color-scheme: dark) {
        html:not([data-theme]) .priority-filter-option input[type="checkbox"], html:not([data-theme]) .status-filter-option input[type="checkbox"], html:not([data-theme]) .team-filter-option input[type="checkbox"], html:not([data-theme]) .assignee-filter-option input[type="checkbox"], html:not([data-theme]) .label-filter-option input[type="checkbox"] {
          background-color: var(--color-slate-800);
          border-color: var(--color-slate-500);
        }

          html:not([data-theme]) .priority-filter-option input[type="checkbox"]:checked, html:not([data-theme]) .status-filter-option input[type="checkbox"]:checked, html:not([data-theme]) .team-filter-option input[type="checkbox"]:checked, html:not([data-theme]) .assignee-filter-option input[type="checkbox"]:checked, html:not([data-theme]) .label-filter-option input[type="checkbox"]:checked {
            background-color: var(--color-primary-500);
            border-color: var(--color-primary-500);
          }

          html:not([data-theme]) .priority-filter-option input[type="checkbox"]:hover, html:not([data-theme]) .status-filter-option input[type="checkbox"]:hover, html:not([data-theme]) .team-filter-option input[type="checkbox"]:hover, html:not([data-theme]) .assignee-filter-option input[type="checkbox"]:hover, html:not([data-theme]) .label-filter-option input[type="checkbox"]:hover {
            border-color: var(--color-primary-400);
          }
      }

  /* ===== Real-time Update Animations ===== */

  /* Issue card removal animation */
  .issue-card--removing {
    animation: issue-removal 300ms ease-out forwards;
  }

  @keyframes issue-removal {
    0% {
      opacity: 1;
      max-block-size: 100px;
      transform: scale(1);
    }

    50% {
      opacity: 0.5;
      transform: scale(0.98);
    }

    100% {
      opacity: 0;
      max-block-size: 0;
      padding-block-start: 0;
      padding-block-end: 0;
      margin-block-start: 0;
      margin-block-end: 0;
      transform: scale(0.95);
    }
  }

  /* Respect prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .issue-card--updating,
    .issue-card--updated,
    .issue-card--removing {
      animation: none;
      transition: none;
    }

    .issue-card--removing {
      opacity: 0;
    }
  }

  /* Editable value button in show page sidebar */
  /* stylelint-disable-next-line no-descending-specificity */
  .detail-editable-value {
    cursor: pointer;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-default);
    padding: var(--space-1) var(--space-2);
    margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2));
    font: inherit;
    color: inherit;
    text-align: start;
    transition: all 0.15s ease;
  }

    .detail-editable-value.loading {
      opacity: 0.6;
      pointer-events: none;
    }

    html[data-theme="dark"] .detail-editable-value:hover {
      background: var(--color-slate-700);
      border-color: var(--color-border-dark);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) .detail-editable-value:hover {
        background: var(--color-slate-700);
        border-color: var(--color-border-dark);
      }
    }

  /* Editable status badge */
  /* stylelint-disable-next-line no-descending-specificity */
  .detail-status-badge--editable {
    cursor: pointer;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-default);
    padding: var(--space-1) var(--space-2);
    margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2));
    font: inherit;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    transition: all 0.15s ease;
  }

    .detail-status-badge--editable.loading {
      opacity: 0.6;
      pointer-events: none;
    }

    html[data-theme="dark"] .detail-status-badge--editable:hover {
      background: var(--color-slate-700);
      border-color: var(--color-border-dark);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) .detail-status-badge--editable:hover {
        background: var(--color-slate-700);
        border-color: var(--color-border-dark);
      }
    }

  /* Sublabel for cycle date ranges */
  .list-editor-dropdown__label-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .list-editor-dropdown__sublabel {
    font-size: 0.6875rem;
    color: var(--color-text-tertiary);
  }

  .detail-sublabel {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin-inline-start: var(--space-1);
  }

  /* Project color dot */
  .project-color-dot {
    display: inline-block;
    inline-size: 10px;
    block-size: 10px;
    border-radius: var(--radius-full);
  }

  /* Sidebar card edit button */
  /* stylelint-disable-next-line no-descending-specificity */
  .sidebar-card-edit-btn {
    margin-inline-start: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-tertiary);
    padding: var(--space-1);
    border-radius: var(--radius-default);
    display: flex;
    align-items: center;
    transition: all 0.15s ease;
  }

  /* Label editor checkbox styles */
  /* stylelint-disable-next-line no-descending-specificity */
  .label-editor-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1-half) var(--space-2);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .label-editor-color {
    inline-size: 12px;
    block-size: 12px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
  }

  .label-editor-name {
    font-size: 0.8125rem;
    color: var(--color-text-primary);
  }

    html[data-theme="dark"] .label-editor-name {
      color: var(--color-slate-200);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) .label-editor-name {
        color: var(--color-slate-200);
      }
    }

/* ============================================
 * DARK MODE OVERRIDES
 * Component-specific overrides that cannot be handled by semantic tokens.
 * Grouped by category:
 *   1. Alpha-based hover states (white-alpha for dark backgrounds)
 *   2. Scoped variable overrides
 * ============================================ */

/* --- 1. Alpha-based hover/active/selected states --- */
html[data-theme="dark"] button.issue-card-compact__assignee--editable:hover,
html[data-theme="dark"] .issue-card-compact__priority-editor button.issue-card-compact__priority:hover,
html[data-theme="dark"] .issue-card-compact__status-editor button.issue-card-compact__status:hover,
html[data-theme="dark"] .issue-card-compact__priority--editable:hover,
html[data-theme="dark"] .issue-card-compact__status--editable:hover {
  background: var(--color-white-alpha-10);
}

html[data-theme="dark"] .priority-dropdown-option.active,
html[data-theme="dark"] .priority-selector-option.active {
  background: var(--color-primary-alpha-15);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) button.issue-card-compact__assignee--editable:hover,
  html:not([data-theme]) .issue-card-compact__priority-editor button.issue-card-compact__priority:hover,
  html:not([data-theme]) .issue-card-compact__status-editor button.issue-card-compact__status:hover,
  html:not([data-theme]) .issue-card-compact__priority--editable:hover,
  html:not([data-theme]) .issue-card-compact__status--editable:hover {
    background: var(--color-white-alpha-10);
  }

  html:not([data-theme]) .priority-dropdown-option.active,
  html:not([data-theme]) .priority-selector-option.active {
    background: var(--color-primary-alpha-15);
  }
}

/* --- 2. Scoped variable overrides --- */
html[data-theme="dark"] .issue-card-compact__estimate-badge--editable:hover {
  --_est-hover-border: var(--color-primary-700);
  --_est-hover-bg: var(--color-primary-alpha-15);
}

html[data-theme="dark"] .comment-visibility-badge--private {
  --_vis-color: var(--color-orange-500);
  --_vis-bg: transparent;
  --_vis-border: var(--color-orange-800);
  --_vis-bg-hover: var(--color-orange-900);
}

html[data-theme="dark"] .comment-visibility-badge--public {
  --_vis-color: var(--color-neutral-500);
  --_vis-bg: transparent;
  --_vis-border: var(--color-neutral-700);
  --_vis-bg-hover: var(--color-neutral-800);
}

html[data-theme="dark"] .comment-resolution-badge--resolved {
  --_res-color: var(--color-purple-400);
  --_res-bg: var(--color-purple-900);
  --_res-border: var(--color-purple-700);
}

html[data-theme="dark"] .comment-resolution-check {
  color: var(--color-green-400);
}

html[data-theme="dark"] .view-as-option--active {
  --_active-bg: var(--color-primary-900);
  --_active-check: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5 4.5L6 12L2.5 8.5' stroke='%23a5b4fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-theme="dark"] .team-radio:has(input:checked),
html[data-theme="dark"] .label-checkbox:has(input:checked) {
  --_checked-bg: var(--color-primary-alpha-15);
  --_checked-border: var(--color-primary-400);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .issue-card-compact__estimate-badge--editable:hover {
    --_est-hover-border: var(--color-primary-700);
    --_est-hover-bg: var(--color-primary-alpha-15);
  }

  html:not([data-theme]) .comment-visibility-badge--private {
    --_vis-color: var(--color-orange-500);
    --_vis-bg: transparent;
    --_vis-border: var(--color-orange-800);
    --_vis-bg-hover: var(--color-orange-900);
  }

  html:not([data-theme]) .comment-visibility-badge--public {
    --_vis-color: var(--color-neutral-500);
    --_vis-bg: transparent;
    --_vis-border: var(--color-neutral-700);
    --_vis-bg-hover: var(--color-neutral-800);
  }

  html:not([data-theme]) .comment-resolution-badge--resolved {
    --_res-color: var(--color-purple-400);
    --_res-bg: var(--color-purple-900);
    --_res-border: var(--color-purple-700);
  }

  html:not([data-theme]) .comment-resolution-check {
    color: var(--color-green-400);
  }

  html:not([data-theme]) .view-as-option--active {
    --_active-bg: var(--color-primary-900);
    --_active-check: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5 4.5L6 12L2.5 8.5' stroke='%23a5b4fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  html:not([data-theme]) .team-radio:has(input:checked),
  html:not([data-theme]) .label-checkbox:has(input:checked) {
    --_checked-bg: var(--color-primary-alpha-15);
    --_checked-border: var(--color-primary-400);
  }
}

} /* @layer components */