/* DSA Console — small custom layer on top of Bootstrap 5 + Ynex theme */

/* Markdown-rendered doc body */
.prose-doc h1 { font-size: 1.875rem; font-weight: 600; margin: 1.25rem 0 0.75rem; }
.prose-doc h2 { font-size: 1.5rem;   font-weight: 600; margin: 1.25rem 0 0.5rem;  border-bottom: 1px solid var(--bs-border-color); padding-bottom: 0.25rem; }
.prose-doc h3 { font-size: 1.25rem;  font-weight: 600; margin: 1rem 0 0.5rem; }
.prose-doc p  { margin: 0.6rem 0; line-height: 1.7; }
.prose-doc ul { list-style: disc;    padding-left: 1.5rem; margin: 0.6rem 0; }
.prose-doc ol { list-style: decimal; padding-left: 1.5rem; margin: 0.6rem 0; }
.prose-doc li { margin: 0.25rem 0; }
.prose-doc a  { color: var(--bs-link-color); text-decoration: underline; }
.prose-doc code {
  background: rgba(135, 131, 120, 0.15);
  color: var(--cu-ink, #1f2533);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 0.875em;
  border: 0;
}
.prose-doc pre  { background: #0f172a !important; color: #f8fafc !important; padding: 0.9rem; border-radius: 8px; overflow-x: auto; margin: 0.75rem 0; }
/* Defeat the Ynex vendor `code{…!important}` rule so code inside <pre> is
   transparent (shows the dark <pre> background) with readable light text. */
.prose-doc pre code {
  background: transparent !important;
  background-color: transparent !important;
  color: #f8fafc !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  white-space: pre !important;
  font-size: 0.85em;
}
.prose-doc blockquote { border-left: 4px solid var(--bs-border-color); padding-left: 0.85rem; color: var(--bs-secondary-color); margin: 0.6rem 0; }
.prose-doc table { border-collapse: collapse; width: 100%; margin: 0.6rem 0; }
.prose-doc th, .prose-doc td { border: 1px solid var(--bs-border-color); padding: 0.4rem 0.6rem; text-align: left; }
.prose-doc th { background: rgba(0,0,0,0.03); }
.prose-doc img { max-width: 100%; height: auto; }
.prose-doc hr  { border: 0; border-top: 1px solid var(--bs-border-color); margin: 1.25rem 0; }

/* Login screen — standalone, no sidebar */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(132,90,223,0.05), rgba(35,183,229,0.05));
}
.auth-card { width: 100%; max-width: 400px; }

/* Kanban */
/* `width: 100% !important` overrides Ynex's hard-coded `.kanban-board { width: 370px }` */
/* The board is capped to the viewport height and scrolls horizontally; each
   column scrolls its own cards vertically. This keeps the horizontal scrollbar
   pinned at the bottom of the visible board (not far below a very tall board). */
.kanban-board { display: flex; gap: 1rem; overflow-x: auto; overflow-y: hidden; padding-bottom: 0.5rem; width: 100% !important; }
.kanban-column {
  flex: 0 0 300px; /* mobile: fixed-width columns scroll horizontally */
  background: var(--bs-tertiary-bg, #f8f9fa);
  border-radius: 0.5rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 320px); /* fill down to ~viewport bottom (board starts ~300px down) */
  min-height: 260px;               /* still a decent drop target when short */
}
/* Tablet+ (≥768px): columns grow to fill the width when there are only a few,
   but never shrink below a usable minimum — so once there are enough status
   columns to overflow, the board scrolls horizontally instead of squeezing. */
@media (min-width: 768px) {
  .kanban-board { overflow-x: auto; }
  .kanban-column { flex: 1 0 300px; min-width: 300px; }
}
.kanban-column-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--bs-border-color);
}
/* The drop zone Dragula tracks. flex:1 makes it fill the column below the header,
   so dragging anywhere in the visual column area lands inside the drop target. */
.kanban-cards {
  min-height: 50px;
  flex: 1 1 auto;
  overflow-y: auto; /* cards scroll within the column, so the board height stays bounded */
}
/* Subtle dashed outline when a column is the active drop target while dragging. */
.kanban-cards.gu-over,
.kanban-cards:has(.gu-mirror) {
  outline: 2px dashed rgba(13, 110, 253, 0.5);
  outline-offset: -4px;
  border-radius: 0.375rem;
}
.kanban-card {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  cursor: grab;
  transition: box-shadow 0.15s ease;
}
.kanban-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.kanban-card.is-dragging { cursor: grabbing; }
.kanban-card-clickable { cursor: pointer; }
.kanban-card-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.25rem; }
.kanban-card-meta { font-size: 0.8rem; color: var(--bs-secondary-color); display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* Status colors used across kanban + badges */
.status-not-started { color: #64748b; background-color: rgba(100,116,139,0.15); }
.status-in-progress { color: #b45309; background-color: rgba(245,158,11,0.18); }
.status-blocked     { color: #b91c1c; background-color: rgba(239,68,68,0.18); }
.status-done        { color: #047857; background-color: rgba(16,185,129,0.18); }

/* Tighten admin table look */
.table-app th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-secondary-color); }
.table-app td { vertical-align: middle; }

/* Pagination spacing */
.pagination-wrapper { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; flex-wrap: wrap; gap: 0.5rem; }

/* Tiny avatar default */
.avatar { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }

/* Spreadsheet-style table for /records/:slug */
.table-spreadsheet {
  font-size: 0.875rem;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 0;
}
.table-spreadsheet thead th {
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--bs-border-color);
  border-right: none;
  padding: 0.45rem 0.6rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
  color: var(--bs-body-color);
  position: sticky; top: 0; z-index: 1;
}
.table-spreadsheet thead th:last-child { border-right: 1px solid var(--bs-border-color); }
.table-spreadsheet tbody td {
  border: 1px solid var(--bs-border-color);
  border-top: none;
  border-right: none;
  padding: 0.4rem 0.6rem;
  vertical-align: middle;
  background: var(--bs-body-bg);
  transition: background-color 120ms;
}
.table-spreadsheet tbody td:last-child { border-right: 1px solid var(--bs-border-color); }
.table-spreadsheet tbody tr:hover td { background: rgba(13, 110, 253, 0.04); }

.table-spreadsheet td.cell-editable { cursor: cell; }
.table-spreadsheet td.cell-editable:hover { outline: 1px solid rgba(13, 110, 253, 0.35); outline-offset: -1px; }
.table-spreadsheet td.is-editing {
  /* Keep the SAME padding as a normal cell — do NOT zero it — so the text
     doesn't jump vertically or horizontally when the editor takes over.
     Width is locked inline (JS); border-box keeps the editor inside it so the
     column never reflows on click. */
  outline: 2px solid var(--bs-primary, #7b68ee);
  outline-offset: -2px;
  background: var(--bs-body-bg);
  box-sizing: border-box;
  overflow: hidden;
}
/* The editor sits seamlessly where the text was: no border, no extra padding,
   inherits the cell's font/line metrics so nothing shifts. */
.table-spreadsheet td.is-editing .cell-input {
  border: none;
  box-shadow: none;
  border-radius: 0;
  width: 100%;
  min-width: 0;          /* shrink to the cell instead of forcing it wider */
  height: auto;
  min-height: 0;         /* drop Bootstrap's min-height so the editor matches the text line (no row growth) */
  margin: 0;
  padding: 0;
  background-color: transparent;
  font: inherit;
  color: inherit;
  line-height: inherit;
  vertical-align: middle;
}
/* Enum cells always show a down-chevron pinned at the end of the cell — in BOTH
   display and edit modes — so it reads as a dropdown without having to click,
   and the arrow never moves. Rendered as a td overlay (not on the <select>),
   which is why it's stable across the display→edit swap. */
.table-spreadsheet td.cell-editable[data-type="enum"] {
  position: relative;
  padding-right: 1.45rem;
  cursor: pointer;
}
.table-spreadsheet td.cell-editable[data-type="enum"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.5rem;
  width: 0.72rem;
  height: 0.72rem;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3E%3Cpath d='M3.2 5.6a.75.75 0 0 1 1.06 0L8 9.34l3.74-3.74a.75.75 0 1 1 1.06 1.06l-4.27 4.27a.75.75 0 0 1-1.06 0L3.2 6.66a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
  opacity: 0.65;
  z-index: 2;
}
/* The <select> drops BOTH its native arrow and form-select's background caret —
   the td overlay above is the single, stationary chevron. */
.table-spreadsheet td.is-editing select.cell-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
  cursor: pointer;
}
.table-spreadsheet td.cell-saved { background: rgba(25, 135, 84, 0.18) !important; }
.table-spreadsheet td.cell-error { background: rgba(220, 53, 69, 0.18) !important; }

/* Custom enum dropdown — replaces the unstyled native <select> popup.
   Rendered into <body> as a floating menu, positioned under the cell. */
.rec-enum-menu {
  position: absolute;
  z-index: 1080;
  min-width: 150px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  background: var(--cu-surface, #fff);
  border: 1px solid var(--cu-border, #e9eaee);
  border-radius: var(--cu-radius-sm, 8px);
  box-shadow: var(--cu-shadow-md, 0 4px 12px rgba(16, 24, 40, 0.08));
}
.rec-enum-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.42rem 0.6rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--cu-ink, #1f2533);
  font-size: 0.85rem;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.rec-enum-item + .rec-enum-item { margin-top: 1px; }
.rec-enum-item.hover,
.rec-enum-item:hover { background: rgba(123, 104, 238, 0.12); }
.rec-enum-item.active { font-weight: 600; }
.rec-enum-item.rec-enum-blank { color: var(--cu-muted, #6b7280); font-style: italic; }
.rec-enum-item .bi { margin-left: auto; color: #7b68ee; font-size: 0.9rem; }
.rec-enum-label { overflow: hidden; text-overflow: ellipsis; }

/* ===== Projects module: secondary tree rail (ClickUp-style) ===== */
.project-layout { display: flex; align-items: flex-start; gap: 1rem; }
.project-main { flex: 1 1 auto; min-width: 0; }
.project-rail {
  flex: 0 0 258px; width: 258px; align-self: stretch;
  background: var(--cu-surface, #fff);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--cu-radius, 10px);
  padding: 0.5rem 0.4rem;
  position: sticky; top: 4.75rem;
  max-height: calc(100vh - 6rem); overflow-y: auto;
}
.project-rail-head { display: flex; align-items: center; justify-content: space-between; padding: 0.15rem 0.4rem 0.35rem; }
.tree-space { margin-bottom: 0.35rem; }
.tree-space-row { font-size: 0.9rem; }
@media (max-width: 991px) {
  .project-layout { flex-direction: column; }
  .project-rail { position: static; width: 100%; flex-basis: auto; max-height: none; }
}

/* Task search box in the rail (visible on the projects list + every project page). */
.rail-search { position: sticky; top: 0; z-index: 3; padding: 0.1rem 0.25rem 0.4rem; background: var(--cu-surface, #fff); }
.rail-search-box { display: flex; align-items: center; gap: 0.4rem; padding: 0.32rem 0.55rem;
  border: 1px solid var(--bs-border-color); border-radius: 8px; background: var(--cu-subtle, #f7f8fa); }
.rail-search-box:focus-within { border-color: rgba(123,104,238,.55); background: var(--cu-surface, #fff); }
.rail-search-box .bi { color: var(--cu-muted, #6b7280); font-size: 0.85rem; }
.rail-search-input { border: 0; background: transparent; outline: 0; width: 100%; font-size: 0.85rem; color: inherit; }
.rail-search-results { margin-top: 0.35rem; border: 1px solid var(--bs-border-color); border-radius: 8px;
  background: var(--cu-surface, #fff); box-shadow: var(--cu-shadow-md, 0 4px 12px rgba(16,24,40,.08));
  max-height: 320px; overflow-y: auto; }
.rail-search-empty { padding: 0.5rem 0.6rem; color: var(--cu-muted, #6b7280); font-size: 0.82rem; }
.rail-search-item { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.4rem 0.55rem;
  text-decoration: none; color: var(--cu-ink, #1f2533); border-bottom: 1px solid var(--bs-border-color); }
.rail-search-item:last-child { border-bottom: 0; }
.rail-search-item:hover, .rail-search-item.is-active { background: rgba(123,104,238,.10); }
.rsi-id { font-size: 0.7rem; font-weight: 600; color: var(--cu-muted, #6b7280); font-variant-numeric: tabular-nums; padding-top: 0.12rem; }
.rsi-main { display: flex; flex-direction: column; min-width: 0; }
.rsi-title { font-size: 0.83rem; line-height: 1.25; word-break: break-word; }
.rsi-proj { font-size: 0.72rem; color: var(--cu-muted, #6b7280); display: flex; align-items: center; gap: 0.25rem; margin-top: 1px; }
.rail-search-results mark { background: #fde68a; color: inherit; padding: 0 1px; border-radius: 2px; }
[data-theme-mode="dark"] .rail-search-results mark { background: rgba(245,184,73,.35); }

/* Tree nodes (shared by the rail). */
.tree-children { list-style: none; margin: 0; padding-left: 0.85rem; border-left: 1px dashed var(--bs-border-color); margin-left: 0.5rem; }
.tree-folder, .tree-project { margin: 0.05rem 0; }
.tree-row { display: flex; align-items: center; gap: 0.15rem; padding: 0.12rem 0.3rem; border-radius: 6px; font-size: 0.86rem; }
.tree-row:hover { background: var(--cu-subtle, #f7f8fa); }
.tree-project.active > .tree-row { background: rgba(123,104,238,.14); }
.tree-project.active > .tree-row .tree-project-link { font-weight: 600; color: #5a45d6; }
.tree-actions { display: inline-flex; visibility: hidden; margin-left: auto; }
.tree-row:hover .tree-actions { visibility: visible; }
.tree-inline { display: flex; gap: 0.35rem; align-items: center; margin: 0.25rem 0 0.3rem 1.35rem; }
.tree-inline .form-control, .tree-inline .form-select { max-width: 12rem; }
.tree-empty { padding: 0.1rem 0.5rem; }
.tree-toggle .bi { transition: transform .15s ease; font-size: 0.7rem; }
.tree-toggle.collapsed .bi { transform: rotate(-90deg); }
/* Drag-and-drop move */
.tree-project[draggable="true"], .tree-row[draggable="true"] { cursor: grab; }
.tree-dragging { opacity: .45; }
[data-drop].drop-hover { outline: 2px dashed #7b68ee; outline-offset: -2px; border-radius: 6px; background: rgba(123,104,238,.10); }

/* Markdown formatting toolbar (task description + comments). */
.md-toolbar { display: flex; flex-wrap: wrap; gap: 1px; margin-bottom: 4px; }
.md-tb-btn { padding: 0.1rem 0.4rem; color: var(--cu-muted, #6b7280); line-height: 1; }
.md-tb-btn:hover { background: var(--cu-subtle, #f7f8fa); color: var(--cu-ink, #1f2533); }

/* Tags as badges (task dialog). */
.tag-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.tag-badge {
  display: inline-flex; align-items: center; gap: 0.2rem;
  background: #eef0f4; color: #5a6273; border-radius: 5px;
  padding: 0.08rem 0.15rem 0.08rem 0.45rem; font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}
.tag-badge .tag-x { border: 0; background: transparent; color: #97a0b0; line-height: 1; padding: 0 0.25rem; cursor: pointer; font-size: 0.95rem; }
.tag-badge .tag-x:hover { color: #e6533c; }
.tag-add-input { border: 0; outline: none; font-size: 0.78rem; min-width: 5rem; background: transparent; padding: 0.1rem 0.2rem; }
.td-desc-display .prose-doc, .td-desc-display { font-size: 0.9rem; }
.td-comment.prose-doc :is(p, ul, ol) { margin-bottom: 0.35rem; }
.td-comment.prose-doc pre { margin: 0.35rem 0; }

/* Task id label shown next to the task in Board / List / Calendar. */
.task-id {
  font-size: 0.72em; font-weight: 600; color: var(--cu-muted, #6b7280);
  font-variant-numeric: tabular-nums; opacity: .85;
}

/* Project description callout on the board — a subtly tinted box so it reads as
   the project's description, not just body text. */
.project-desc {
  background: var(--bs-tertiary-bg, #f7f8fa);
  border: 1px solid var(--bs-border-color);
  border-left: 3px solid #7b68ee;
  border-radius: 8px;
  padding: .6rem .85rem;
  max-width: 900px;
}
.project-desc-label {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .68rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
  color: var(--cu-muted, #6b7280); margin-bottom: .25rem;
}
.project-desc-body { font-size: .9rem; }
.project-desc-body > :first-child { margin-top: 0; }
.project-desc-body > :last-child  { margin-bottom: 0; }

/* Comment edit/delete controls in the task dialog — dim until hovering the row. */
.td-cmt-actions { opacity: 0; transition: opacity .12s ease; }
.td-act:hover .td-cmt-actions { opacity: 1; }

/* Projects Calendar view */
.cal-grid { overflow: hidden; }
.cal-head, .cal-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-hcell { padding: .4rem .5rem; font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--cu-muted); border-bottom: 1px solid var(--bs-border-color); text-align: center; }
.cal-cell { min-height: 6.5rem; border-right: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); padding: .25rem; overflow: hidden; }
.cal-week .cal-cell:last-child { border-right: 0; }
.cal-empty { background: var(--cu-subtle, #f7f8fa); }
.cal-today { background: rgba(123,104,238,.06); }
.cal-today .cal-daynum { background: #7b68ee; color: #fff; }
.cal-daynum { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; border-radius: 50%; font-size: .78rem; font-weight: 600; color: var(--cu-muted); margin-bottom: .15rem; }
.cal-task {
  display: block; font-size: .74rem; line-height: 1.2; padding: .12rem .35rem; margin-bottom: .15rem;
  border-radius: 4px; border-left: 3px solid #7b68ee; background: var(--cu-subtle, #f7f8fa);
  color: var(--cu-ink, #1f2533); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-task:hover { background: rgba(123,104,238,.12); }
.cal-task-chip { display: inline-block; }

/* Notes & Meetings — attendee multi-select (checkbox list). */
.attendee-picker {
  max-height: 220px;
  overflow-y: auto;
  background: var(--cu-surface, #fff);
}
.attendee-picker .form-check { margin-bottom: 0.15rem; }

.table-spreadsheet .sort-link:hover { color: var(--bs-primary) !important; }

/* Sitemap (DokuWiki-style namespace tree) */
.sitemap-list { list-style: none; padding-left: 1.25rem; margin: 0; }
/* Collapsible folders */
.sitemap-toggle {
  border: none; background: transparent; color: var(--bs-secondary-color, #6b7280);
  padding: 0; width: 1rem; height: 1rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.sitemap-toggle .bi { font-size: 0.7rem; transition: transform 0.15s ease; }
.sitemap-spacer { display: inline-block; width: 1rem; flex: 0 0 1rem; }
.sitemap-folder.collapsed > .sitemap-children { display: none; }
.sitemap-folder.collapsed > .sitemap-row .sitemap-toggle .bi { transform: rotate(-90deg); }
.sitemap-list .sitemap-list { border-left: 1px dashed var(--bs-border-color); margin-left: 0.5rem; padding-left: 1rem; }
.sitemap-list > li { margin: 0.25rem 0; }
.sitemap-row { display: flex; align-items: center; gap: 0.5rem; padding: 2px 0; }
.sitemap-link { color: var(--bs-body-color); text-decoration: none; }
.sitemap-link:hover { text-decoration: underline; color: var(--bs-link-color); }

/* Breadcrumbs — Ynex's .breadcrumb-style1 expects the Tabler Icons font (which we don't ship)
   so the separator falls back to a missing-glyph box. Override with a Bootstrap Icons chevron. */
.breadcrumb-style1 .breadcrumb-item + .breadcrumb-item::before {
  content: "\F285" !important; /* bi-chevron-right */
  font-family: "bootstrap-icons" !important;
  font-size: 0.7em;
  vertical-align: middle;
  padding: 0 0.35rem;
  color: var(--bs-secondary-color);
}
.breadcrumb-item .bi-house-door { font-size: 1rem; line-height: 1; vertical-align: 0; }
.breadcrumb-item a { color: var(--bs-link-color); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }

/* EasyMDE — make toolbar legible in both light and dark modes.
   Default EasyMDE styles assume a white page; the icons can vanish in dark mode
   and against Ynex's tinted backgrounds in light mode. */
.EasyMDEContainer .editor-toolbar {
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--bs-border-color);
  border-bottom: none;
  border-radius: 0.375rem 0.375rem 0 0;
}
.EasyMDEContainer .editor-toolbar a {
  color: var(--bs-body-color) !important;
  border: 1px solid transparent;
}
.EasyMDEContainer .editor-toolbar a:hover,
.EasyMDEContainer .editor-toolbar a.active {
  background: var(--bs-secondary-bg, rgba(0,0,0,0.05)) !important;
  border-color: var(--bs-border-color) !important;
}
.EasyMDEContainer .editor-toolbar i.separator {
  border-left-color: var(--bs-border-color);
  border-right-color: var(--bs-body-bg);
}
.EasyMDEContainer .CodeMirror {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
}
.EasyMDEContainer .CodeMirror-cursor { border-left-color: var(--bs-body-color) !important; }
.EasyMDEContainer .CodeMirror-selected { background: var(--bs-secondary-bg) !important; }
.EasyMDEContainer .editor-statusbar {
  color: var(--bs-secondary-color);
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-top: none;
}
.EasyMDEContainer .editor-preview, .EasyMDEContainer .editor-preview-side {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* Dark mode: EasyMDE's hard-coded white backgrounds also need overriding */
[data-theme-mode="dark"] .EasyMDEContainer .editor-toolbar {
  background: #1e2024;
}
[data-theme-mode="dark"] .EasyMDEContainer .CodeMirror {
  background: #15171b;
}
[data-theme-mode="dark"] .EasyMDEContainer .CodeMirror-gutters {
  background: #15171b;
  border-right-color: var(--bs-border-color);
}
[data-theme-mode="dark"] .EasyMDEContainer .editor-toolbar a {
  color: #e8eaed !important;
}

/* EasyMDE fullscreen / side-by-side layers must sit above the Ynex sidebar
   and header (which use z-index up to 99999). Default EasyMDE z-index is 8/9,
   so the sidebar would otherwise float over the editor and preview. */
.EasyMDEContainer .CodeMirror-fullscreen,
.editor-toolbar.fullscreen,
.editor-preview-side {
  z-index: 100000 !important;
}
/* Match the preview pane background to our theme in side-by-side mode. */
[data-theme-mode="dark"] .EasyMDEContainer .editor-preview-side {
  background: #15171b;
  border-color: var(--bs-border-color);
}
/* Choices.js (tag input) — make it look like a Bootstrap form-control with badge-style chips. */
.choices { margin-bottom: 0; }
.choices__inner {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius, 0.375rem);
  min-height: 38px;
  padding: 4px 6px;
  font-size: 0.95rem;
}
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  border-color: var(--bs-primary, #0d6efd);
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}
.choices__list--multiple .choices__item {
  background: var(--bs-primary, #0d6efd);
  border-color: var(--bs-primary, #0d6efd);
  color: #fff;
  border-radius: 999px;
  padding: 2px 10px 2px 12px;
  margin: 2px 4px 2px 0;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
}
.choices__list--multiple .choices__item .choices__button {
  border-left: 1px solid rgba(255,255,255,0.45);
  margin-left: 8px;
  padding-left: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
  background-size: 10px;
  opacity: 0.85;
}
.choices__list--multiple .choices__item .choices__button:hover { opacity: 1; }
.choices__input { background: transparent !important; color: var(--bs-body-color); }

[data-theme-mode="dark"] .choices__inner { background: #15171b; }
[data-theme-mode="dark"] .choices__input { color: #e8eaed; }

/* Pointer cursor on all interactive buttons */
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
input[type="button"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="reset"]:not(:disabled) {
  cursor: pointer;
}

/* ==========================================================================
   ClickUp-inspired theme layer
   Goal: emulate ClickUp's fonts, sizing, tables, and components.
   Scope note: the SIDEBAR background color (--menu-bg) is deliberately left
   untouched per design direction — only the content area is restyled.
   ========================================================================== */

:root {
  /* ClickUp signature purple */
  --primary-rgb: 123, 104, 238 !important;
  --bs-primary: #7b68ee !important;
  --bs-primary-rgb: 123, 104, 238 !important;
  --bs-link-color: #7b68ee;
  --bs-link-color-rgb: 123, 104, 238;
  --bs-link-hover-color: #5a45d6;

  /* ClickUp-ish neutrals */
  --cu-ink: #1f2533;          /* primary text */
  --cu-muted: #6b7280;        /* secondary text */
  --cu-border: #e9eaee;       /* hairline borders */
  --cu-surface: #ffffff;      /* cards/tables */
  --cu-subtle: #f7f8fa;       /* table head / hover wash */
  --cu-radius: 10px;
  --cu-radius-sm: 8px;
  --cu-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --cu-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);

  /* Typography — Inter, the closest free match to ClickUp's UI font */
  --default-font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  --bs-body-font-family: var(--default-font-family);
  --bs-border-radius: var(--cu-radius-sm);
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: var(--cu-radius);
}

/* Global text-size knob: the root font-size scales EVERY rem value across the
   app (headings, tiles, tables, buttons, badges, sidebar) proportionally.
   Default browser root is 16px; 15px = ~6% smaller everywhere. */
html { font-size: 15px; }

/* Base type — slightly larger and airier than Ynex's 13px default */
body {
  font-family: var(--default-font-family);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--cu-ink);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Content area only — keep sidebar untouched */
.main-content { color: var(--cu-ink); }

h1, h2, h3, h4, h5, h6, .fw-semibold, .fw-bold {
  font-family: var(--default-font-family);
  color: var(--cu-ink);
  letter-spacing: -0.018em;
}
h1, .h1 { font-weight: 700; }
h2, h3, h4, .h2, .h3, .h4 { font-weight: 650; }

/* Page header heading — ClickUp uses a confident but compact title */
.main-content .page-header-breadcrumb h1,
.main-content h1.fw-semibold { font-size: 1.5rem; letter-spacing: -0.02em; }

/* ---- Cards: white surface, hairline border, soft shadow, rounded ---- */
.main-content .card {
  border: 1px solid var(--cu-border);
  border-radius: var(--cu-radius);
  box-shadow: var(--cu-shadow);
  background: var(--cu-surface);
}
.main-content .card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--cu-border);
  font-weight: 600;
  padding: 0.9rem 1.1rem;
}
.main-content .card .card-body { padding: 1.1rem; }

/* ---- Buttons: rounded, medium weight, gentle motion ---- */
.btn {
  border-radius: var(--cu-radius-sm);
  font-weight: 550;
  letter-spacing: -0.01em;
  padding: 0.45rem 0.9rem;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .04s ease;
}
.btn:active { transform: translateY(0.5px); }
.btn-sm { border-radius: 7px; padding: 0.3rem 0.65rem; font-size: 0.8rem; }
.btn-lg { border-radius: var(--cu-radius); }
.btn-primary {
  background-color: #7b68ee;
  border-color: #7b68ee;
  box-shadow: 0 1px 2px rgba(123, 104, 238, 0.25);
}
.btn-primary:hover, .btn-primary:focus { background-color: #6a55ea; border-color: #6a55ea; }
.btn-primary:active { background-color: #5a45d6 !important; border-color: #5a45d6 !important; }
.btn-outline-primary { color: #7b68ee; border-color: #cfc7f7; }
.btn-outline-primary:hover { background-color: #7b68ee; border-color: #7b68ee; }
.btn-light, .btn-outline-secondary {
  border-color: var(--cu-border);
}
.btn-link { color: #7b68ee; font-weight: 550; }

/* ---- Form controls: rounded, hairline border, purple focus ring ---- */
.form-control, .form-select {
  border-radius: var(--cu-radius-sm);
  border-color: #dcdfe6;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  color: var(--cu-ink);
}
/* Leave room on the right for the dropdown caret — the padding above zeroed out
   Bootstrap's extra right padding, so on width:auto selects the arrow overlapped
   the text. Restore it (applies to .form-select and .form-select-sm). */
.form-select { padding-right: 2rem; }
.form-control:focus, .form-select:focus {
  border-color: #7b68ee;
  box-shadow: 0 0 0 3px rgba(123, 104, 238, 0.16);
}
.form-label { font-weight: 550; font-size: 0.82rem; color: #374151; margin-bottom: 0.35rem; }
.input-group-text { border-radius: var(--cu-radius-sm); border-color: #dcdfe6; background: var(--cu-subtle); }

/* ---- Badges: soft pill chips (ClickUp tag style) ---- */
.badge {
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.01em;
  padding: 0.32em 0.7em;
}

/* ---- Tables: airy rows, light head, hover wash, hairline separators ---- */
.main-content .table {
  --bs-table-bg: transparent;
  color: var(--cu-ink);
  font-size: 0.875rem;
  vertical-align: middle;
  border-color: var(--cu-border);
}
.main-content .table > thead th,
.table-app th {
  background: var(--cu-subtle);
  color: var(--cu-muted);
  font-size: 0.72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--cu-border);
  padding: 0.7rem 0.9rem;
  white-space: nowrap;
}
.main-content .table > tbody td {
  padding: 0.72rem 0.9rem;
  border-top: 1px solid var(--cu-border);
  border-bottom: none;
}
.main-content .table > tbody tr { transition: background-color .12s ease; }
.main-content .table > tbody tr:hover { background-color: rgba(123, 104, 238, 0.045); }

/* Tables wrapped in a card get the rounded ClickUp container look */
.main-content .card > .table-responsive:first-child,
.main-content .card > .table:first-child { border-radius: var(--cu-radius); overflow: hidden; }

/* Spreadsheet view: align hover/edit accents to the new purple */
.table-spreadsheet tbody tr:hover td { background: rgba(123, 104, 238, 0.05); }
.table-spreadsheet td.cell-editable:hover { outline-color: rgba(123, 104, 238, 0.4); }
.table-spreadsheet td.is-editing { outline-color: #7b68ee; }

/* ---- Dropdowns / menus: rounded, soft shadow ---- */
.dropdown-menu {
  border: 1px solid var(--cu-border);
  border-radius: var(--cu-radius);
  box-shadow: var(--cu-shadow-md);
  padding: 0.35rem;
}
.dropdown-item { border-radius: 6px; padding: 0.45rem 0.6rem; font-size: 0.85rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--cu-subtle); }

/* ---- Alerts: softer, rounded ---- */
.main-content .alert { border-radius: var(--cu-radius); border-width: 1px; }

/* ---- Icons: consistent sizing/alignment so bi-* glyphs read like ClickUp's line set ---- */
.main-content .bi { vertical-align: -0.125em; }
.btn .bi { font-size: 1.05em; }

/* ---- Stat / metric cards on the dashboard: crisper ClickUp feel ---- */
.main-content .card .avatar,
.main-content .card .svg-icon { border-radius: var(--cu-radius-sm) !important; }

/* Links in content */
.main-content a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link) { color: #6a55ea; }
.main-content a:not(.btn):not(.dropdown-item):hover { color: #5a45d6; }

/* Pagination → pill buttons */
.page-link { border-radius: 7px !important; margin: 0 2px; border-color: var(--cu-border); color: var(--cu-ink); }
.page-item.active .page-link { background: #7b68ee; border-color: #7b68ee; }

/* Login card: lift it like a ClickUp auth panel */
.auth-card .card { border: 1px solid var(--cu-border); border-radius: 14px; box-shadow: var(--cu-shadow-md); }
.auth-wrapper { background: linear-gradient(135deg, rgba(123,104,238,0.08), rgba(35,183,229,0.06)); }

/* ==========================================================================
   ClickUp button system — one consistent language everywhere, including the
   small action buttons inside tables.
     • .btn-primary            → solid purple (main action)
     • .btn-light / -secondary → soft gray fill (secondary action)
     • .btn-ghost(-primary)    → transparent, hover-fill (inline & table-row actions)
     • .btn-link               → behaves as a neutral ghost button (Cancel/Reset/icons)
   ========================================================================== */

/* Secondary: ClickUp's soft gray button */
.btn-secondary,
.btn-light,
.btn-outline-secondary {
  background-color: #f4f5f7;
  border-color: #e6e8ec;
  color: #44495a;
  font-weight: 550;
}
.btn-secondary:hover, .btn-secondary:focus,
.btn-light:hover, .btn-light:focus,
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background-color: #e9ebef;
  border-color: #dcdfe6;
  color: var(--cu-ink);
}
.btn-outline-secondary:active, .btn-light:active { background-color: #e1e4e9 !important; color: var(--cu-ink) !important; }

/* Ghost: transparent until hovered — for inline links and table-row actions */
.btn-ghost,
.btn-ghost-primary {
  background-color: transparent;
  border-color: transparent;
  font-weight: 550;
  box-shadow: none;
}
.btn-ghost { color: #5a6273; }
.btn-ghost:hover, .btn-ghost:focus { background-color: var(--cu-subtle); color: var(--cu-ink); border-color: transparent; }
.btn-ghost.text-danger, .btn-ghost-danger { color: #e6533c; }
.btn-ghost.text-danger:hover, .btn-ghost-danger:hover { background-color: rgba(230, 83, 60, 0.1); color: #e6533c; }
.btn-ghost-primary { color: #6a55ea; }
.btn-ghost-primary:hover, .btn-ghost-primary:focus { background-color: rgba(123, 104, 238, 0.1); color: #5a45d6; border-color: transparent; }

/* .btn-link reads as a neutral ghost button (no underline, subtle hover fill) */
.btn-link {
  color: #5a6273;
  text-decoration: none;
  font-weight: 550;
  border-radius: 7px;
}
.btn-link:hover, .btn-link:focus { color: #5a45d6; background-color: var(--cu-subtle); text-decoration: none; }
.btn-link.text-danger { color: #e6533c; }
.btn-link.text-danger:hover { color: #e6533c; background-color: rgba(230, 83, 60, 0.1); }

/* Table-row action buttons: snug, icon+label, equal footprint */
.table td .btn-sm,
.table td .btn-ghost,
.table td .btn-ghost-primary,
.table td .btn-link {
  --bs-btn-padding-y: 0.28rem;
  --bs-btn-padding-x: 0.55rem;
  font-size: 0.8rem;
  white-space: nowrap;
}
.table td .btn .bi { font-size: 0.95em; }

/* All buttons are compact (small) by default, ClickUp-style, and lay out as
   icon + text. Individual .btn-sm/.btn-lg still adjust from this baseline. */
.btn {
  padding: 0.38rem 0.72rem;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  line-height: 1.25;
}
.btn > .bi { font-size: 1em; line-height: 1; }
.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.78rem; }
.btn-lg { padding: 0.55rem 1rem; font-size: 0.9rem; }
/* Full-width form buttons (e.g. login) shouldn't be forced inline-flex narrow */
.btn.w-100, .btn.d-block { display: inline-flex; width: 100%; }

/* ---- Tabs: ClickUp underline style (icon + text) ---- */
.nav-tabs {
  border-bottom: 1px solid var(--cu-border);
  gap: 0.15rem;
}
.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  padding: 0.55rem 0.9rem;
  color: var(--cu-muted);
  font-weight: 600;
  font-size: 0.84rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  transition: color .12s ease, border-color .12s ease;
}
.nav-tabs .nav-link:hover { color: var(--cu-ink); border-bottom-color: var(--cu-border); }
.nav-tabs .nav-link.active {
  color: #6a55ea;
  background: transparent;
  border-color: transparent;
  border-bottom-color: #7b68ee;
}
.nav-tabs .nav-link .bi { font-size: 1em; }

/* ==========================================================================
   ClickUp-style task List + Board (project detail page)
   ========================================================================== */
.cu-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.cu-meta .cu-count { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--cu-muted); }
.cu-meta .cu-count b { color: var(--cu-ink); font-weight: 650; }
.cu-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: currentColor; }

/* Grouped list */
.cu-list { display: flex; flex-direction: column; gap: 1.1rem; }
.cu-group { background: var(--cu-surface); border: 1px solid var(--cu-border); border-radius: var(--cu-radius); overflow: hidden; box-shadow: var(--cu-shadow); }
.cu-group-header { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.8rem; background: var(--cu-subtle); border-bottom: 1px solid var(--cu-border); }
.cu-group-toggle { border: none; background: transparent; color: var(--cu-muted); padding: 0; width: 1.1rem; display: inline-flex; align-items: center; }
.cu-group-toggle .bi { transition: transform .15s ease; }
.cu-group.collapsed .cu-group-toggle .bi { transform: rotate(-90deg); }
.cu-group.collapsed .cu-group-body { display: none; }
.cu-status-pill { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 0.22rem 0.6rem; border-radius: 6px; }
.cu-group-count { color: var(--cu-muted); font-size: 0.8rem; font-weight: 650; }
.cu-add-task { margin-left: auto; border: none; background: transparent; color: var(--cu-muted); font-size: 0.78rem; font-weight: 550; display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 6px; padding: 0.25rem 0.5rem; }
.cu-add-task:hover { background: rgba(123,104,238,0.1); color: #6a55ea; }
.cu-task-row { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--cu-border); color: var(--cu-ink); text-decoration: none; transition: background-color .1s ease; }
.cu-task-row:last-child { border-bottom: none; }
.cu-task-row:hover { background: rgba(123,104,238,0.05); color: var(--cu-ink); }
.cu-status-dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; flex: 0 0 auto; box-sizing: border-box; }
.cu-status-dot.is-done { background: currentColor; }
.cu-task-name { flex: 1 1 auto; font-weight: 500; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-task-meta { display: inline-flex; align-items: center; gap: 0.85rem; flex: 0 0 auto; }
.cu-due { color: var(--cu-muted); font-size: 0.78rem; display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.cu-due.is-overdue { color: #e6533c; }
.cu-avatar { width: 25px; height: 25px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.66rem; font-weight: 700; color: #fff; flex: 0 0 auto; }
.cu-empty { padding: 0.65rem 0.85rem; color: var(--cu-muted); font-size: 0.82rem; }
.cu-tags { display: inline-flex; gap: 0.3rem; flex: 0 1 auto; overflow: hidden; }
.cu-tag {
  font-size: 0.68rem; font-weight: 600; color: #5a6273;
  background: #eef0f4; border-radius: 5px; padding: 0.1rem 0.4rem; white-space: nowrap;
}
.cu-prio { font-size: 0.74rem; font-weight: 650; display: inline-flex; align-items: center; gap: 0.2rem; white-space: nowrap; }

/* Severity pills (findings) */
.sev { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: 0.22rem 0.55rem; border-radius: 6px; white-space: nowrap; }
.sev-critical { background: #fde8e6; color: #c0392b; }
.sev-high     { background: #fdeedd; color: #c4691a; }
.sev-medium   { background: #fff7df; color: #9a7400; }
.sev-low      { background: #eef0f4; color: #5a6273; }
[data-theme-mode="dark"] .sev-critical { background: rgba(192,57,43,.28); color: #f3a399; }
[data-theme-mode="dark"] .sev-high { background: rgba(196,105,26,.28); color: #f0bd86; }
[data-theme-mode="dark"] .sev-medium { background: rgba(154,116,0,.30); color: #e7cf7e; }
[data-theme-mode="dark"] .sev-low { background: rgba(120,120,120,.30); color: #c2c7cf; }

/* Status dot/pill colors reuse the status-* hues */
.cu-dot-not-started, .status-dot-not-started { color: #64748b; }
.cu-dot-in-progress, .status-dot-in-progress { color: #d97706; }
.cu-dot-blocked,     .status-dot-blocked     { color: #dc2626; }
.cu-dot-done,        .status-dot-done        { color: #059669; }

/* Board (kanban) — ClickUp columns/cards */
.kanban-column { background: var(--cu-subtle); border: 1px solid var(--cu-border); border-radius: var(--cu-radius); }
.kanban-column-header { border-bottom: 1px solid var(--cu-border); text-transform: none; letter-spacing: 0; }
.kanban-card { border: 1px solid var(--cu-border); border-radius: 9px; box-shadow: var(--cu-shadow); }
.kanban-card:hover { box-shadow: var(--cu-shadow-md); }
.kanban-card-title { font-size: 0.85rem; font-weight: 600; }

/* ---- Print: clean management report (Save as PDF) ---- */
@media print {
  .app-sidebar, .app-header, #toast-container, .report-toolbar, footer, .main-footer { display: none !important; }
  .main-content, .app-content, .page { margin: 0 !important; padding: 0 !important; }
  body { background: #fff !important; }
  .report-sheet .card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
  .report-sheet .card-header { background: #f4f5f7 !important; }
  a { color: inherit !important; text-decoration: none !important; }
  table { font-size: 11px; }
}

/* ---- Notification bell badge: pin the count to the bell, not past the caret ---- */
.header-notifications-dropdown .dropdown-toggle::after { display: none !important; }
.notif-bell-wrap { position: relative; display: inline-flex; line-height: 1; }
.notif-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.15rem 0.3rem;
  min-width: 1.05em;
  text-align: center;
  box-shadow: 0 0 0 2px var(--cu-surface, #fff);
}

/* ---- @-mention autocomplete dropdown ---- */
.mention-menu {
  position: absolute;
  z-index: 20000;
  background: var(--cu-surface, #fff);
  border: 1px solid var(--cu-border, #e9eaee);
  border-radius: var(--cu-radius, 10px);
  box-shadow: var(--cu-shadow-md, 0 4px 12px rgba(16,24,40,0.08));
  padding: 0.3rem;
  max-height: 280px;
  overflow-y: auto;
}
.mention-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.85rem;
  white-space: nowrap;
}
.mention-item.active, .mention-item:hover { background: var(--cu-subtle, #f7f8fa); }
.mention-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.64rem; font-weight: 700; color: #fff; flex: 0 0 auto;
}
.mention-name { font-weight: 550; color: var(--cu-ink, #1f2533); }
.mention-handle { color: var(--cu-muted, #6b7280); font-size: 0.78rem; }
[data-theme-mode="dark"] .mention-menu { background: #1e2024; }

/* Rendered @-mention badge (in posted comments / descriptions / notes) */
.mention-chip {
  background: rgba(123, 104, 238, 0.13);
  color: #5a45d6;
  font-weight: 600;
  border-radius: 5px;
  padding: 0.05em 0.35em;
  white-space: nowrap;
}
[data-theme-mode="dark"] .mention-chip { background: rgba(123, 104, 238, 0.25); color: #c9c0fb; }

/* ---- Breadcrumb: ClickUp style (small, muted, chevron separators) ---- */
.breadcrumb { font-size: 0.78rem; margin-bottom: 0; align-items: center; }
/* Center every crumb (home icon, chevron separator, text) on one line regardless
   of their differing font sizes — flex centering beats baseline vertical-align. */
.breadcrumb-item { display: inline-flex; align-items: center; }
.breadcrumb-item a { display: inline-flex; align-items: center; }
.breadcrumb-item, .breadcrumb-item a { color: var(--cu-muted); }
.breadcrumb-item a { font-weight: 500; text-decoration: none; }
.breadcrumb-item a:hover { color: #6a55ea; text-decoration: none; }
.breadcrumb-item.active { color: var(--cu-ink); font-weight: 600; }
.breadcrumb-style1 .breadcrumb-item + .breadcrumb-item::before {
  color: #b8bdc7 !important;
}

/* ============================================================
   Dashboard — refined ClickUp metric tiles + activity lists
   ============================================================ */

/* Metric tiles: tinted icon chip, big number, colored accent rail */
.stat-tile { position: relative; overflow: hidden; transition: box-shadow .15s ease, transform .1s ease; }
.stat-tile:hover { box-shadow: var(--cu-shadow-md); transform: translateY(-1px); }
.stat-tile::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--tile-accent);
}
.stat-tile .card-body { padding: 1.05rem 1.15rem; }
.stat-tile .stat-head { display: flex; align-items: flex-start; justify-content: space-between; }
.stat-icon {
  width: 42px; height: 42px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem; background: var(--tile-bg); color: var(--tile-accent);
}
.stat-scope {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .04em; color: #9aa1ad;
  border: 1px solid var(--cu-border); border-radius: 999px; padding: .1rem .45rem; white-space: nowrap;
}
.stat-num { font-size: 1.95rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; margin-top: .7rem; }
.stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cu-muted); font-weight: 650; }

.stat-not-started { --tile-accent: #64748b; --tile-bg: rgba(100,116,139,.12); }
.stat-in-progress { --tile-accent: #d97706; --tile-bg: rgba(245,158,11,.15); }
.stat-blocked     { --tile-accent: #dc2626; --tile-bg: rgba(239,68,68,.13); }
.stat-done        { --tile-accent: #059669; --tile-bg: rgba(16,185,129,.15); }

/* Panel section headers (card headers with an icon) */
.panel-title { font-size: .95rem; font-weight: 650; display: inline-flex; align-items: center; gap: .5rem; }
.panel-title .bi { color: var(--cu-muted); font-size: 1rem; }

/* Dashboard list rows: airier, quiet dividers, purple hover wash */
.dash-list .list-group-item {
  border: none; border-top: 1px solid var(--cu-border);
  padding: .7rem 1.1rem; transition: background-color .12s ease;
}
.dash-list .list-group-item:first-child { border-top: none; }
.dash-list .list-group-item:hover { background-color: rgba(123,104,238,.045); }
.dash-list .dl-title { font-weight: 550; color: var(--cu-ink); }
.dash-list .dl-sub { font-size: .76rem; color: var(--cu-muted); }

/* Tiny initials avatar for activity rows */
.mini-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 650; color: #fff; background: #7b68ee;
}
.mini-avatar.av-1 { background: #7b68ee; } .mini-avatar.av-2 { background: #0ea5e9; }
.mini-avatar.av-3 { background: #f59e0b; } .mini-avatar.av-4 { background: #10b981; }
.mini-avatar.av-5 { background: #ef4444; } .mini-avatar.av-6 { background: #ec4899; }

/* Due chips (compact) */
.due-chip { font-size: .7rem; font-weight: 600; padding: .18rem .5rem; border-radius: 999px; white-space: nowrap; }
.due-chip.is-overdue { color: #b91c1c; background: rgba(239,68,68,.12); }
.due-chip.is-soon    { color: #b45309; background: rgba(245,158,11,.15); }
.due-chip.is-normal  { color: var(--cu-muted); background: var(--cu-subtle); }

/* Mini project progress cards on the dashboard */
.proj-mini { border: 1px solid var(--cu-border); border-radius: var(--cu-radius-sm); padding: .85rem .95rem; transition: border-color .12s ease, box-shadow .12s ease; }
.proj-mini:hover { border-color: #cfc7f7; box-shadow: var(--cu-shadow); }
.proj-mini .progress { height: 6px; border-radius: 999px; background: var(--cu-subtle); }
.proj-mini .progress-bar { border-radius: 999px; }

/* Utility: allow flex children to shrink below content width (for text-truncate) */
.min-w-0 { min-width: 0 !important; }

/* ============================================================
   Global polish rollout — buttons, alerts, progress, tiles
   ============================================================ */

/* Secondary buttons (Filter / Search) were competing blue — make them
   neutral surface chips consistent with the ClickUp palette. */
.main-content .btn-secondary {
  background-color: #f4f5f7 !important; border-color: #e6e8ec !important; color: #44495a !important; box-shadow: none;
}
.main-content .btn-secondary:hover, .main-content .btn-secondary:focus {
  background-color: #e9ebef !important; border-color: #dcdfe6 !important; color: var(--cu-ink) !important;
}
.main-content .btn-secondary:active {
  background-color: #e1e4e9 !important; border-color: #cbd0d9 !important; color: var(--cu-ink) !important;
}

/* Alerts — readable, softer fills */
.main-content .alert { border-radius: var(--cu-radius); border-width: 1px; }
.main-content .alert-warning { background: #fff8e6; border-color: #f3e0a3; color: #7a5600; }
.main-content .alert-warning strong, .main-content .alert-warning code { color: #614400; }
.main-content .alert-info { background: #eef4ff; border-color: #cddcff; color: #274690; }
.main-content .alert-info strong, .main-content .alert-info code { color: #1d3670; }

/* Progress bars: pill-rounded everywhere, subtle track */
.main-content .progress { border-radius: 999px; background: var(--cu-subtle); }
.main-content .progress-bar { border-radius: 999px; }

/* Neutral + semantic metric-tile accents (reused on Reports / Findings) */
.stat-purple { --tile-accent: #7b68ee; --tile-bg: rgba(123,104,238,.13); }
.stat-green  { --tile-accent: #059669; --tile-bg: rgba(16,185,129,.15); }
.stat-red    { --tile-accent: #dc2626; --tile-bg: rgba(239,68,68,.13); }
.stat-amber  { --tile-accent: #d97706; --tile-bg: rgba(245,158,11,.15); }
.stat-crimson{ --tile-accent: #c0392b; --tile-bg: #fde8e6; }
/* severity tiles */
.stat-critical { --tile-accent: #c0392b; --tile-bg: #fde8e6; }
.stat-highsev  { --tile-accent: #c4691a; --tile-bg: #fdeedd; }
.stat-medsev   { --tile-accent: #9a7400; --tile-bg: #fff7df; }
.stat-lowsev   { --tile-accent: #5a6273; --tile-bg: #eef0f4; }
/* Projects dashboard tiles */
.stat-proj    { --tile-accent: #7b68ee; --tile-bg: #efecfe; }
.stat-open    { --tile-accent: #2f80c4; --tile-bg: #e6f1fb; }
.stat-overdue { --tile-accent: #c0392b; --tile-bg: #fde8e6; }
.stat-donep   { --tile-accent: #0f9d64; --tile-bg: #e4f6ee; }

/* View toggle (cards/table) active state → purple accent, not theme blue */
.main-content .btn-group > .btn-outline-secondary.active,
.main-content .btn-group > .btn-outline-secondary:active {
  background-color: #7b68ee !important; border-color: #7b68ee !important; color: #fff !important;
}

/* ============================================================
   Task Dialog (ClickUp-style rich modal)
   ============================================================ */
.task-dialog .td-fields { display: flex; flex-direction: column; gap: .5rem; }
.td-field { display: grid; grid-template-columns: 132px 1fr; align-items: center; gap: .5rem; }
.td-label { color: var(--cu-muted); font-size: .8rem; font-weight: 550; display: inline-flex; align-items: center; gap: .4rem; }
.td-label .bi { font-size: .95rem; }
.td-status option { background: #fff; color: #1f2533; }
.td-activity { background: var(--cu-subtle); border-bottom-right-radius: var(--cu-radius); }
.td-feed { display: flex; flex-direction: column; gap: .9rem; max-height: 46vh; overflow-y: auto; }
.td-act { display: flex; gap: .55rem; align-items: flex-start; }
.td-act .mini-avatar { flex: 0 0 auto; }
.td-act-body { font-size: .82rem; line-height: 1.45; }
.td-act-time { color: #9aa1ad; font-size: .68rem; margin-top: .1rem; }
.td-comment { background: #fff; border: 1px solid var(--cu-border); border-radius: 8px; padding: .4rem .6rem; margin-top: .3rem; white-space: pre-wrap; }
@media (max-width: 991.98px) { .td-activity { border-top: 1px solid var(--cu-border); } .td-field { grid-template-columns: 110px 1fr; } }

/* ---- Diagrams gallery ---- */
.diagram-card { transition: box-shadow .15s ease, transform .1s ease; }
.diagram-card:hover { box-shadow: var(--cu-shadow-md); transform: translateY(-1px); }
.diagram-thumb {
  height: 168px; background: var(--cu-subtle);
  border-bottom: 1px solid var(--cu-border);
  border-top-left-radius: var(--cu-radius); border-top-right-radius: var(--cu-radius);
  display: flex; align-items: center; justify-content: center; overflow: hidden; padding: .5rem;
}
.diagram-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---- Diagram embeds inside docs ([[diagram:ID]]) ---- */
.diagram-embed { margin: 1rem 0; border: 1px solid var(--cu-border); border-radius: var(--cu-radius); overflow: hidden; background: #fff; }
.diagram-embed figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem .75rem; font-size: .8rem; color: var(--cu-muted); border-bottom: 1px solid var(--cu-border); background: var(--cu-subtle); }
.diagram-embed figcaption a { font-weight: 550; text-decoration: none; white-space: nowrap; }
.diagram-embed img { display: block; max-width: 100%; margin: 0 auto; padding: .75rem; }
.diagram-embed-note { padding: .75rem 1rem; color: var(--cu-muted); font-size: .85rem; background: var(--cu-subtle); border: 1px dashed var(--cu-border); border-radius: var(--cu-radius); margin: 1rem 0; }

/* [[doc:slug]] reference — rendered as an inline pill link in rich text. */
.doc-ref { display: inline-flex; align-items: center; gap: .25rem; padding: 0 .35rem; border-radius: 5px;
  background: rgba(123,104,238,.10); color: #5b4bd6; text-decoration: none; font-weight: 550; line-height: 1.5; }
.doc-ref:hover { background: rgba(123,104,238,.18); text-decoration: none; }
.doc-ref-missing { background: rgba(220,53,69,.10); color: #b02a37; cursor: help; }
[data-theme-mode="dark"] .doc-ref { background: rgba(123,104,238,.22); color: #c9c0fb; }

/* Copyable reference chip on the doc page / diagram editor. */
.ref-chip { display: inline-flex; align-items: center; align-self: center; gap: .3rem; font-family: var(--bs-font-monospace, monospace);
  font-size: .75rem; padding: .1rem .45rem; border: 1px solid var(--cu-border); border-radius: 6px;
  background: var(--cu-subtle); color: var(--cu-muted); cursor: pointer; transition: background .12s, color .12s; }
.ref-chip:hover { background: rgba(123,104,238,.12); color: #5b4bd6; border-color: rgba(123,104,238,.35); }
.ref-chip.is-copied { background: rgba(25,135,84,.15); color: #198754; border-color: rgba(25,135,84,.4); }