/* ============================================================
   Meridian CRM — views.css
   Dashboard, list views, kanban, record pages, composer,
   pipeline, activities, reports, settings, search.
   ============================================================ */

/* ================= Home dashboard ================= */
.dash-filters { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.kpi { padding: var(--sp-4); display: flex; flex-direction: column; gap: 3px; position: relative; overflow: hidden; }
.kpi .kpi-label { font-size: var(--fs-11); font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.kpi .kpi-value { font-size: var(--fs-24); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi .kpi-delta { font-size: var(--fs-12); color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.kpi .kpi-delta .up { color: var(--success); } .kpi .kpi-delta .down { color: var(--danger); }
.kpi .kpi-spark { position: absolute; right: 0; bottom: 0; left: 0; height: 34px; opacity: 0.55; pointer-events: none; }
.kpi.kpi-clickable { cursor: pointer; transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); }
.kpi.kpi-clickable:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-4); }
.dash-card { grid-column: span 6; display: flex; flex-direction: column; min-width: 0; }
.dash-card.span-4 { grid-column: span 4; }
.dash-card.span-8 { grid-column: span 8; }
.dash-card.span-12 { grid-column: span 12; }
.dash-card-body { padding: var(--sp-4); flex: 1; min-height: 0; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-11); color: var(--text-muted); }
.chart-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend .lg i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.chart-tip {
  position: absolute; pointer-events: none; z-index: 900;
  background: var(--text); color: var(--surface);
  font-size: var(--fs-11); font-weight: 550; padding: 5px 8px; border-radius: var(--r-sm);
  transform: translate(-50%, calc(-100% - 9px)); white-space: nowrap;
  opacity: 0; transition: opacity var(--t-fast);
  box-shadow: var(--shadow-md);
}
.chart-tip.show { opacity: 1; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-svg .anim-bar { transform-origin: bottom; animation: barGrow var(--t-slow) var(--ease) both; }
.chart-svg .anim-bar-h { transform-origin: left; animation: barGrowH var(--t-slow) var(--ease) both; }
@keyframes barGrow { from { transform: scaleY(0.02); } to { transform: scaleY(1); } }
@keyframes barGrowH { from { transform: scaleX(0.02); opacity: 0.4; } to { transform: scaleX(1); opacity: 1; } }
.chart-svg .anim-line { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: dashDraw 1.1s var(--ease) forwards; }
@keyframes dashDraw { to { stroke-dashoffset: 0; } }
.chart-svg .anim-donut { animation: donutIn 0.9s var(--ease) both; transform-origin: center; }
@keyframes donutIn { from { transform: rotate(-90deg) scale(0.85); opacity: 0; } to { transform: rotate(0deg) scale(1); opacity: 1; } }
.chart-hit { cursor: pointer; }
.chart-hit:hover + .bar-label-txt, .chart-hit:hover ~ * { }
.bar-click { cursor: pointer; transition: opacity var(--t-fast); }
.bar-click:hover { opacity: 0.8; }
.lb-table { width: 100%; font-size: var(--fs-13); border-collapse: collapse; }
.lb-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.lb-table tr:last-child td { border-bottom: 0; }
.lb-rank { width: 26px; color: var(--text-faint); font-weight: 700; font-size: var(--fs-12); }
.myday-list { display: flex; flex-direction: column; }
.myday-item { display: flex; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); align-items: flex-start; }
.myday-item:last-child { border-bottom: 0; }
.myday-item .md-time { font-size: var(--fs-11); color: var(--text-muted); white-space: nowrap; font-weight: 600; padding-top: 2px; min-width: 44px; }
.myday-item.overdue .md-time { color: var(--danger); }

/* ================= List views ================= */
.list-toolbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.view-switcher { min-width: 210px; max-width: 300px; height: 36px; justify-content: flex-start; font-weight: 620; }
.view-switcher .vs-caret { margin-left: auto; color: var(--text-muted); }
.list-search { width: 220px; }
.list-count-pill { font-size: var(--fs-12); color: var(--text-muted); padding: 0 4px; white-space: nowrap; }
.filter-panel {
  width: 300px; flex-shrink: 0;
  display: flex; flex-direction: column;
  animation: filterIn var(--t-med) var(--ease);
}
@keyframes filterIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.filter-row { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 9px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-alt); position: relative; }
.filter-row .fr-head { display: flex; align-items: center; gap: 6px; }
.filter-row .fr-field { font-size: var(--fs-12); font-weight: 620; }
.filter-row .fr-op { font-size: var(--fs-11); color: var(--text-muted); font-style: italic; }
.filter-row .fr-remove { margin-left: auto; color: var(--text-faint); padding: 2px; border-radius: var(--r-sm); }
.filter-row .fr-remove:hover { color: var(--danger); background: var(--danger-soft); }
.filter-add-btn { border: 1px dashed var(--border-strong); border-radius: var(--r-md); padding: 8px; color: var(--text-muted); width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--fs-12); font-weight: 550; }
.filter-add-btn:hover { border-color: var(--brand); color: var(--brand); }
.list-body { display: flex; gap: var(--sp-4); align-items: flex-start; }
.list-table-col { flex: 1 1 auto; min-width: 0; }
.list-footer { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; font-size: var(--fs-12); color: var(--text-muted); }
.pager { display: flex; align-items: center; gap: 3px; }
.pager .pg-btn { min-width: 28px; height: 28px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-12); font-weight: 600; color: var(--text-soft); border: 1px solid transparent; }
.pager .pg-btn:hover:not(:disabled) { background: var(--hover-layer); }
.pager .pg-btn.cur { background: var(--brand); color: #fff; }
.pager .pg-btn:disabled { opacity: 0.35; cursor: default; }
.pager .pg-dots { padding: 0 4px; color: var(--text-faint); }
.rows-select { width: auto; height: 28px; font-size: var(--fs-12); padding: 0 24px 0 8px; }
.mass-bar {
  position: sticky; top: calc(var(--topbar-h) + var(--tabbar-h) + 8px); z-index: 800;
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  background: var(--elevated); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: 9px var(--sp-4); margin-bottom: var(--sp-3);
  animation: massIn var(--t-med) var(--ease);
}
@keyframes massIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mass-bar .mass-count { font-size: var(--fs-13); font-weight: 650; }
.save-bar {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 1600;
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--text); color: var(--surface);
  border-radius: var(--r-lg); padding: 10px 12px 10px 18px;
  box-shadow: var(--shadow-lg);
  animation: saveBarIn var(--t-med) var(--ease);
}
@keyframes saveBarIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.save-bar .sb-count { font-size: var(--fs-13); font-weight: 650; white-space: nowrap; }
.save-bar .btn { border-color: transparent; }
.row-link { color: var(--brand); font-weight: 550; }
.row-link:hover { text-decoration: underline; }
.cell-ref { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.cell-ref .cr-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-link { color: var(--text); font-weight: 550; }
.pill-link:hover { color: var(--brand); text-decoration: underline; }
.null-val { color: var(--text-faint); font-weight: 400; }
.readonly-ind { color: var(--text-faint); margin-left: 4px; }
.inline-x-btns { display: inline-flex; gap: 4px; margin-left: 6px; opacity: 0; transition: opacity var(--t-fast); }
tr:hover .inline-x-btns, .inline-x-btns.always { opacity: 1; }

/* ================= Kanban ================= */
.kanban { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 14px; align-items: flex-start; min-height: 60vh; }
.kanban-col { flex: 0 0 288px; max-width: 288px; display: flex; flex-direction: column; gap: 8px; min-height: 180px; border-radius: var(--r-lg); transition: background var(--t-fast) var(--ease); }
.kanban-col.drop-target { background: var(--brand-softer); outline: 2px dashed var(--brand); outline-offset: -2px; }
.kanban-col-head { padding: 10px 12px 8px; position: sticky; top: calc(var(--topbar-h) + var(--tabbar-h)); z-index: 500; background: var(--surface); border-bottom: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.kanban-col-body { display: flex; flex-direction: column; gap: 8px; padding: 10px; min-height: 60px; max-height: calc(100vh - 320px); overflow-y: auto; }
.kanban-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 10px 11px;
  cursor: grab; user-select: none;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-fast), opacity var(--t-fast);
  position: relative;
}
.kanban-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kanban-card:focus-visible { outline: none; box-shadow: var(--focus-ring); cursor: grab; }
.kanban-card.dragging { opacity: 0.35; cursor: grabbing; }
.kanban-card .kc-top { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.kanban-card .kc-name { font-size: var(--fs-13); font-weight: 620; line-height: 1.3; }
.kanban-card .kc-meta { font-size: var(--fs-11); color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kanban-card .kc-amount { font-size: var(--fs-14); font-weight: 700; font-variant-numeric: tabular-nums; }
.kanban-card .kc-more { position: absolute; top: 6px; right: 6px; opacity: 0; transition: opacity var(--t-fast); }
.kanban-card:hover .kc-more { opacity: 1; }
.kanban-drag-ghost {
  position: fixed; z-index: 5000; pointer-events: none;
  width: 264px; transform: rotate(2.5deg) scale(1.03);
  box-shadow: var(--shadow-lg);
}
.kanban-col-foot { padding: 0 12px 8px; }
.kanban-add-btn { width: 100%; justify-content: center; border: 1px dashed var(--border-strong); border-radius: var(--r-md); padding: 7px; color: var(--text-muted); font-size: var(--fs-12); display: flex; align-items: center; gap: 6px; }
.kanban-add-btn:hover { border-color: var(--brand); color: var(--brand); }
.kanban-totals { display: flex; gap: 10px; overflow-x: auto; margin-bottom: var(--sp-3); }

/* ================= Record pages ================= */
.record-wrap { max-width: 1560px; margin: 0 auto; padding: var(--sp-4) var(--sp-6) 90px; }
.record-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-5); align-items: start; }
.record-main { min-width: 0; }
.highlights {
  background: linear-gradient(180deg, color-mix(in srgb, var(--oc, var(--brand)) 9%, var(--surface)), var(--surface) 70%);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
}
.hl-head { display: flex; align-items: center; gap: 14px; margin-bottom: var(--sp-3); }
.hl-title { font-size: var(--fs-20); font-weight: 700; letter-spacing: -0.015em; display: flex; align-items: center; gap: 9px; min-width: 0; }
.hl-subtitle { font-size: var(--fs-12); color: var(--text-muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hl-fields { display: flex; gap: var(--sp-8); flex-wrap: wrap; }
.hl-field { display: flex; flex-direction: column; gap: 2px; min-width: 130px; }
.hl-field .hlf-label { font-size: var(--fs-11); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.hl-field .hlf-value { font-size: var(--fs-13); font-weight: 550; display: flex; align-items: center; gap: 6px; min-height: 24px; }
.hl-actions { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.hl-quick { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.editable-field { position: relative; border-radius: var(--r-sm); padding: 2px 4px; margin: -2px -4px; cursor: text; }
.editable-field::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; color: var(--text-faint); }
.editable-field:hover { background: var(--hover-layer); }
.editable-field.editable-hover { box-shadow: inset 0 0 0 1.25px var(--brand); }
.field-pop { width: 280px; padding: 12px; }

/* Guided path */
.path { margin-bottom: var(--sp-4); }
.path-track { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow-x: auto; scrollbar-width: thin; box-shadow: var(--shadow-sm); }
.path-stage { position: relative; display: flex; flex-direction: column; gap: 3px; flex: 1 0 110px; min-width: 110px; padding: 11px 14px 10px; border-right: 1px solid var(--border); cursor: pointer; transition: background var(--t-fast); }
.path-stage:last-child { border-right: 0; }
.path-stage:hover { background: var(--hover-layer); }
.path-stage .ps-label { font-size: var(--fs-11); font-weight: 650; color: var(--text-muted); letter-spacing: 0.03em; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.path-stage .ps-amount { font-size: var(--fs-12); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.path-stage.done .ps-label { color: var(--text-faint); }
.path-stage.done .ps-check { display: inline-flex; }
.path-stage.current { background: color-mix(in srgb, var(--sc) 13%, transparent); }
.path-stage.current::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--sc); border-radius: 3px 3px 0 0; animation: pathIn var(--t-slow) var(--ease); }
@keyframes pathIn { from { transform: scaleX(0.3); opacity: 0.4; } to { transform: scaleX(1); opacity: 1; } }
.path-stage .ps-check { display: none; color: var(--success); }
.path-actions { display: flex; align-items: center; gap: var(--sp-2); padding: 9px 14px; border-top: 1px dashed var(--border); background: var(--surface-alt); }
.path-guidance { font-size: var(--fs-12); color: var(--text-soft); line-height: 1.5; flex: 1; min-width: 200px; }
.path-key-fields { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: 6px; }
.pkf { display: flex; flex-direction: column; gap: 1px; }
.pkf .pkf-l { font-size: var(--fs-10); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 650; }
.pkf .pkf-v { font-size: var(--fs-12); font-weight: 600; }

/* Record tabs body */
.record-tab-body { padding-top: var(--sp-4); }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 var(--sp-8); }
.detail-section { margin-bottom: var(--sp-5); }
.detail-section-title { font-size: var(--fs-13); font-weight: 700; border-bottom: 1px solid var(--border); padding-bottom: 7px; margin-bottom: var(--sp-3); display: flex; align-items: center; gap: 8px; }
.detail-field { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--sp-3); padding: 7px 0; border-bottom: 1px dotted var(--border); align-items: baseline; min-height: 36px; }
.detail-field:last-child { border-bottom: 0; }
.df-label { font-size: var(--fs-12); color: var(--text-muted); font-weight: 550; display: flex; align-items: center; gap: 5px; }
.df-value { font-size: var(--fs-13); min-height: 20px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.formula-note { font-size: var(--fs-11); color: var(--text-faint); display: inline-flex; align-items: center; gap: 4px; }

/* Related lists */
.related-list { margin-bottom: var(--sp-5); }
.related-list .rl-body { border: 0; }
.mini-row-link { color: var(--brand); font-weight: 550; }
.rl-empty { padding: var(--sp-4); font-size: var(--fs-12); color: var(--text-muted); display: flex; align-items: center; gap: 8px; }

/* Timeline */
.timeline { position: relative; padding-left: 6px; }
.tl-item { display: flex; gap: 12px; position: relative; padding: 0 0 var(--sp-4) var(--sp-2); }
.tl-rail { position: relative; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 30px; }
.tl-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--oc) 15%, transparent); color: var(--oc); z-index: 2; }
.tl-item::before { content: ""; position: absolute; left: 20px; top: 30px; bottom: 0; width: 1.5px; background: var(--border); }
.tl-item:last-child::before { display: none; }
.tl-body { flex: 1; min-width: 0; padding-top: 2px; }
.tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-subject { font-weight: 620; font-size: var(--fs-13); }
.tl-meta { font-size: var(--fs-11); color: var(--text-muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.tl-preview { font-size: var(--fs-12); color: var(--text-soft); margin-top: 5px; line-height: 1.5; max-width: 640px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tl-actions { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.tl-day-sep { font-size: var(--fs-11); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: var(--sp-4) 0 var(--sp-2); display: flex; align-items: center; gap: 10px; }
.tl-day-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Chatter */
.chatter-composer { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-4); }
.chatter-composer textarea { border: 0; border-radius: 0; }
.chatter-composer textarea:focus { box-shadow: none; }
.chatter-composer .cc-foot { display: flex; align-items: center; gap: var(--sp-2); padding: 8px 10px; border-top: 1px solid var(--border); background: var(--surface-alt); }
.post { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-3); background: var(--surface); }
.post-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.post-body { font-size: var(--fs-13); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.post-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.post-like { display: inline-flex; gap: 5px; align-items: center; font-size: var(--fs-12); font-weight: 600; color: var(--text-muted); padding: 3px 8px; border-radius: var(--r-pill); }
.post-like:hover { background: var(--hover-layer); }
.post-like.liked { color: var(--danger); }
.comment { display: flex; gap: 9px; padding: 8px 0 0; }
.comment .c-body { background: var(--surface-alt); border-radius: var(--r-md); padding: 7px 11px; font-size: var(--fs-12); min-width: 0; }
.comment .c-meta { font-size: var(--fs-10); color: var(--text-muted); margin-top: 2px; }
.comments-wrap { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 4px; }
.comment-input { display: flex; gap: 8px; margin-top: 8px; }

/* Composer panel */
.composer { position: sticky; top: calc(var(--topbar-h) + var(--tabbar-h) + 16px); }
.composer-tabs { display: flex; gap: 2px; margin-bottom: var(--sp-3); flex-wrap: wrap; }
.composer-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; border-radius: var(--r-md); border: 1px solid var(--border); font-size: var(--fs-11); font-weight: 600; color: var(--text-muted); transition: all var(--t-fast); }
.composer-tab:hover { border-color: var(--border-strong); color: var(--text); }
.composer-tab.active { border-color: var(--brand); color: var(--brand-strong); background: var(--brand-softer); }
html[data-theme="dark"] .composer-tab.active { color: var(--brand); }
.composer-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.composer-today { display: flex; flex-direction: column; gap: 8px; }

/* Case comments */
.case-thread { display: flex; flex-direction: column; gap: 10px; }
.case-comment { display: flex; gap: 10px; }
.case-comment .cc-bubble { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 9px 12px; min-width: 0; flex: 1; }
.case-comment.mine .cc-bubble { background: var(--brand-softer); border-color: color-mix(in srgb, var(--brand) 25%, transparent); }
.case-comment .cc-author { font-size: var(--fs-12); font-weight: 650; }
.case-comment .cc-time { font-size: var(--fs-10); color: var(--text-muted); margin-left: 6px; }
.case-comment .cc-text { font-size: var(--fs-13); margin-top: 3px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

/* Line items editor */
.li-row { display: grid; grid-template-columns: minmax(140px, 2fr) 70px 96px 96px 30px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dotted var(--border); }
.li-row .li-total { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.li-head { font-size: var(--fs-10); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 700; }
.li-foot { display: flex; justify-content: flex-end; gap: var(--sp-6); padding-top: 10px; font-size: var(--fs-13); }
.li-foot .lf-total { font-size: var(--fs-16); font-weight: 700; }

/* Competitors chips */
.comp-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; background: var(--neutral-soft); border-radius: var(--r-sm); font-size: var(--fs-12); font-weight: 550; }

/* ================= Pipeline page ================= */
.pipe-head-filters { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.pipe-summary-grid { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin-bottom: var(--sp-3); }
.pipe-total-card { flex: 0 0 auto; min-width: 170px; padding: 12px 16px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); }
.pipe-total-card .ptc-label { font-size: var(--fs-10); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
.pipe-total-card .ptc-value { font-size: var(--fs-18); font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.pipe-total-card .ptc-sub { font-size: var(--fs-11); color: var(--text-faint); }

/* ================= Activities page ================= */
.act-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.act-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.act-sum-card { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; transition: border-color var(--t-fast); }
.act-sum-card:hover { border-color: var(--brand); }
.act-sum-card .asv { font-size: var(--fs-20); font-weight: 700; }
.act-sum-card.alert .asv { color: var(--danger); }

/* ================= Reports ================= */
.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }
.report-card { padding: var(--sp-4); display: flex; flex-direction: column; gap: 8px; transition: border-color var(--t-fast), transform var(--t-fast); }
.report-card:hover { border-color: var(--brand); transform: translateY(-1px); }
.report-run-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.report-row { cursor: pointer; }
.report-row:hover td { background: var(--hover-layer); }
.report-total-row td { font-weight: 700; background: var(--surface-alt); border-top: 2px solid var(--border-strong); }

/* ================= Search page ================= */
.search-facets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.search-result { display: flex; gap: 12px; padding: 13px 6px; border-bottom: 1px solid var(--border); align-items: flex-start; }
.search-result:last-child { border-bottom: 0; }
.sr-body { min-width: 0; }
.sr-title { font-size: var(--fs-14); font-weight: 620; }
.sr-sub { font-size: var(--fs-12); color: var(--text-muted); margin-top: 2px; }
.sr-field { font-size: var(--fs-12); color: var(--text-soft); margin-top: 4px; }

/* ================= Settings ================= */
.settings-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.settings-nav { position: sticky; top: calc(var(--topbar-h) + var(--tabbar-h) + 16px); display: flex; flex-direction: column; gap: 2px; }
.settings-nav .sn-item { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: var(--r-md); font-size: var(--fs-13); font-weight: 550; color: var(--text-soft); }
.settings-nav .sn-item:hover { background: var(--hover-layer); color: var(--text); text-decoration: none; }
.settings-nav .sn-item.on { background: var(--brand-soft); color: var(--brand-strong); font-weight: 650; }
html[data-theme="dark"] .settings-nav .sn-item.on { color: var(--brand); }
.theme-cards { display: flex; gap: 10px; }
.theme-card { border: 2px solid var(--border); border-radius: var(--r-lg); padding: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; width: 130px; transition: border-color var(--t-fast); }
.theme-card:hover, .theme-card.on { border-color: var(--brand); }
.theme-card .tc-preview { height: 64px; border-radius: var(--r-md); border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; }
.theme-card .tc-bar { height: 14px; }
.theme-card .tc-body { flex: 1; display: flex; }
.theme-card .tc-side { width: 26%; border-right: 1px solid rgba(128,128,128,0.2); }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 13px 0; border-bottom: 1px solid var(--border); }
.pref-row:last-child { border-bottom: 0; }
.pref-row .pr-label { font-size: var(--fs-13); font-weight: 600; }
.pref-row .pr-help { font-size: var(--fs-12); color: var(--text-muted); margin-top: 2px; max-width: 420px; }
.pref-row .pr-ctrl { flex-shrink: 0; min-width: 180px; display: flex; justify-content: flex-end; }
.user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-3); }
.user-card { display: flex; gap: 12px; padding: var(--sp-4); align-items: center; }

/* ================= Convert modal / misc ================= */
.convert-section { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-3); position: relative; background: var(--surface-alt); }
.convert-section .cs-badge { position: absolute; top: -9px; left: 12px; background: var(--elevated); padding: 0 8px; font-size: var(--fs-11); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-strong); }
.convert-section.locked { opacity: 0.75; }
.radio-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; transition: all var(--t-fast); }
.radio-row:hover { border-color: var(--border-strong); }
.radio-row.on { border-color: var(--brand); background: var(--brand-softer); }
.radio-row .rr-main { flex: 1; min-width: 0; }
.radio-row .rr-title { font-size: var(--fs-13); font-weight: 620; }
.radio-row .rr-sub { font-size: var(--fs-12); color: var(--text-muted); margin-top: 1px; }

.owner-pick-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r-md); cursor: pointer; }
.owner-pick-row:hover, .owner-pick-row.sel { background: var(--brand-softer); }

.progress-steps { display: flex; gap: 6px; align-items: center; }

/* ================= Responsive (views) ================= */
@media (max-width: 1280px) {
  .dash-card { grid-column: span 6; }
  .dash-card.span-4 { grid-column: span 6; }
  .dash-card.span-8 { grid-column: span 12; }
}
@media (max-width: 1080px) {
  .record-cols { grid-template-columns: 1fr; }
  .composer { position: static; }
  .report-run-grid { grid-template-columns: 1fr; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .kanban-col { flex-basis: 260px; }
}
@media (max-width: 860px) {
  .dash-card { grid-column: span 12; }
  .list-body { flex-direction: column; align-items: stretch; }
  .filter-panel { width: 100%; }
  .filter-panel.open-mobile { display: flex; }
  .view-page { padding: var(--sp-4) var(--sp-3) 110px; }
  .record-wrap { padding: var(--sp-3) var(--sp-3) 110px; }
  .detail-field { grid-template-columns: 118px minmax(0, 1fr); }
  .hl-fields { gap: var(--sp-4); }
  .path-stage { flex-basis: 150px; }
  .shortcut-grid { grid-template-columns: 1fr; }
  .li-row { grid-template-columns: minmax(110px, 2fr) 54px 80px 84px 26px; }
}
@media (max-width: 620px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .page-title { font-size: var(--fs-20); }
  .view-switcher { min-width: 0; flex: 1 1 auto; }
  .list-search { width: 100%; }
  .list-toolbar { gap: 6px; }
  .save-bar { left: 12px; right: 12px; transform: none; width: auto; justify-content: space-between; }
  @keyframes saveBarIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .mass-bar { top: calc(var(--topbar-h) + 8px); }
  .tbl th, .tbl td { padding: 0 7px; }
  .kanban-col { flex-basis: 240px; }
  .kpi .kpi-value { font-size: var(--fs-18); }
}