/* ==========================================================================
   USVI Advisory — Staff Dashboard
   Design tokens + layout + components
   ========================================================================== */

:root {
  /* Palette */
  --navy-900: #0d1b2a;
  --navy-800: #16263a;
  --navy-700: #1d3148;
  --navy-600: #2a425c;
  --navy-500: #3d5675;
  --navy-400: #6a7f99;
  --navy-300: #9fb0c5;
  --navy-200: #c8d3e0;
  --navy-100: #e5ebf2;
  --navy-050: #f1f4f8;

  --cream-050: #fdfcf8;
  --cream-100: #faf8f4;
  --cream-200: #f3efe6;
  --cream-300: #e9e2d1;
  --cream-400: #d8cdb2;

  --gold-700: #8a6d1f;
  --gold-600: #b8922a;
  --gold-500: #c9a13a;
  --gold-400: #d4ab4e;
  --gold-300: #e3c779;
  --gold-100: #f3e7c3;
  --gold-050: #faf2da;

  --go-700: #1f6b43;
  --go-100: #d9ead9;
  --hold-700: #8a6d1f;
  --hold-100: #f4e7c2;
  --stop-700: #8a2a2a;
  --stop-100: #f1d6d6;
  --info-700: #285e7e;
  --info-100: #d6e4ec;

  --ink-900: #121820;
  --ink-700: #40505f;
  --ink-500: #6b7a8c;
  --ink-400: #8a98a9;
  --ink-300: #b4bdc8;
  --ink-200: #d9dfe6;
  --ink-100: #eaeef2;

  --bg: var(--cream-100);
  --panel: #ffffff;
  --border: #e6dfd0;
  --border-soft: #efeadd;
  --border-strong: #d5cbb2;

  /* Type */
  --f-display: "Cormorant Garamond", "Times New Roman", serif;
  --f-ui: "Inter", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* Radii + shadow */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;
  --shadow-1: 0 1px 0 rgba(13,27,42,0.04), 0 1px 2px rgba(13,27,42,0.04);
  --shadow-2: 0 2px 4px rgba(13,27,42,0.06), 0 8px 24px rgba(13,27,42,0.08);
  --shadow-pop: 0 24px 48px -12px rgba(13,27,42,0.28), 0 2px 6px rgba(13,27,42,0.12);

  /* Density */
  --row-h: 40px;
  --side-w: 216px;
  --topbar-h: 52px;
  --subbar-h: 44px;
}

[data-density="compact"] { --row-h: 34px; }
[data-density="relaxed"] { --row-h: 48px; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--f-ui);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-900);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { height: 100%; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; }

.display { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.01em; }
.mono    { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.tnum    { font-variant-numeric: tabular-nums; }

/* ======================= App shell ======================= */

.app {
  display: grid;
  grid-template-columns: var(--side-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "brand topbar"
    "sidebar main";
  height: 100vh;
  min-width: 1180px;
}

.brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--navy-900);
  color: var(--cream-100);
}
.brand__mark {
  width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--gold-400), var(--gold-700));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}
.brand__name {
  font-family: var(--f-display);
  font-size: 17px;
  letter-spacing: 0.02em;
}
.brand__sub {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.topbar__crumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-500);
}
.topbar__crumb-current { color: var(--ink-900); font-weight: 500; }
.topbar__spacer { flex: 1; }
.topbar__search {
  display: flex; align-items: center; gap: 8px;
  background: var(--cream-100);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 6px 10px;
  min-width: 320px;
  color: var(--ink-500);
}
.topbar__search input {
  border: 0; background: transparent; outline: none;
  color: var(--ink-900);
  font-size: 13px;
  width: 100%;
}
.topbar__kbd { margin-left: auto; display: flex; gap: 4px; }
.topbar__actions { display: flex; align-items: center; gap: 6px; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink-900);
  padding: 5px 10px;
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 500;
  transition: background 0.12s, border-color 0.12s;
}
.btn:hover { background: var(--cream-050); border-color: var(--border-strong); }
.btn--primary {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--cream-100);
}
.btn--primary:hover { background: var(--navy-800); border-color: var(--navy-800); }
.btn--gold {
  background: var(--gold-600);
  border-color: var(--gold-600);
  color: #fff;
}
.btn--gold:hover { background: var(--gold-500); border-color: var(--gold-500); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--ink-700); }
.btn--ghost:hover { background: var(--cream-200); }
.btn--sm { padding: 3px 7px; font-size: 11px; }

.sidebar {
  grid-area: sidebar;
  background: var(--cream-050);
  border-right: 1px solid var(--border);
  padding: 14px 10px;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.sidebar__group { margin-bottom: 18px; }
.sidebar__label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  padding: 0 10px 6px;
}
.navitem {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--ink-700);
  cursor: pointer;
  margin-bottom: 1px;
}
.navitem:hover { background: var(--cream-200); color: var(--ink-900); }
.navitem--active {
  background: var(--navy-900);
  color: var(--cream-100);
  font-weight: 500;
}
.navitem--active:hover { background: var(--navy-800); color: var(--cream-100); }
.navitem__count {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}
.navitem--active .navitem__count { color: var(--gold-300); }

.saved-view {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  border-radius: var(--r-md);
  font-size: 12.5px;
  color: var(--ink-700);
  cursor: pointer;
}
.saved-view:hover { background: var(--cream-200); color: var(--ink-900); }
.saved-view__count {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}
.saved-view--active { color: var(--navy-900); font-weight: 500; }

.sidebar__footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.sidebar__me {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--ink-700);
}
.sidebar__me small { color: var(--ink-400); font-size: 11px; }

.main {
  grid-area: main;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ======================= Pills, chips, avatars ======================= */

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pill__dot { width: 6px; height: 6px; border-radius: 50%; }
.pill__caret { margin-left: 2px; font-size: 9px; color: var(--ink-400); }
.pill--editable { cursor: pointer; }
.pill--editable:hover { filter: brightness(0.97); }

.pill--go   { background: var(--go-100);   color: var(--go-700);  border-color: rgba(31,107,67,0.2); }
.pill--hold { background: var(--hold-100); color: var(--hold-700);border-color: rgba(138,109,31,0.2);}
.pill--stop { background: var(--stop-100); color: var(--stop-700);border-color: rgba(138,42,42,0.2); }
.pill--info { background: var(--info-100); color: var(--info-700);border-color: rgba(40,94,126,0.2); }
.pill--new  { background: var(--cream-200);color: var(--ink-700); border-color: var(--border); }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px;
  border-radius: 3px;
  background: var(--cream-200);
  color: var(--ink-700);
  font-size: 11px;
  line-height: 1.6;
  border: 1px solid var(--border-soft);
}

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.avatar--empty {
  color: var(--ink-300);
  background: transparent;
  font-weight: 400;
  font-family: var(--f-mono);
}

.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--cream-050);
  color: var(--ink-700);
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  box-shadow: 0 1px 0 var(--border);
}

/* ======================= Score bar ======================= */
.score { display: flex; align-items: center; gap: 8px; }
.score__num { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12px; width: 22px; text-align: right; }
.score__num--hi  { color: var(--go-700); }
.score__num--mid { color: var(--hold-700); }
.score__num--lo  { color: var(--stop-700); }
.score__track {
  flex: 1;
  max-width: 78px;
  height: 4px;
  background: var(--cream-300);
  border-radius: 2px;
  overflow: hidden;
}
.score__fill { height: 100%; border-radius: 2px; }
.score__fill--hi  { background: var(--go-700); }
.score__fill--mid { background: var(--gold-600); }
.score__fill--lo  { background: var(--stop-700); }

/* ======================= Page header / subbar ======================= */

.pagehead {
  display: flex; align-items: flex-end; gap: 16px;
  padding: 16px 20px 0;
}
.pagehead__title {
  font-family: var(--f-display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--navy-900);
}
.pagehead__meta {
  color: var(--ink-500);
  font-size: 12px;
  padding-bottom: 2px;
}
.pagehead__actions { margin-left: auto; display: flex; gap: 6px; padding-bottom: 2px; }

.subbar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}
.subbar__tabs { display: flex; gap: 2px; }
.subbar__tab {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: var(--r-md);
  color: var(--ink-500);
  cursor: pointer;
  white-space: nowrap;
}
.subbar__tab:hover { background: var(--cream-200); color: var(--ink-900); }
.subbar__tab--active { background: var(--navy-900); color: var(--cream-100); }
.subbar__sep { width: 1px; height: 20px; background: var(--border); margin: 0 6px; }

/* ======================= Filter row ======================= */

.filterbar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--cream-050);
  overflow-x: auto;
}
.filter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--r-md);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.filter:hover { border-color: var(--border-strong); }
.filter--active {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--cream-100);
}
.filter__val { color: var(--ink-500); }
.filter--active .filter__val { color: var(--gold-300); }
.filter__x { color: var(--ink-400); margin-left: 2px; }
.filter--active .filter__x { color: var(--gold-200); }

.filter__range {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 2px 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--r-md);
  font-size: 12px;
}
.filter__range input[type=range] { width: 100px; }

/* ======================= Inbox table ======================= */

.tbl-wrap {
  flex: 1;
  overflow: auto;
  background: var(--panel);
  position: relative;
}
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}
.tbl thead th {
  position: sticky; top: 0;
  background: var(--cream-050);
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-500);
  white-space: nowrap;
  z-index: 2;
}
.tbl thead th.sortable { cursor: pointer; user-select: none; }
.tbl thead th.sortable:hover { color: var(--navy-900); }
.tbl thead th .sortcaret { margin-left: 4px; color: var(--gold-600); }

.tbl tbody tr {
  border-bottom: 1px solid var(--border-soft);
  height: var(--row-h);
  cursor: pointer;
  transition: background 0.1s;
}
.tbl tbody tr:hover { background: var(--cream-050); }
.tbl tbody tr.is-selected { background: var(--gold-050); }
.tbl tbody tr.is-selected:hover { background: var(--gold-100); }
.tbl tbody tr.is-focused { background: var(--navy-050); box-shadow: inset 2px 0 0 var(--navy-900); }

.tbl td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
  white-space: nowrap;
  color: var(--ink-900);
}
.tbl td.td--mute { color: var(--ink-500); }
.tbl td.td--num  { font-variant-numeric: tabular-nums; }

.cell-name { display: flex; flex-direction: column; line-height: 1.3; gap: 1px; }
.cell-name__name { font-weight: 500; }
.cell-name__email { color: var(--ink-500); font-size: 11.5px; }
.cell-co { display: flex; flex-direction: column; line-height: 1.3; gap: 1px; }
.cell-co__name { font-weight: 500; }
.cell-co__title { color: var(--ink-500); font-size: 11.5px; }

.flagcount { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.flagcount--on { color: var(--stop-700); font-weight: 500; }

.check {
  width: 14px; height: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel);
}
.check--on { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.check--half { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }

.row-actions { display: flex; align-items: center; gap: 2px; opacity: 0; }
.tbl tbody tr:hover .row-actions { opacity: 1; }
.iconbtn {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  color: var(--ink-500);
}
.iconbtn:hover { background: var(--cream-200); color: var(--ink-900); }

/* Bulk action bar */
.bulkbar {
  position: sticky;
  bottom: 16px;
  margin: 0 auto;
  width: max-content;
  padding: 8px 10px 8px 14px;
  background: var(--navy-900);
  color: var(--cream-100);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px;
  z-index: 5;
}
.bulkbar__count { font-weight: 600; }
.bulkbar .btn { background: transparent; border-color: rgba(255,255,255,0.15); color: var(--cream-100); }
.bulkbar .btn:hover { background: rgba(255,255,255,0.08); }
.bulkbar__sep { width: 1px; height: 16px; background: rgba(255,255,255,0.15); }

/* ======================= Drawer (Lead detail) ======================= */

.drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(13,27,42,0.3);
  z-index: 10;
  animation: fade 0.15s;
}
@keyframes fade { from { opacity: 0; } }

.drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(1180px, 92%);
  background: var(--panel);
  box-shadow: var(--shadow-pop);
  z-index: 11;
  display: grid;
  grid-template-rows: auto 1fr;
  animation: slide 0.2s ease;
}
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }

.drawer__head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; gap: 16px;
}
.drawer__close { margin-left: auto; }

.drawer__body {
  display: grid;
  grid-template-columns: minmax(0,1fr) 380px;
  overflow: hidden;
}
.drawer__left {
  overflow-y: auto;
  padding: 20px 20px 80px;
}
.drawer__right {
  border-left: 1px solid var(--border);
  background: var(--cream-050);
  overflow-y: auto;
  padding: 16px 16px 80px;
}

.lead-head__row { display: flex; align-items: center; gap: 10px; }
.lead-head__name { font-family: var(--f-display); font-size: 26px; color: var(--navy-900); line-height: 1.1; }
.lead-head__meta { display: flex; gap: 18px; color: var(--ink-500); font-size: 12px; margin-top: 4px; flex-wrap: wrap; }
.lead-head__meta b { color: var(--ink-900); font-weight: 500; }
.lead-head__actions { margin-left: auto; display: flex; gap: 6px; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  overflow: hidden;
}
.card__head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--cream-050);
}
.card__title { font-weight: 600; font-size: 13px; color: var(--navy-900); }
.card__meta  { color: var(--ink-500); font-size: 11.5px; }
.card__actions { margin-left: auto; display: flex; gap: 6px; }
.card__body { padding: 14px; }

/* Apollo data grid */
.kv {
  display: grid;
  grid-template-columns: 130px 1fr;
  row-gap: 6px; column-gap: 14px;
  font-size: 12.5px;
}
.kv dt { color: var(--ink-500); }
.kv dd { margin: 0; color: var(--ink-900); }

/* AI analysis */
.ai-section { margin-bottom: 12px; }
.ai-section:last-child { margin-bottom: 0; }
.ai-section__label {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-700); font-weight: 600;
  margin-bottom: 4px;
}
.ai-section__body { font-size: 13px; line-height: 1.55; color: var(--ink-900); }

.ai-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: linear-gradient(90deg, #fcf6e4, #faf8f4);
  color: var(--gold-700);
  font-size: 11.5px;
  border-top: 1px solid var(--gold-100);
  border-bottom: 1px solid var(--gold-100);
}

/* Quiz tabs */
.quiz-tabs { display: flex; border-bottom: 1px solid var(--border-soft); }
.quiz-tab {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--ink-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.quiz-tab--active { color: var(--navy-900); border-bottom-color: var(--gold-600); font-weight: 500; }
.quiz-row {
  display: grid;
  grid-template-columns: 1fr auto 38px;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12.5px;
  align-items: baseline;
}
.quiz-row:last-child { border-bottom: 0; }
.quiz-row--flag { background: #fdf3f3; }
.quiz-row__q { color: var(--ink-900); }
.quiz-row__a { color: var(--ink-500); font-size: 11.5px; margin-top: 2px; }
.quiz-row__pts { font-variant-numeric: tabular-nums; color: var(--ink-700); font-weight: 500; text-align: right; }
.quiz-row__edit { text-align: right; color: var(--ink-400); cursor: pointer; font-size: 11px; }
.quiz-row__edit:hover { color: var(--navy-900); }

.quiz-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--cream-050);
  border-top: 1px solid var(--border-soft);
  font-size: 12px;
}
.quiz-foot__delta { font-weight: 500; color: var(--go-700); font-variant-numeric: tabular-nums; }
.quiz-foot__delta--down { color: var(--stop-700); }

/* Activity rail */
.rail-tabs { display: flex; gap: 2px; margin-bottom: 10px; }
.rail-tab {
  flex: 1;
  padding: 6px 10px;
  text-align: center;
  font-size: 11.5px;
  border-radius: var(--r-md);
  color: var(--ink-500);
  cursor: pointer;
}
.rail-tab--active { background: var(--panel); color: var(--navy-900); font-weight: 500; box-shadow: var(--shadow-1); border: 1px solid var(--border-soft); }

.note-composer {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px;
  margin-bottom: 12px;
}
.note-composer textarea {
  width: 100%;
  border: 0; outline: none; resize: none;
  background: transparent;
  font-size: 12.5px;
  min-height: 46px;
}
.note-composer__row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.note-composer__hint { font-size: 11px; color: var(--ink-400); }

.timeline { position: relative; padding-left: 18px; }
.timeline:before {
  content: "";
  position: absolute; top: 6px; bottom: 6px; left: 6px;
  width: 1px; background: var(--border);
}
.tl-item { position: relative; padding: 6px 0 12px; }
.tl-item__dot {
  position: absolute; left: -14px; top: 9px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--navy-400);
}
.tl-item__dot--note { border-color: var(--gold-600); }
.tl-item__dot--status { border-color: var(--info-700); }
.tl-item__dot--ai { border-color: var(--gold-600); background: var(--gold-400); }
.tl-item__head { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.tl-item__who { font-weight: 500; }
.tl-item__when { color: var(--ink-400); font-size: 11px; }
.tl-item__body { font-size: 12.5px; color: var(--ink-700); margin-top: 3px; line-height: 1.5; }
.tl-item__body .mention { color: var(--navy-900); background: var(--navy-050); padding: 0 3px; border-radius: 2px; font-weight: 500; }

.task {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 0;
  font-size: 12.5px;
  border-bottom: 1px dashed var(--border-soft);
}
.task:last-child { border-bottom: 0; }
.task--done .task__body { text-decoration: line-through; color: var(--ink-400); }
.task__meta { font-size: 11px; color: var(--ink-400); margin-top: 1px; display: flex; gap: 8px; }

/* ======================= Analytics ======================= */

.analytics {
  padding: 20px;
  overflow-y: auto;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.stat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
}
.stat__label { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.stat__value { font-family: var(--f-display); font-size: 30px; color: var(--navy-900); line-height: 1; margin-top: 6px; }
.stat__delta { font-size: 11.5px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat__delta--up { color: var(--go-700); }
.stat__delta--down { color: var(--stop-700); }

.widget-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.widget { grid-column: span 6; }

.sparkline, .barchart, .donut, .histogram { width: 100%; height: 180px; display: block; }

.funnel { display: flex; align-items: stretch; gap: 4px; padding: 14px; }
.funnel__step { flex: 1; position: relative; }
.funnel__bar {
  height: 84px;
  background: var(--navy-900);
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%);
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 600;
}
.funnel__step:nth-child(2) .funnel__bar { background: var(--navy-700); }
.funnel__step:nth-child(3) .funnel__bar { background: var(--navy-500); }
.funnel__step:nth-child(4) .funnel__bar { background: var(--gold-600); }
.funnel__step:nth-child(5) .funnel__bar { background: var(--gold-700); }
.funnel__label { font-size: 11px; color: var(--ink-500); text-align: center; margin-top: 6px; }
.funnel__rate  { font-size: 10.5px; color: var(--ink-400); text-align: center; margin-top: 2px; letter-spacing: 0.08em; }

/* ======================= Settings + kanban + chat ======================= */

.settings { padding: 20px; overflow-y: auto; }
.settings .card { margin-bottom: 16px; }
.settings-grid { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
.settings-nav { position: sticky; top: 0; }
.settings-nav__item {
  padding: 7px 10px;
  font-size: 12.5px;
  color: var(--ink-700);
  border-radius: var(--r-md);
  cursor: pointer;
}
.settings-nav__item--active { background: var(--cream-200); color: var(--navy-900); font-weight: 500; }
.usage { display: flex; align-items: center; gap: 10px; }
.usage__bar { flex: 1; height: 4px; background: var(--cream-300); border-radius: 2px; overflow: hidden; }
.usage__fill { height: 100%; background: var(--gold-600); }
.usage__fill--warn { background: var(--stop-700); }

.kanban { display: flex; gap: 10px; padding: 16px 20px; overflow-x: auto; flex: 1; }
.kcol { flex: 0 0 280px; background: var(--cream-050); border: 1px solid var(--border); border-radius: var(--r-lg); display: flex; flex-direction: column; max-height: 100%; }
.kcol__head { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 8px; }
.kcol__title { font-weight: 600; font-size: 12.5px; color: var(--navy-900); }
.kcol__count { margin-left: auto; font-size: 11px; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.kcol__body { padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.kcard {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 10px; font-size: 12px; cursor: pointer;
}
.kcard:hover { border-color: var(--border-strong); }
.kcard__name { font-weight: 500; margin-bottom: 2px; }
.kcard__co { color: var(--ink-500); font-size: 11.5px; margin-bottom: 6px; }
.kcard__foot { display: flex; align-items: center; gap: 6px; justify-content: space-between; }

.sla {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.sla--over { color: var(--stop-700); font-weight: 500; }
.sla--warn { color: var(--hold-700); }

/* Ask DB panel */
.askdb { display: grid; grid-template-rows: 1fr auto; height: 100%; padding: 20px; gap: 12px; overflow: hidden; }
.askdb__scroll { overflow-y: auto; padding-right: 6px; }
.askdb__msg {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px; margin-bottom: 12px; font-size: 13px;
}
.askdb__msg--user { background: var(--navy-900); color: var(--cream-100); border-color: var(--navy-900); max-width: 520px; margin-left: auto; }
.askdb__msg .interpreted { font-size: 11.5px; color: var(--ink-400); margin-bottom: 8px; letter-spacing: 0.02em; }
.askdb__msg .interpreted b { color: var(--gold-700); font-family: var(--f-mono); font-weight: 500; padding: 0 4px; background: var(--gold-050); border-radius: 3px; }

.askdb__composer {
  display: flex; gap: 8px; align-items: flex-end;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px;
}
.askdb__composer textarea {
  flex: 1; border: 0; outline: none; resize: none; background: transparent;
  font-size: 13px; min-height: 40px; max-height: 120px;
}
.askdb__suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

/* ======================= Misc ======================= */

.meter-bar {
  display: inline-block;
  height: 6px; width: 72px;
  background: var(--cream-300);
  border-radius: 2px;
  overflow: hidden;
  vertical-align: middle;
}
.meter-bar__fill { display: block; height: 100%; background: var(--navy-500); }

.toast {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  padding: 8px 14px;
  background: var(--navy-900);
  color: var(--cream-100);
  border-radius: var(--r-md);
  font-size: 12.5px;
  z-index: 100;
  box-shadow: var(--shadow-pop);
}

/* Tweaks panel */
.tweaks {
  position: fixed; right: 18px; bottom: 18px;
  width: 280px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  z-index: 50;
  padding: 14px;
}
.tweaks__title { font-family: var(--f-display); font-size: 16px; color: var(--navy-900); margin-bottom: 10px; }
.tweaks__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 12px; }
.tweaks__row label { color: var(--ink-700); }
.tweaks__seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.tweaks__seg button { padding: 3px 8px; font-size: 11px; color: var(--ink-700); }
.tweaks__seg button.on { background: var(--navy-900); color: var(--cream-100); }

/* Popover menu */
.menu {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: 4px;
  min-width: 180px;
  font-size: 12.5px;
}
.menu__item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-900);
}
.menu__item:hover { background: var(--cream-200); }
.menu__item--danger { color: var(--stop-700); }
.menu__label { font-size: 10.5px; color: var(--ink-400); padding: 6px 8px 2px; text-transform: uppercase; letter-spacing: 0.1em; }
.menu__sep { height: 1px; background: var(--border-soft); margin: 4px 0; }