/* ============================================================
   LINEAR VIEWER — App Styles
   Extends Sora Design System tokens + components
   ============================================================ */

/* -- Semantic opacity variants derived from --color-primary -- */
:root {
  --color-border-strong:    color-mix(in srgb, var(--color-primary) 8%, transparent);
  --color-border-subtle:    color-mix(in srgb, var(--color-primary) 4%, transparent);
  --color-border-medium:    color-mix(in srgb, var(--color-primary) 6%, transparent);
  --color-bg-hover:         color-mix(in srgb, var(--color-primary) 2%, transparent);
  --color-bg-muted:         color-mix(in srgb, var(--color-primary) 6%, transparent);
  --color-bg-timeline:      color-mix(in srgb, var(--color-primary) 10%, transparent);
  --color-text-secondary:   color-mix(in srgb, var(--color-primary) 40%, transparent);
  --color-text-tertiary:    color-mix(in srgb, var(--color-primary) 30%, transparent);
  --color-text-muted:       color-mix(in srgb, var(--color-primary) 60%, transparent);
  --color-text-subtle:      color-mix(in srgb, var(--color-primary) 50%, transparent);
}

body {
  background: var(--color-bg-light);
  font-family: var(--font-body);
  color: var(--color-primary);
  margin: 0;
}

.error-page { text-align: center; padding: 120px 24px; }

/* -- Custom tag for completed state (not in DS) -- */
.tag-green {
  background: var(--color-green);
  color: var(--color-white);
}

/* -- Nav bar -- */
.nav-bar {
  background: var(--color-surface-dark);
  padding: 0 24px;
  height: 48px;
  display: flex;
  align-items: center;
}

.nav-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* -- Main content -- */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

/* -- Filter bar -- */
.filter-bar {
  margin-bottom: 0;
}

.filter-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* -- Issue table -- */
.table-wrapper {
  overflow-x: auto;
}

.issue-table {
  width: 100%;
  border-collapse: collapse;
}

.issue-table th {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-strong);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.issue-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}

.issue-row {
  cursor: pointer;
  transition: background 0.1s ease;
}

.issue-row:hover {
  background: var(--color-bg-hover);
}

.issue-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--fw-medium);
}

.issue-link:hover {
  text-decoration: underline;
}

.col-id {
  width: 100px;
  white-space: nowrap;
}

.col-status {
  width: 120px;
}

.col-project,
.col-creator {
  width: 140px;
}

.col-link {
  width: 60px;
  text-align: right;
}

/* -- Pagination -- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

/* -- Empty state -- */
.empty-state {
  padding: 48px 24px;
  text-align: center;
}

/* -- Detail page -- */
.detail-header {
  margin-bottom: 16px;
}

.detail-top {
  margin-bottom: 20px;
}

.detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.detail-section {
  margin-bottom: 16px;
}

/* -- Timeline -- */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 20px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-bg-timeline);
}

.timeline-item {
  position: relative;
  padding: 8px 0;
}

.timeline-dot {
  position: absolute;
  left: -20px;
  top: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-blue);
  border: 2px solid var(--color-white);
}

.timeline-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.timeline-badges {
  display: flex;
  align-items: center;
  gap: 6px;
}

.timeline-arrow {
  color: var(--color-text-tertiary);
  font-size: 14px;
}

/* -- Comments -- */
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-medium);
}

.comment:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* -- Markdown body -- */
.markdown-body {
  line-height: 1.6;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
  font-family: var(--font-display);
  margin: 16px 0 8px 0;
}

.markdown-body h1 { font-size: var(--text-headline-1); }
.markdown-body h2 { font-size: var(--text-body-1); }
.markdown-body h3 { font-size: var(--text-body-2); }

.markdown-body p {
  margin: 0 0 12px 0;
}

.markdown-body code {
  font-family: var(--font-mono);
  font-size: var(--text-caption-2);
  background: var(--color-bg-muted);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: none;
}

.markdown-body pre {
  background: var(--color-surface-dark);
  color: var(--color-white);
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 12px 0;
}

.markdown-body pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.markdown-body ul,
.markdown-body ol {
  padding-left: 24px;
  margin: 0 0 12px 0;
}

.markdown-body li {
  margin-bottom: 4px;
}

.markdown-body blockquote {
  border-left: 3px solid var(--color-blue);
  padding-left: 12px;
  margin: 12px 0;
  color: var(--color-text-muted);
}

.markdown-body img {
  max-width: 100%;
  border-radius: 8px;
}

.markdown-body a {
  color: var(--color-blue);
}

/* -- Responsive -- */
@media (max-width: 768px) {
  .main-content {
    padding: 16px;
  }

  .filter-row {
    flex-direction: column;
  }

  .filter-row .input,
  .filter-row select {
    max-width: 100% !important;
  }

  .col-project,
  .col-creator,
  .col-link {
    display: none;
  }

  .issue-table th,
  .issue-table td {
    padding: 8px 12px;
  }

  .detail-meta {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .col-status {
    display: none;
  }
}

/* -- Select styling to match .input -- */
select.input {
  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'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%230E0E0E' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}