/*
 * Mission Control - Redesigned Pages
 *
 * Updated styles for client-facing pages based on Mission Control design mockups.
 * Uses design tokens from design-tokens.css
 */

@layer components {

/* ========================================
 * ISSUES PAGE - INDEX
 * ======================================== */

/* Page container */
.issues-page--redesigned {
  padding: 0;
}

  /* Page header (non-flat mode) */
  .issues-page--redesigned .page-header--enhanced {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    background-color: var(--color-bg-primary);
    /* Override issues.css styling */
    border: none;
    border-block-end: 1px solid var(--color-border-primary);
    border-radius: 0;
    box-shadow: none;
    margin-block-end: 0;
  }

    html[data-theme="dark"] .issues-page--redesigned .page-header--enhanced {
      background-color: var(--color-bg-dark);
      border-block-end-color: var(--color-border-dark);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) .issues-page--redesigned .page-header--enhanced {
        background-color: var(--color-bg-dark);
        border-block-end-color: var(--color-border-dark);
      }
    }

/* Flat layout mode */
.issues-page--flat {
  background-color: var(--color-bg-primary);
  padding: var(--space-6);
}

/* New simplified page header */
.issues-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--space-4);
}

  .issues-page-header__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
  }

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

/* Legacy page header - hidden in flat mode */
/* stylelint-disable-next-line no-descending-specificity */
.issues-page--flat .page-header--enhanced {
  display: none;
}

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

.page-header__title {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin: 0;
}

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

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

  .header-actions .btn-primary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-primary-500);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
    text-decoration: none;
  }

    .header-actions .btn-primary:hover {
      background-color: var(--color-primary-600);
    }

/* ========================================
 * PERIOD GROUPS (Mission Groups)
 * ======================================== */

/* Period groups - standard mode */
.issues-page--redesigned .issues-period-group {
  padding-block-start: 0;
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  margin: var(--space-4) var(--space-6);
  border: none;
  box-shadow: none;
}

.issues-page--redesigned .issues-period-group:first-child {
  margin-block-start: var(--space-4);
}

/* Override the --current styling */
.issues-page--redesigned .issues-period-group--current {
  border: none;
  box-shadow: none;
}

/* Period groups - flat mode */
/* MC-167: overflow: visible allows checkboxes to render in the gutter area
   outside the period group border. Previously overflow: hidden clipped them. */
/* stylelint-disable-next-line no-descending-specificity */
.issues-page--flat .issues-period-group {
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  margin: 0 0 var(--space-4) 0;
  padding: 0;
  border: none;
  box-shadow: none;
  overflow: visible;
}

/* MC-167: With overflow:visible, child hover backgrounds can bleed past the
   period group's rounded corners. Apply matching border-radius to first/last cards. */
.issues-page--flat .issues-period-group .issue-card--compact:last-child {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.issues-page--redesigned .issues-period-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: transparent;
  border-block-end: none;
}

@media (width <= 768px) {
  .issues-page--redesigned .issues-period-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2);
  }
}

/* Override current period header styling */
.issues-page--redesigned .issues-period-group--current .issues-period-header {
  background: transparent;
  background-color: transparent;
}

.issues-period-title {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.issues-period-plan-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
}

.issues-period-dates {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-tertiary);
}

.issues-period-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.issues-period-count {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-tertiary);
}

/* Period status badge */
.period-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-half) var(--space-2);
  border-radius: var(--radius-default);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.period-status-badge--healthy {
  background-color: var(--color-primary-alpha-10);
  color: var(--color-text-link);
  border: 1px solid var(--color-primary-alpha-20);
}

  .period-status-badge--overbooked {
    background-color: var(--color-error-alpha-10);
    color: var(--color-error-500);
    border: 1px solid var(--color-error-alpha-20);
  }

/* ========================================
 * PROGRESS BAR
 * ======================================== */
.period-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-half);
  min-inline-size: 200px;
}

  .period-progress__legend {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
  }

  .period-progress__legend-items {
    display: flex;
    gap: var(--space-4);
  }

  .period-progress__legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-1-half);
  }

  .period-progress__legend-dot {
    inline-size: 6px;
    block-size: 6px;
    border-radius: var(--radius-full);
  }

.period-progress__legend-dot--scheduled {
  background-color: var(--color-slate-300);
}

.period-progress__legend-dot--in-progress {
  background-color: var(--color-primary-500);
}

  .period-progress__legend-dot--done {
    background-color: var(--color-success-500);
  }

.period-progress__percent {
  color: var(--color-text-link);
}

.period-progress__bar {
  block-size: 6px;
  inline-size: 100%;
  background-color: var(--color-slate-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  display: flex;
}

.period-progress__segment--done {
  background-color: var(--color-success-500);
}

  .period-progress__segment--in-progress {
    background-color: var(--color-primary-500);
  }

.period-progress__segment--scheduled {
  background-color: var(--color-slate-300);
}

/* ========================================
 * ISSUES LIST
 * ======================================== */
.issues-list--enhanced {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: transparent;
}

/* ========================================
 * ISSUE ROW (Compact Card)
 * ======================================== */
/* stylelint-disable-next-line no-descending-specificity */
.issue-card--compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2-half) var(--space-6);
  border-block-end: 1px solid var(--color-border-primary);
  transition: background-color 0.15s ease;
  cursor: pointer;
  background-color: transparent;
}

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

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

/* Checkbox styles defined in issues.css (MC-123) */

/* Priority icon */
.issue-card-compact__priority {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: 20px;
  block-size: 20px;
}

  .issue-card-compact__priority svg {
    inline-size: 16px;
    block-size: 16px;
  }

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

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

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

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

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

/* Identifier */
.issue-card-compact__identifier {
  font-family: var(--font-family-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  inline-size: 4rem;
  flex-shrink: 0;
}

/* Status icon */
.issue-card-compact__status {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

  .issue-card-compact__status svg {
    inline-size: 18px;
    block-size: 18px;
  }

  .issue-card-compact__status .heroicon,
  .issue-card-compact__status .status-icon {
    inline-size: 18px;
    block-size: 18px;
  }

  .issue-card-compact__status--done {
    color: var(--color-indigo-500);
  }

  .issue-card-compact__status--in-progress {
    color: var(--color-warning-500);
  }

  .issue-card-compact__status--in-review {
    color: var(--color-success-500);
  }

  .issue-card-compact__status--canceled {
    color: var(--color-text-tertiary);
  }

  .issue-card-compact__status--backlog {
    color: var(--color-text-tertiary);
  }

  .issue-card-compact__status--triage {
    color: var(--color-orange-500);
  }

  .issue-card-compact__status--todo {
    color: var(--color-text-tertiary);
  }

/* Title */
.issue-card-compact__title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-inline-size: 0;
}

.issue-card-compact__title-link {
  color: inherit;
  text-decoration: none;
}

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

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

/* Labels */
.issue-card-compact__labels {
  display: flex;
  gap: 8px;  /* MC-77: Fixed 8px gap for proper visual separation */
  justify-content: flex-end;
  min-inline-size: 120px;
}

  /* MC-234: Hide labels on tablet and below (must be here to override above) */
  @media (width <= 1024px) {
.issue-card-compact__labels {
    display: none
}
  }

  /* MC-77: Expand hidden labels when hovering on the labels container */
  .issue-card-compact__labels:hover .issue-card-compact__label--hidden {
    max-inline-size: 150px;
    padding: 2px 10px 2px 6px;
    margin-inline-start: 0;
    opacity: 1;
  }

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

.issue-card-compact__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-default);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: color-mix(in srgb, var(--label-color, #888) 10%, transparent);
  color: var(--label-color, var(--color-text-secondary));
  border: 1px solid color-mix(in srgb, var(--label-color, #888) 20%, transparent);
}

  /* MC-77: Hidden labels use opacity/max-width animation instead of display:none */
  /* 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;
    transition: opacity 0.2s ease, max-width 0.3s ease, padding 0.3s ease, margin 0.3s ease;
  }

.issue-card-compact__label-dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--radius-full);
  background-color: var(--label-color, currentColor);
}

/* stylelint-disable-next-line no-descending-specificity */
.issue-card-compact__label-more {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-tertiary);
}

/* Size estimate badge */
.issue-card-compact__estimate-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-default);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-strong);
  border: 1px solid var(--color-border-secondary);
  min-inline-size: 2rem;
  text-align: center;
}

/* Meta items (comments, sub-issues) */
.issue-card-compact__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

/* Assignee avatar */
.issue-card-compact__assignee {
  inline-size: 2rem;
  display: flex;
  justify-content: flex-end;
}

.issue-card-compact__avatar {
  inline-size: 24px;
  block-size: 24px;
  border-radius: var(--radius-full);
  object-fit: cover;
  box-sizing: border-box;
  border: 1px solid var(--color-slate-600);
}

.issue-card-compact__avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: var(--color-text-secondary);
  background-color: var(--color-bg-elevated);
}

/* Date */
.issue-card-compact__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ========================================
 * FILTERS CONTAINER
 * ======================================== */
.filters-container {
  background-color: transparent;
  border-block-end: none;
  margin-block-end: var(--space-4);
}

/* Flat mode filters */
.issues-page--flat .filters-container {
  background-color: transparent;
  border: none;
  padding: 0;
  margin-block-end: var(--space-4);
}

.filters-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.filters-toggle-button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: none;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

  .filters-toggle-button:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text-primary);
  }

  html[data-theme="dark"] .filters-toggle-button {
    background-color: transparent;
    border-color: var(--color-border-dark);
    color: var(--color-slate-400);
  }

    html[data-theme="dark"] .filters-toggle-button:hover {
      background-color: var(--color-row-hover);
      color: var(--color-slate-200);
    }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .filters-toggle-button {
      background-color: transparent;
      border-color: var(--color-border-dark);
      color: var(--color-slate-400);
    }

      html:not([data-theme]) .filters-toggle-button:hover {
        background-color: var(--color-row-hover);
        color: var(--color-slate-200);
      }
  }

.filters-content {
  padding: var(--space-2) var(--space-3);
  border-block-start: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-default);
}

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

/* Active filters summary */
.active-filters-summary {
  --filters-accent: var(--color-text-tertiary);
  --filters-border: transparent;
  --filters-bg: transparent;

  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  background: var(--filters-bg);
  border-color: var(--filters-border);
}

.active-filters-summary__label {
  color: var(--filters-accent);
}

.active-filters-summary__clear {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-tertiary);
  text-decoration: none;
  border-color: var(--filters-border);
  transition: color 0.15s ease;
}

.active-filters-summary__clear:hover {
  color: var(--color-error-500);
  border-color: var(--color-blue-alpha-50);
}

/* ========================================
 * EMPTY STATE
 * ======================================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-4);
  text-align: center;
}

  .empty-state__icon {
    inline-size: 48px;
    block-size: 48px;
    color: var(--color-text-muted);
    margin-block-end: var(--space-4);
  }

  .empty-state__title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
  }

  .empty-state__description {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    max-inline-size: 400px;
    margin: 0 0 var(--space-6);
  }

/* ========================================
 * VIEW AS BANNER
 * ======================================== */
.view-as-banner {
  --banner-bg: var(--color-primary-alpha-10);
  --banner-border: var(--color-primary-alpha-20);
  --banner-accent: var(--color-text-link);
  --banner-accent-hover: var(--color-text-link);
  --banner-strong: var(--color-text-strong);

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-6);
  background: var(--banner-bg);
  border-block-end: 1px solid var(--banner-border);
}

.view-as-banner__content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--banner-accent);
}

.view-as-banner__content strong {
  color: var(--banner-strong);
}

.view-as-banner__hint {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  border-color: var(--banner-border);
}

.view-as-banner__close {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-default);
  border-color: var(--banner-border);
  transition: all 0.15s ease;
}

.view-as-banner__close:hover {
  background-color: var(--color-primary-alpha-10);
  color: var(--banner-accent-hover);
  border-color: var(--color-blue-alpha-50);
}

/* ========================================
 * PAGINATION
 * ======================================== */
.pagination-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-block-start: 1px solid var(--color-border-primary);
  font-size: var(--text-xs);
}

  html[data-theme="dark"] .pagination-container {
    background: var(--color-surface-dark);
    border-color: var(--color-border-dark);
    box-shadow: none;
  }

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

.pagination-summary {
  color: var(--color-text-tertiary);
}

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

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

.pagination-controls {
  display: flex;
  gap: var(--space-2);
}

.pagination-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: all 0.15s ease;
}

  .pagination-btn:hover:not(.pagination-btn--disabled) {
    background-color: var(--color-bg-hover);
    color: var(--color-text-primary);
  }

  .pagination-btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

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

    html[data-theme="dark"] .pagination-btn:hover:not(.pagination-btn--disabled) {
      background-color: var(--color-row-hover);
      color: var(--color-slate-200);
    }

  html[data-theme="dark"] .pagination-page-size-select {
    background-color: var(--color-slate-800);
    border-color: var(--color-border-dark);
    color: var(--color-slate-300);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .pagination-btn {
      background-color: transparent;
      border-color: var(--color-border-dark);
      color: var(--color-slate-400);
    }

      html:not([data-theme]) .pagination-btn:hover:not(.pagination-btn--disabled) {
        background-color: var(--color-row-hover);
        color: var(--color-slate-200);
      }

    html:not([data-theme]) .pagination-page-size-select {
      background-color: var(--color-slate-800);
      border-color: var(--color-border-dark);
      color: var(--color-slate-300);
    }
  }

/* ========================================
 * BACKLOG SECTION
 * ======================================== */
.issues-period-group--backlog .issues-period-title {
  color: var(--color-text-secondary);
}

/* ========================================
 * PAST PERIODS
 * ======================================== */
.issues-past-periods {
  padding: 0;
  margin-block-start: var(--space-6);
  border-block-start: none;
}

.issues-past-periods-heading {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-4);
  padding: 0;
}

/* ========================================
 * ISSUE DETAIL PAGE
 * ======================================== */
.issue-detail-page {
  /* Let content flow naturally - no flex needed */
  /* Override padding from issues.css */
  padding: var(--space-4) var(--space-4) var(--space-6);
}

  @media (width <= 768px) {
.issue-detail-page {
    padding: var(--space-2)
}
  }

/* Breadcrumb */
.issue-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-block-end: 1px solid var(--color-border-primary);
  background-color: var(--color-bg-primary);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.breadcrumb-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumb-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

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

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

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

.breadcrumb-team {
  color: var(--color-text-secondary);
}

.breadcrumb-current {
  color: var(--color-text-secondary);
}

/* Issue layout - two column */
.issue-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

  @media (width <= 900px) {
.issue-layout {
    flex-direction: column
}
  }

  @media (width <= 768px) {
.issue-layout {
    flex-direction: column;
    inline-size: 100%;
    max-inline-size: 100%;
    overflow-x: hidden;
    gap: var(--space-4)
}
  }

/* Main content area */
.issue-main-content {
  flex: 1;
  padding: var(--space-6) var(--space-8) var(--space-4);
  min-inline-size: 0;
}

  /* Remove bottom margin from last content card */
  .issue-main-content .content-card:last-child {
    margin-block-end: 0;
  }

  @media (width <= 768px) {
.issue-main-content {
    inline-size: 100%;
    max-inline-size: 100%;
    padding: 0
}
  }

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

  @media (width <= 768px) {
.issue-header-redesign {
    margin: 0;
    padding: 0;
}
  }

.issue-header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--space-4);
}

  @media (width <= 768px) {
.issue-header-top-row {
    padding: 0
}
  }

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

.issue-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  background-color: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-primary);
  color: var(--color-text-tertiary);
}

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

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

  .issue-priority-badge.priority-urgent,
  .issue-priority-badge.priority-high,
  .issue-priority-badge.priority-medium {
    background-color: var(--color-warning-alpha-10);
    color: var(--color-warning-500);
    border: 1px solid var(--color-warning-alpha-20);
  }

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

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

.issue-id-badge {
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-bg-tertiary);
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-tertiary);
}

  .issue-id-badge--large {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: var(--font-family-mono);
    color: var(--color-text-secondary);
  }

.issue-header-id-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.issue-estimate-badge {
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-bg-accent);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-default);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-accent-bright);
}

.view-in-linear-link {
  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;
  color: var(--color-text-tertiary);
  text-decoration: none;
  border-radius: var(--radius-default);
  transition: all 0.15s ease;
}

.view-in-linear-link:hover {
  color: var(--color-text-accent-bright);
  background-color: var(--color-bg-accent);
}

.view-in-linear-link svg {
  flex-shrink: 0;
}

/* Issue title */
.issue-title-redesign {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--color-text-primary);
  margin: 0;
  padding: 0;
}

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

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

/* Issue meta row */
.issue-meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

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

.meta-text {
  font-weight: 500;
  color: var(--color-text-secondary);
}

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

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

.meta-avatar {
  inline-size: 20px;
  block-size: 20px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.meta-avatar-placeholder {
  inline-size: 20px;
  block-size: 20px;
  border-radius: var(--radius-full);
  background-color: var(--color-bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-secondary);
}

/* Content cards */
/* stylelint-disable-next-line no-descending-specificity */
.content-card {
  --card-bg: var(--color-bg-secondary);
  --card-border: var(--color-border-primary);
  --card-header-bg: transparent;
  --card-shadow: var(--shadow-sm);

  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  margin-block-end: var(--space-6);
  overflow: hidden;
}

/* stylelint-disable-next-line no-descending-specificity */
html[data-theme="dark"] .content-card {
  --card-bg: rgba(22, 27, 34, 0.4);
  --card-border: var(--color-border-dark);
  --card-header-bg: rgba(30, 41, 59, 0.3);
  --card-shadow: none;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .content-card {
    --card-bg: rgba(22, 27, 34, 0.4);
    --card-border: var(--color-border-dark);
    --card-header-bg: rgba(30, 41, 59, 0.3);
    --card-shadow: none;
  }
}

.content-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-block-end: 1px solid var(--card-border);
  color: var(--color-text-secondary);
  background: var(--card-header-bg);
}

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

.comment-count {
  padding: var(--space-0-half) var(--space-2);
  background-color: var(--color-bg-tertiary);
  border-radius: var(--radius-default);
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-tertiary);
}

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

.content-card-footer {
  padding: var(--space-4) var(--space-6);
  border-block-start: 1px solid var(--card-border);
  background-color: transparent;
}

  .content-card-footer--no-border {
    border-block-start: none;
  }

/* Description */
.description-text {
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* Comments list */
.comments-list-redesign {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comment-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: var(--space-6);
}

  .comment-item:last-child {
    margin-block-end: 0;
  }

  @media (width <= 768px) {
.comment-item {
    gap: var(--space-2)
}
  }

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

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

.comment-avatar-img {
  inline-size: 24px;
  block-size: 24px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

  @media (width <= 768px) {
.comment-avatar-img {
    inline-size: 20px;
    block-size: 20px
}
  }

.comment-avatar-placeholder {
  inline-size: 24px;
  block-size: 24px;
  border-radius: var(--radius-full);
  background-color: var(--color-bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-secondary);
}

.comment-content {
  min-inline-size: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-inline-size: 0;
}

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

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

.comment-body-text {
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Comment Threading */
.comment-thread {
  margin-block-end: var(--space-6);

  &:last-child {
    margin-block-end: 0;
  }
}

/* Reduce thread margin inside the activity timeline (borders handle separation) */
.timeline-comment .comment-thread {
  margin-block-end: 0;
}

.comment-thread-replies {
  position: relative;
  margin-inline-start: var(--space-4);
  padding-inline-start: var(--space-4);
  margin-block-start: var(--space-2);
}

.comment-thread-line {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  inline-size: 2px; /* Sub-token value: no design token for hairline widths */
  background-color: var(--color-border-secondary);
  border-radius: 1px; /* Sub-token value: matches hairline width */
}

.comment-replies-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comment-item--reply {
  margin-block-end: var(--space-3);

  &:last-child {
    margin-block-end: 0;
  }

  & .comment-avatar-img {
    inline-size: 20px;
    block-size: 20px;
  }

  & .comment-avatar-placeholder {
    inline-size: 20px;
    block-size: 20px;
    font-size: var(--space-2-5);
  }
}

.comment-thread-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
  padding-inline-start: var(--space-1);
}

.comment-thread-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-half) var(--space-2);
  border: none;
  background: transparent;
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background-color 0.15s ease;

  &:hover {
    background-color: var(--color-bg-secondary);
  }
}

.comment-reply-btn {
  color: var(--color-text-tertiary);

  &:hover {
    color: var(--color-text-primary);
  }
}

.comment-reply-count {
  color: var(--color-text-accent-bright);
}


/* Resolved thread banner (shown when thread is collapsed) */
.resolved-thread-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-secondary);
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: height 0.2s ease, opacity 0.2s ease, background-color 0.15s ease;
}

.resolved-thread-banner:hover {
  background-color: var(--color-bg-tertiary);
}

.resolved-thread-banner-check {
  color: var(--color-green-600);
  flex-shrink: 0;
}

html[data-theme="dark"] .resolved-thread-banner-check {
  color: var(--color-green-400);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .resolved-thread-banner-check {
    color: var(--color-green-400);
  }
}

.resolved-thread-banner-text {
  font-weight: 500;
}

/* Thread content (animated on collapse/expand) */
.comment-thread-content {
  transition: height 0.2s ease, opacity 0.15s ease;
}

/* Collapse button for resolved threads (inline in comment header) */
.resolved-thread-collapse-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-half) var(--space-1);
  border: none;
  background: transparent;
  color: var(--color-green-600);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
}

.resolved-thread-collapse-btn:hover {
  background-color: var(--color-bg-secondary);
}

html[data-theme="dark"] .resolved-thread-collapse-btn {
  color: var(--color-green-400);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .resolved-thread-collapse-btn {
    color: var(--color-green-400);
  }
}

.resolved-thread-collapse-icon {
  color: var(--color-text-tertiary);
}

.comment-thread-replies-wrapper {
  position: relative;
}

/* Reply form */
.comment-reply-form {
  margin-block-start: var(--space-2);
  margin-inline-start: var(--space-4);
  padding-inline-start: var(--space-4);
}

.comment-reply-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

.tiptap-editor-wrapper--reply {
  font-size: var(--text-sm);
}

@media (width <= 768px) {
  .comment-thread-replies {
    margin-inline-start: var(--space-2);
    padding-inline-start: var(--space-3);
  }

  .comment-reply-form {
    margin-inline-start: var(--space-2);
    padding-inline-start: var(--space-3);
  }
}

/* Sidebar */
.issue-sidebar-redesign {
  --sidebar-bg: var(--color-bg-primary);

  inline-size: 320px;
  flex-shrink: 0;
  padding: var(--space-6);
  background-color: var(--sidebar-bg);
}

  @media (width <= 768px) {
.issue-sidebar-redesign {
    inline-size: 100%;
    max-inline-size: 100%;
    padding: 0
}
  }

/* Sidebar cards */
.sidebar-card {
  --_card-bg: var(--color-bg-secondary);

  background-color: var(--_card-bg);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-xl);
  margin-block-end: var(--space-6);
  overflow: hidden;
}

.sidebar-card--muted {
  background-color: transparent;
  border: none;
}

.sidebar-card-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--color-border-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 0;
}

  .sidebar-card-title svg {
    opacity: 0.7;
  }

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

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

/* Details list */
.details-list-redesign {
  padding: var(--space-4);
  margin: 0;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  font-size: var(--text-xs);
}

  .detail-row dt {
    color: var(--color-text-tertiary);
  }

  .detail-row dd {
    margin: 0;
    color: var(--color-text-primary);
    font-weight: 500;
  }

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

.detail-avatar {
  inline-size: 20px;
  block-size: 20px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

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

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

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

.detail-priority-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-default);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

  .detail-priority-badge svg {
    inline-size: 12px;
    block-size: 12px;
  }

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

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

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

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

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

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

.team-color-indicator {
  inline-size: 12px;
  block-size: 12px;
  border-radius: var(--radius-default);
}

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

/* Labels list */
.labels-list-redesign {
  padding: var(--space-4);
}

.label-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  margin: 0 var(--space-1) var(--space-1) 0;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  background-color: color-mix(in srgb, var(--label-color, #888) 10%, transparent);
  color: var(--label-color, var(--color-text-secondary));
  border: 1px solid color-mix(in srgb, var(--label-color, #888) 20%, transparent);
}

.label-dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--radius-full);
  background-color: var(--label-color, currentColor);
}

/* Comment form */
.comment-form-wrapper {
  margin-block-start: var(--space-4);
  max-inline-size: 100%;
  overflow: hidden;
}

.comment-textarea {
  --textarea-bg: var(--color-bg-tertiary);

  inline-size: 100%;
  max-inline-size: 100%;
  box-sizing: border-box;
  padding: var(--space-3);
  background-color: var(--textarea-bg);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  font-family: var(--font-family-display);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  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 1px var(--color-primary-500);
  }

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

html[data-theme="dark"] .comment-textarea {
  --textarea-bg: rgba(30, 41, 59, 0.5);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .comment-textarea {
    --textarea-bg: rgba(30, 41, 59, 0.5);
  }
}

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

/* MC-214: Issue resolve buttons */
.issue-resolve-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.btn-resolve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

  .btn-resolve svg {
    flex-shrink: 0;
  }

.btn-resolve--done {
  background-color: var(--color-status-success-bg);
  border: 1px solid var(--color-success-200);
  color: var(--color-success-700);
}

.btn-resolve--done:hover {
  --_resolve-hover-bg: var(--color-success-100);
  --_resolve-hover-border: var(--color-success-300);

  background-color: var(--_resolve-hover-bg);
  border-color: var(--_resolve-hover-border);
}

    .btn-resolve--done:focus-visible {
      outline: 2px solid var(--color-success-500);
      outline-offset: 2px;
    }

.btn-resolve--cancel {
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-neutral-200);
  color: var(--color-text-secondary);
}

.btn-resolve--cancel:hover {
  background-color: var(--color-bg-tertiary);
  border-color: var(--color-border-secondary);
  color: var(--color-text-strong);
}

    .btn-resolve--cancel:focus-visible {
      outline: 2px solid var(--color-neutral-400);
      outline-offset: 2px;
    }

/* Resolve modal */
.resolve-modal {
  max-inline-size: 520px;
}

  .resolve-modal .modal-body {
    padding: var(--space-4) var(--space-5);
  }

  .resolve-modal .tiptap-editor-wrapper--editable {
    min-block-size: 100px;
  }

/* ========================================
 * DARK MODE OVERRIDES
 * Only component-specific overrides that cannot use semantic tokens.
 * Semantic token switching (bg, text, border) is handled in design-tokens.css.
 * ======================================== */

/* Issue detail page: sidebar and sidebar cards */
html[data-theme="dark"] .issue-sidebar-redesign {
  --sidebar-bg: rgba(13, 17, 23, 0.3);
}

html[data-theme="dark"] .sidebar-card {
  --_card-bg: rgba(22, 27, 34, 0.4);
}

/* MC-214: Dark mode resolve buttons */
html[data-theme="dark"] .btn-resolve--done:hover {
  --_resolve-hover-bg: var(--color-success-900);
  --_resolve-hover-border: var(--color-success-700);
}

/* View As Banner - scoped variable overrides */
html[data-theme="dark"] .view-as-banner {
  --banner-bg: linear-gradient(135deg, var(--color-blue-alpha-15) 0%, var(--color-blue-50) 100%);
  --banner-border: var(--color-blue-alpha-30);
  --banner-accent: var(--color-text-link);
  --banner-accent-hover: var(--color-primary-200);
  --banner-strong: var(--color-primary-200);
}

/* Active Filters Summary - scoped variable overrides */
html[data-theme="dark"] .active-filters-summary {
  --filters-bg: var(--color-blue-50);
  --filters-border: var(--color-blue-alpha-30);
  --filters-accent: var(--color-primary-200);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .issue-sidebar-redesign {
    --sidebar-bg: rgba(13, 17, 23, 0.3);
  }

  html:not([data-theme]) .sidebar-card {
    --_card-bg: rgba(22, 27, 34, 0.4);
  }

  html:not([data-theme]) .btn-resolve--done:hover {
    --_resolve-hover-bg: var(--color-success-900);
    --_resolve-hover-border: var(--color-success-700);
  }

  html:not([data-theme]) .view-as-banner {
    --banner-bg: linear-gradient(135deg, var(--color-blue-alpha-15) 0%, var(--color-blue-50) 100%);
    --banner-border: var(--color-blue-alpha-30);
    --banner-accent: var(--color-text-link);
    --banner-accent-hover: var(--color-primary-200);
    --banner-strong: var(--color-primary-200);
  }

  html:not([data-theme]) .active-filters-summary {
    --filters-bg: var(--color-blue-50);
    --filters-border: var(--color-blue-alpha-30);
    --filters-accent: var(--color-primary-200);
  }
}

/* Flat mode issues container */
.issues-page--flat .issues-container,
.issues-page--flat .issues-container--grouped {
  background-color: transparent;
  padding: 0;
  margin: 0;
}

/* Flat mode period header */
/* stylelint-disable-next-line no-descending-specificity */
.issues-page--flat .issues-period-header {
  padding: var(--space-3) var(--space-4);
}

/* Attachment upload dark mode */
html[data-theme="dark"] .attachment-upload-footer,
html[data-theme="dark"] .attachment-preview-container:not(:empty) {
  background-color: rgba(30, 41, 59, 0.5);
  border-color: var(--color-border-dark);
}

html[data-theme="dark"] .attachment-item {
  --_att-bg: rgba(30, 41, 59, 0.5);
  --_att-border: var(--color-border-dark);
  --_att-bg-hover: rgba(30, 41, 59, 0.8);
}

/* MC-214: Dark mode resolve buttons */
/* stylelint-disable-next-line no-descending-specificity */
html[data-theme="dark"] .btn-resolve--done {
  background-color: var(--color-status-success-bg);
  border-color: var(--color-status-success-border);
  color: var(--color-success-400);
}

html[data-theme="dark"] .btn-resolve--cancel {
  background-color: var(--color-slate-800);
  border-color: var(--color-slate-700);
  color: var(--color-slate-400);
}

  html[data-theme="dark"] .btn-resolve--cancel:hover {
    background-color: var(--color-slate-700);
    border-color: var(--color-slate-600);
    color: var(--color-slate-300);
  }

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .attachment-upload-footer,
  html:not([data-theme]) .attachment-preview-container:not(:empty) {
    background-color: rgba(30, 41, 59, 0.5);
    border-color: var(--color-border-dark);
  }

  html:not([data-theme]) .attachment-item {
    --_att-bg: rgba(30, 41, 59, 0.5);
    --_att-border: var(--color-border-dark);
    --_att-bg-hover: rgba(30, 41, 59, 0.8);
  }

  html:not([data-theme]) .btn-resolve--done {
    background-color: var(--color-status-success-bg);
    border-color: var(--color-status-success-border);
    color: var(--color-success-400);
  }

  html:not([data-theme]) .btn-resolve--cancel {
    background-color: var(--color-slate-800);
    border-color: var(--color-slate-700);
    color: var(--color-slate-400);
  }

    html:not([data-theme]) .btn-resolve--cancel:hover {
      background-color: var(--color-slate-700);
      border-color: var(--color-slate-600);
      color: var(--color-slate-300);
    }
}

} /* @layer components */