/* ============================================================
   DARK-THEME.CSS — Theme-agnostic overrides + animations only
   All color decisions live in base.css under [data-theme=...].
   ============================================================ */

/* ── Markdown-rendered AI output (shared across themes) ── */
.md-output h1 { font-family: var(--font-display); font-size: var(--text-xl); color: var(--brass-bright); margin: var(--space-4) 0 var(--space-2); border-bottom: 1px solid var(--border-color); padding-bottom: var(--space-2); }
.md-output h2 { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-primary); margin: var(--space-4) 0 var(--space-2); }
.md-output h3 { font-size: var(--text-md); font-weight: 600; color: var(--text-secondary); margin: var(--space-3) 0 var(--space-1); }
.md-output p  { margin-bottom: var(--space-3); line-height: 1.65; }
.md-output ul, .md-output ol { padding-left: var(--space-5); margin-bottom: var(--space-3); }
.md-output li { margin-bottom: var(--space-1); line-height: 1.6; }
.md-output strong { color: var(--text-primary); font-weight: 700; }
.md-output code {
  background: var(--bg-highlight);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--brass-bright);
}
.md-output pre {
  background: var(--bg-highlight);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: var(--space-4);
  overflow-x: auto;
  margin: var(--space-3) 0;
}
.md-output pre code { background: none; padding: 0; color: var(--text-primary); }
.md-output table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
  font-size: var(--text-sm);
}
.md-output th {
  background: var(--bg-elevated);
  color: var(--text-muted);
  padding: 8px 12px;
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  border-bottom: 1px solid var(--border-color);
}
.md-output td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
.md-output tr:nth-child(even) td { background: var(--bg-elevated); }
.md-output blockquote {
  border-left: 2px solid var(--brass);
  padding-left: var(--space-4);
  color: var(--text-secondary);
  margin: var(--space-3) 0;
  font-style: italic;
}
.md-output hr { border: none; border-top: 1px solid var(--border-color); margin: var(--space-4) 0; }

/* ── Form scheme ── */
select option {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* ── Focus rings ── */
*:focus-visible {
  outline: 2px solid var(--border-accent);
  outline-offset: 2px;
}

/* ── AI processing shimmer ── */
.ai-processing {
  position: relative;
  overflow: hidden;
}

.ai-processing::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; right: 0; bottom: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--brass-wash) 50%,
    transparent 100%
  );
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  from { transform: translateX(0); }
  to   { transform: translateX(200%); }
}

/* ── Gradient text — midnight → cobalt sweep ── */
.gradient-text {
  background: linear-gradient(135deg, var(--cobalt-bright) 0%, var(--cobalt) 45%, var(--midnight) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Status indicators (data-driven colors) ── */
.status-active  { color: var(--success); }
.status-pending { color: var(--warning); }
.status-closed  { color: var(--text-muted); }
.status-dead    { color: var(--danger); }

/* ── Priority flags ── */
.priority-high   { color: var(--danger); font-weight: 700; }
.priority-medium { color: var(--warning); }
.priority-low    { color: var(--text-muted); }

/* ── Drag handle ── */
.drag-handle {
  cursor: grab;
  color: var(--text-muted);
  padding: 0 var(--space-2);
  font-size: 14px;
}
.drag-handle:active { cursor: grabbing; }

/* ── Date input color scheme follows theme ── */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="number"] {
  color-scheme: dark;
}
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="datetime-local"],
[data-theme="light"] input[type="number"] {
  color-scheme: light;
}

/* ── Resize handle ── */
.resizable {
  resize: horizontal;
  overflow: auto;
  min-width: 200px;
}

/* ── Sticky section header ── */
.sticky-header {
  position: sticky;
  top: 0;
  background: var(--bg-base);
  z-index: 10;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-3);
}

/* ── Active nav (glow retired — iOS uses fill, not glow) ── */
.nav-item.active .nav-icon {
  filter: none;
}

/* ── Grid pattern helper (theme-aware via --grid-line) ── */
.grid-pattern {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
}