/* ── Dark Mode for Kanban System ────────────────────────────────
 * Overrides all inline light-theme CSS in every template.
 * Injected by Flask's after_request handler — no template edits.
 * Based on GitHub-dark palette: #0d1117 bg, #161b22 surface, #30363d border,
 * #c9d1d9 text, #58a6ff link.
 * ─────────────────────────────────────────────────────────────── */

/* ── Base ────────────────────────────────────────────────────── */
:root {
  --dark-bg: #0d1117;
  --dark-surface: #161b22;
  --dark-surface-2: #1c2333;
  --dark-border: #30363d;
  --dark-border-light: #21262d;
  --dark-text: #c9d1d9;
  --dark-text-muted: #8b949e;
  --dark-text-dim: #6e7681;
  --dark-link: #58a6ff;
  --dark-link-hover: #79c0ff;
  --dark-success: #238636;
  --dark-warning: #bb8009;
  --dark-danger: #da3633;
  --dark-info: #1f6feb;
}

body {
  background: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

/* ── Navbar ──────────────────────────────────────────────────── */
.navbar.is-white,
.navbar {
  background: var(--dark-surface) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}
.navbar-item,
.navbar-link {
  color: var(--dark-text) !important;
}
.navbar-item:hover,
.navbar-link:hover {
  background: var(--dark-surface-2) !important;
}
.navbar-item.is-active {
  color: var(--dark-link) !important;
}
.navbar-burger span {
  background: var(--dark-text) !important;
}
.navbar-menu {
  background: var(--dark-surface) !important;
}
@media (max-width: 1023px) {
  .navbar-menu {
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
  }
}

/* ── Bulma overrides ─────────────────────────────────────────── */
.box {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border: 1px solid var(--dark-border) !important;
}
.card {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
}
.content {
  color: var(--dark-text) !important;
}
.title,
.subtitle {
  color: var(--dark-text) !important;
}
.title.is-3,
.title.is-4,
.title.is-5,
.title.is-6 {
  color: var(--dark-text) !important;
}
.subtitle {
  color: var(--dark-text-muted) !important;
}
.has-text-grey,
.has-text-grey-dark,
.has-text-grey-light {
  color: var(--dark-text-muted) !important;
}
.has-text-grey-lighter {
  color: var(--dark-text-dim) !important;
}
.has-text-dark {
  color: var(--dark-text) !important;
}
.has-text-link {
  color: var(--dark-link) !important;
}
hr {
  background: var(--dark-border) !important;
}
a {
  color: var(--dark-link) !important;
}
a:hover {
  color: var(--dark-link-hover) !important;
}

/* Tags */
.tag.is-light {
  background: var(--dark-surface-2) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
.tag.is-success.is-light {
  background: rgba(35,134,54,0.15) !important;
  color: #3fb950 !important;
}
.tag.is-warning.is-light {
  background: rgba(187,128,9,0.15) !important;
  color: #d29922 !important;
}
.tag.is-danger.is-light {
  background: rgba(218,54,51,0.15) !important;
  color: #f85149 !important;
}
.tag.is-link.is-light {
  background: rgba(31,111,235,0.15) !important;
  color: var(--dark-link) !important;
}
.tag.is-info.is-light {
  background: rgba(31,111,235,0.15) !important;
  color: var(--dark-link) !important;
}

/* Select / Input */
.select select,
.input {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
.select select:focus,
.input:focus {
  border-color: var(--dark-link) !important;
  box-shadow: 0 0 0 2px rgba(88,166,255,0.2) !important;
}
.select::after {
  border-color: var(--dark-text-muted) !important;
}
.select select option {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
}

/* Button */
.button.is-small.is-link {
  background: var(--dark-info) !important;
  color: #fff !important;
  border-color: var(--dark-info) !important;
}
.button.is-small.is-success.is-light {
  background: rgba(35,134,54,0.15) !important;
  color: #3fb950 !important;
  border-color: var(--dark-border) !important;
}
.button.is-small.is-danger.is-light {
  background: rgba(218,54,51,0.15) !important;
  color: #f85149 !important;
  border-color: var(--dark-border) !important;
}

/* Table */
.table {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
}
.table th {
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
.table td {
  border-color: var(--dark-border) !important;
}
.table.is-striped tbody tr:nth-child(even) {
  background: var(--dark-surface-2) !important;
}
.table.is-hoverable tbody tr:hover {
  background: rgba(88,166,255,0.05) !important;
}
.table thead {
  background: var(--dark-surface-2) !important;
}
.table thead th {
  border-bottom: 2px solid var(--dark-border) !important;
}

/* Notification */
.notification.is-light {
  background: var(--dark-surface-2) !important;
  color: var(--dark-text) !important;
}

/* Message */
.message.is-info .message-header {
  background: var(--dark-info) !important;
  color: #fff !important;
}
.message.is-info .message-body {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
.message.is-warning .message-header {
  background: var(--dark-warning) !important;
  color: #fff !important;
}
.message.is-warning .message-body {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
.message-header p {
  color: #fff !important;
}

/* ── Kanban board ────────────────────────────────────────────── */
.kanban-column {
  background: var(--dark-surface-2) !important;
}
.kanban-card {
  background: var(--dark-surface) !important;
  border: 1px solid var(--dark-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}
.kanban-card:hover {
  box-shadow: 0 3px 8px rgba(0,0,0,0.4) !important;
}
.kanban-card a.has-text-dark {
  color: var(--dark-text) !important;
}
.kanban-card a.has-text-dark:hover {
  color: var(--dark-link) !important;
}

/* Action chips */
.action-btn {
  background: transparent !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
.action-btn-forward {
  color: #3fb950 !important;
  border-color: #238636 !important;
  background: rgba(35,134,54,0.1) !important;
}
.action-btn-forward:hover {
  background: rgba(35,134,54,0.2) !important;
}
.action-btn-back {
  color: var(--dark-text-muted) !important;
  border-color: var(--dark-border) !important;
}
.action-btn-back:hover {
  background: var(--dark-surface-2) !important;
}
.action-btn-archive {
  color: #f85149 !important;
  border-color: #da3633 !important;
  background: rgba(218,54,51,0.1) !important;
}
.action-btn-archive:hover {
  background: rgba(218,54,51,0.2) !important;
}

/* Done toggle */
.done-toggle {
  color: var(--dark-text-muted) !important;
  background: var(--dark-surface-2) !important;
  border: 1px solid var(--dark-border) !important;
}
.done-toggle:hover {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
}

/* ── Task detail ──────────────────────────────────────────────── */
code {
  background: var(--dark-surface-2) !important;
  color: #f85149 !important;
}
.content code {
  background: var(--dark-surface-2) !important;
  color: #f85149 !important;
}
pre {
  background: #0d1117 !important;
  color: #e2e8f0 !important;
  border: 1px solid var(--dark-border) !important;
}
pre code {
  background: transparent !important;
  color: inherit !important;
}
blockquote {
  border-left: 3px solid var(--dark-link) !important;
  background: var(--dark-surface-2) !important;
  color: var(--dark-text-muted) !important;
  padding: 0.75rem 1.25rem !important;
}

/* ── Stats / Metrics ──────────────────────────────────────────── */
.stat-card {
  background: var(--dark-surface) !important;
  border: 1px solid var(--dark-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}
.stat-value {
  color: var(--dark-link) !important;
}
.stat-label {
  color: var(--dark-text-muted) !important;
}

/* ── KB sidebar ──────────────────────────────────────────────── */
.kb-sidebar {
  background: var(--dark-surface) !important;
  border-right: 1px solid var(--dark-border) !important;
}
.kb-sidebar .menu-label {
  color: var(--dark-text-dim) !important;
}
.kb-sidebar .menu-list a {
  color: var(--dark-text-muted) !important;
  border-left: 3px solid transparent !important;
}
.kb-sidebar .menu-list a:hover {
  background: var(--dark-surface-2) !important;
  color: var(--dark-text) !important;
  border-left-color: var(--dark-border) !important;
}
.kb-sidebar .menu-list a.is-active {
  background: rgba(88,166,255,0.1) !important;
  color: var(--dark-link) !important;
  border-left-color: var(--dark-link) !important;
}
.kb-sidebar .menu-list li ul a {
  color: var(--dark-text-dim) !important;
}
.kb-sidebar .menu-list li ul a:hover {
  color: var(--dark-text) !important;
}
.kb-sidebar .menu-list li ul a.is-active {
  color: var(--dark-link) !important;
}
.folder-badge {
  background: var(--dark-surface-2) !important;
  color: var(--dark-text-muted) !important;
}
.menu-list a.is-active .folder-badge {
  background: rgba(88,166,255,0.15) !important;
  color: var(--dark-link) !important;
}

/* ── KB article prose ─────────────────────────────────────────── */
.article-prose {
  color: var(--dark-text) !important;
}
.article-prose h1,
.article-prose h2,
.article-prose h3,
.article-prose h4,
.article-prose h5,
.article-prose h6 {
  color: var(--dark-text) !important;
}
.article-prose h2 {
  border-bottom: 1px solid var(--dark-border) !important;
}
.article-prose a {
  color: var(--dark-link) !important;
}
.article-prose a:hover {
  color: var(--dark-link-hover) !important;
}
.article-prose code {
  background: var(--dark-surface-2) !important;
  color: #f85149 !important;
}
.article-prose pre {
  background: #0d1117 !important;
  border: 1px solid var(--dark-border) !important;
}
.article-prose blockquote {
  background: var(--dark-surface-2) !important;
  color: var(--dark-text-muted) !important;
}
.article-prose th,
.article-prose td {
  border: 1px solid var(--dark-border) !important;
}
.article-prose th {
  background: var(--dark-surface-2) !important;
  color: var(--dark-text) !important;
}
.article-prose .broken-link {
  color: var(--dark-text-dim) !important;
}

/* ── KB change indicators / diff ──────────────────────────────── */
.kb-changes {
  border: 1px solid var(--dark-border) !important;
  background: var(--dark-surface) !important;
}
.kb-changes > summary {
  color: var(--dark-text-muted) !important;
  background: var(--dark-surface-2) !important;
}
.kb-changes > summary:hover {
  background: var(--dark-surface) !important;
}
.kb-changes .chevron {
  color: var(--dark-text-dim) !important;
}
.kb-diff-count .add {
  color: #3fb950 !important;
}
.kb-diff-count .del {
  color: #f85149 !important;
}
.kb-diff {
  background: var(--dark-surface) !important;
  border-top: 1px solid var(--dark-border) !important;
}
.kb-diff .row.add {
  background: rgba(35,134,54,0.12) !important;
  color: #7ee787 !important;
  border-left: 3px solid #238636 !important;
}
.kb-diff .row.del {
  background: rgba(218,54,51,0.12) !important;
  color: #ffa198 !important;
  border-left: 3px solid #da3633 !important;
}
.kb-diff .row.hunk {
  color: var(--dark-text-dim) !important;
  background: var(--dark-surface-2) !important;
}

/* Recent change badges */
.kb-badge--new {
  background: rgba(35,134,54,0.2) !important;
  color: #3fb950 !important;
}
.kb-badge--updated {
  background: rgba(31,111,235,0.2) !important;
  color: var(--dark-link) !important;
}
.kb-sec-new {
  background: rgba(35,134,54,0.2) !important;
  color: #3fb950 !important;
}
.kb-sec-edited {
  background: rgba(31,111,235,0.2) !important;
  color: var(--dark-link) !important;
}
.article-prose.is-recently-updated {
  background: var(--dark-surface) !important;
  border-left: 3px solid var(--dark-info) !important;
}
.kb-change-legend {
  color: var(--dark-text-muted) !important;
}

/* ── Triage ──────────────────────────────────────────────────── */
.prose {
  color: var(--dark-text) !important;
}
.prose code {
  background: var(--dark-surface-2) !important;
  color: #f85149 !important;
}
.prose pre {
  background: #0d1117 !important;
  border: 1px solid var(--dark-border) !important;
}
.prose blockquote {
  background: var(--dark-surface-2) !important;
  color: var(--dark-text-muted) !important;
}
.prose th,
.prose td {
  border: 1px solid var(--dark-border) !important;
}
.prose th {
  background: var(--dark-surface-2) !important;
}

/* ── Folder cards ─────────────────────────────────────────────── */
.folder-card {
  transition: transform 0.15s, box-shadow 0.15s;
}
.folder-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}
.recent-row {
  border-left: 3px solid transparent !important;
}
.recent-row:hover {
  border-left-color: var(--dark-link) !important;
  background: var(--dark-surface-2) !important;
}
.article-row {
  border-left: 3px solid transparent !important;
}
.article-row:hover {
  border-left-color: var(--dark-link) !important;
}

/* ── Mobile Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
  /* Kanban board: single column on mobile */
  .board-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .kanban-column {
    min-height: auto !important;
    padding: 0.5rem !important;
  }

  .kanban-card {
    padding: 0.6rem !important;
    margin-bottom: 0.4rem !important;
  }

  .kanban-card p.is-size-7 {
    font-size: 0.75rem !important;
  }

  /* All-projects: project cards full-width */
  .columns.is-multiline .column {
    padding: 0.25rem !important;
  }

  .box.folder-card {
    padding: 0.75rem !important;
  }

  /* Navbar: stack properly */
  .navbar-item {
    font-size: 0.85rem !important;
  }

  .navbar-item .tag {
    font-size: 0.65rem !important;
  }

  /* Search bar: full width on mobile */
  .navbar-item .field.has-addons {
    width: 100% !important;
  }

  .navbar-item .input.is-small {
    width: 100% !important;
    min-width: 120px !important;
  }

  /* KB sidebar: slide overlay */
  .kb-sidebar {
    width: 260px !important;
    min-width: 260px !important;
  }

  .kb-content {
    padding: 1rem !important;
  }

  .kb-content--wide {
    padding: 1rem !important;
  }

  /* Breadcrumb wrap */
  .breadcrumb {
    flex-wrap: wrap !important;
    white-space: normal !important;
  }

  .breadcrumb li {
    font-size: 0.7rem !important;
  }

  /* Article prose */
  .article-prose {
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
  }

  .article-prose pre {
    padding: 0.75rem !important;
    font-size: 0.75rem !important;
  }

  .article-prose table {
    font-size: 0.75rem !important;
  }

  .article-prose th,
  .article-prose td {
    padding: 0.3rem 0.4rem !important;
  }

  /* Triage partial */
  .message-body .columns.is-multiline .column {
    width: 100% !important;
  }

  .message-body .select.is-small {
    width: 100% !important;
  }

  .message-body .select.is-small select {
    width: 100% !important;
  }

  /* Task detail */
  .columns.mb-4 {
    flex-direction: column !important;
  }

  .columns.mb-4 .column {
    padding: 0.15rem 0 !important;
  }

  .container {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  section.section {
    padding: 0.75rem !important;
  }

  /* Stats/metrics cards */
  .stat-card {
    padding: 1rem !important;
  }

  .stat-value {
    font-size: 1.6rem !important;
  }

  /* Action buttons spacing */
  .action-btn {
    font-size: 0.65rem !important;
    padding: 0.15rem 0.4rem !important;
  }

  /* Tag wrapping */
  .tag {
    font-size: 0.65rem !important;
    height: auto !important;
    padding: 0.15rem 0.4rem !important;
  }
}

@media (max-width: 480px) {
  .kanban-card p {
    font-size: 0.7rem !important;
  }

  .kb-content {
    padding: 0.75rem 0.5rem !important;
  }

  .navbar .navbar-brand .navbar-item {
    font-size: 0.8rem !important;
    padding: 0.5rem !important;
  }
}