/* ═══════════════════════════════════════════════════════════════
   TrueNorth Council — Editorial v3
   Full spec implementation per Andre's 2026-05-03 brief.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

/* ── Tokens ── */
:root {
  --bg:     #FBF9F4;
  --bg2:    #F5F2EB;
  --card:   #FFFFFF;
  --card-h: #FDFCF9;
  --border: #E8E2D4;
  --bord-s: #EFE9DE;
  --bord-f: #1F4E4A;

  --t1: #1A1A1A;
  --t2: #5C5751;
  --t3: #9B9489;

  --teal:   #1F4E4A;
  --teal-d: rgba(31,78,74,.08);
  --teal-m: rgba(31,78,74,.15);
  --red:    #7A3F35;
  --red-d:  rgba(122,63,53,.08);

  /* Override framework vars */
  --text:   #1A1A1A;
  --text-d: #5C5751;
  --text-m: #9B9489;
  --blue:   #1F4E4A;  --blue-d:  rgba(31,78,74,.08);
  --gold:   #1F4E4A;  --gold-d:  rgba(31,78,74,.06);
  --green:  #1F4E4A;  --green-d: rgba(31,78,74,.08);
  --yellow: #7A3F35;  --yellow-d:rgba(122,63,53,.06);
  --purple: #1F4E4A;  --purple-d:rgba(31,78,74,.08);
  --accent-primary: #1F4E4A;
  --accent-gold: #1F4E4A;

  --sidebar:    #F4EFE3;
  --sidebar-bg: #F4EFE3;
  --sw:    224px;
  --th:    52px;
  --radius:  6px;
  --radius-s:4px;
}

* { box-sizing: border-box; background-image: none !important; }

body {
  font-family: 'Inter', sans-serif !important;
  background: var(--bg) !important;
  color: var(--t1) !important;
  -webkit-font-smoothing: antialiased;
}

/* ════════════════════════════════════════════
   §1  SIDEBAR — light cream, Lucide icons
   ════════════════════════════════════════════ */
#sidebar {
  background: #F4EFE3 !important;
  border-right: 1px solid var(--border) !important;
  width: var(--sw) !important;
}
#sidebar.collapsed { width: 52px !important; }

.sidebar-brand {
  border-bottom: 1px solid var(--border) !important;
  padding: 16px 18px 14px !important;
}
/* Wordmark: Fraunces 500, 16px, teal circle mark */
.brand-monogram {
  width: 28px !important; height: 28px !important;
  background: var(--teal) !important;
  border: none !important;
  border-radius: 50% !important;
  color: #F0EDE6 !important;
  font-family: 'Fraunces', serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
.brand-name {
  font-family: 'Fraunces', serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--t1) !important;
  letter-spacing: 0 !important;
}
.brand-sub { display: none !important; }

.nav-item {
  color: var(--t2) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  border-radius: 5px !important;
  padding: 8px 10px !important;
  gap: 10px !important;
}
.nav-item:hover { background: rgba(31,78,74,.06) !important; color: var(--teal) !important; }
.nav-item.active {
  background: var(--teal-d) !important;
  color: var(--teal) !important;
  font-weight: 500 !important;
}
.nav-item.active::before { background: var(--teal) !important; width: 2px !important; }
.nav-icon { color: inherit !important; font-size: 15px !important; }

.sidebar-user { border-top: 1px solid var(--border) !important; }
.user-avatar {
  background: var(--teal-d) !important;
  border: 1px solid var(--border) !important;
  color: var(--teal) !important;
  font-weight: 600 !important;
}
.user-name { color: var(--t1) !important; font-size: 12px !important; }
.user-role { color: var(--t3) !important; font-size: 10px !important; }
.ch-badge { background: var(--red) !important; }

/* ════════════════════════════════════════════
   §2  TOPBAR
   ════════════════════════════════════════════ */
#topbar {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.topbar-search input {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  color: var(--t1) !important;
  font-size: 12px !important;
}
.topbar-search input:focus { border-color: var(--teal) !important; }
.topbar-search input::placeholder { color: var(--t3) !important; }
.btn-new { background: var(--teal) !important; color: #F0EDE6 !important; border-radius: 4px !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .04em !important; }
#notion-sync-btn, #theme-toggle { background: none !important; border: 1px solid var(--border) !important; color: var(--t3) !important; border-radius: 4px !important; }
#notion-sync-btn:hover, #theme-toggle:hover { border-color: var(--teal) !important; color: var(--teal) !important; }

#channel-bar .channel-btn { background: none !important; border: 1px solid var(--border) !important; color: var(--t3) !important; border-radius: 4px !important; font-size: 11px !important; }
#channel-bar .channel-btn.active { background: var(--teal) !important; border-color: var(--teal) !important; color: #F0EDE6 !important; }

/* ════════════════════════════════════════════
   §3  PAGE AREA
   ════════════════════════════════════════════ */
#main { margin-left: var(--sw) !important; background: var(--bg) !important; }
#sidebar.collapsed ~ #main { margin-left: 52px !important; }
#content { background: var(--bg) !important; padding: 48px !important; }

/* ── Page title — Fraunces 500 28px ── */
.page-title {
  font-family: 'Fraunces', serif !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  color: var(--t1) !important;
  letter-spacing: -.02em !important;
  line-height: 1.1 !important;
}
.page-sub { font-size: 13px !important; font-weight: 400 !important; color: var(--t3) !important; margin-top: 4px !important; font-family: 'Inter', sans-serif !important; }

/* ════════════════════════════════════════════
   §4  CARDS — spec exact
   ════════════════════════════════════════════ */
.card, .firm-card, .followup-card, .attention-item,
.stat-card, .insight-card, .sync-section, .db-card,
.feed-item, .ws-contact, .email-item {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
  transition: border-color .15s ease !important;
  transform: none !important;
}
.card:hover, .firm-card:hover, .followup-card:hover, .attention-item:hover,
.feed-item:hover, .ws-contact:hover {
  border-color: var(--teal) !important;
  background: var(--card) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Card text hierarchy */
.card-title, .fc-name, .fu-task, .act-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--t1) !important;
  line-height: 1.25 !important;
  font-family: 'Inter', sans-serif !important;
}
.card-meta, .fc-notes, .act-meta, .fu-meta, .act-summary {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--t2) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-style: normal !important;
}
/* Recency — quietest, tertiary, no pill */
.days-pill, .days-fresh, .days-warm, .days-cold {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--t3) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-variant-numeric: tabular-nums !important;
}
/* Priority: left rule only */
.pri-high   { border-left: 2px solid var(--red) !important; padding-left: 12px !important; }
.pri-medium { border-left: 2px solid var(--t3) !important; padding-left: 12px !important; }
.pri-low    { border-left: 1px solid var(--bord-s) !important; padding-left: 13px !important; }

/* ── Category glyphs (●◉○◐) — shape not color ── */
.badge, .badge-blue, .badge-gold, .badge-green,
.badge-red, .badge-purple, .badge-gray {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: none !important;
  border: none !important;
  color: var(--t2) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  letter-spacing: .01em !important;
}
/* Prospect: ● filled solid teal */
.badge-blue::before  { content: '●'; color: var(--teal); font-size: 7px; line-height: 1; }
/* Client: ◉ with inner ring */
.badge-green::before { content: '◉'; color: var(--teal); font-size: 9px; line-height: 1; }
/* Vendor: ○ outlined */
.badge-gold::before  { content: '○'; color: var(--teal); font-size: 9px; line-height: 1; }
/* Sourcing: ◐ half-filled */
.badge-purple::before { content: '◐'; color: var(--teal); font-size: 9px; line-height: 1; }
/* Dead/other: dim dash */
.badge-gray::before  { content: '–'; color: var(--t3); font-size: 9px; line-height: 1; }

/* Tasks badge */
.tasks-badge { font-size: 11px !important; font-weight: 600 !important; color: var(--red) !important; background: none !important; border: none !important; padding: 0 !important; }
.tasks-badge::before { content: ''; }

/* ════════════════════════════════════════════
   §5  STATS / NUMBERS
   ════════════════════════════════════════════ */
.stat-val { font-family: 'Fraunces', serif !important; font-size: 36px !important; font-weight: 400 !important; color: var(--t1) !important; }
.stat-lbl { font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .08em !important; color: var(--t3) !important; margin-top: 6px !important; }
.stat-card { border-top: 2px solid var(--teal) !important; }

/* ════════════════════════════════════════════
   §6  BOARD — 24px gap, newspaper headers
   ════════════════════════════════════════════ */
.board {
  background: transparent !important;
  border-top: 1.5px solid var(--t1) !important;
  border-radius: 0 !important;
  padding: 16px 0 0 !important;
  gap: 24px !important;
}
.board-col { gap: 8px !important; }
.board-col .cards { background: none !important; padding: 0 !important; border-radius: 0 !important; gap: 8px !important; }

/* Column header — newspaper section head */
.board-col-hdr {
  background: none !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 0 0 8px !important;
  margin-bottom: 14px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--t3) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
}
.col-count { background: none !important; color: var(--t3) !important; font-size: 11px !important; font-weight: 400 !important; padding: 0 !important; letter-spacing: 0 !important; }

/* Inactive + Dead: recede + collapse */
.board-col[data-stage*="Inactive"],
.board-col[data-stage*="Dead"] { opacity: .55 !important; }
.board-col[data-stage*="Inactive"]:hover,
.board-col[data-stage*="Dead"]:hover { opacity: .75 !important; }
.board-col[data-stage*="Inactive"] .board-col-hdr,
.board-col[data-stage*="Dead"] .board-col-hdr { cursor: pointer !important; }
.board-col .cards.collapsed { max-height: 0 !important; overflow: hidden !important; }
.board-col .cards.expanded { max-height: 9999px !important; }
.board-col[data-stage*="Inactive"] .board-col-hdr::after,
.board-col[data-stage*="Dead"] .board-col-hdr::after {
  content: attr(data-count) " items";
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--t3);
  font-style: italic;
  text-transform: none;
}

/* ════════════════════════════════════════════
   §7  SECTIONS + TABLES
   ════════════════════════════════════════════ */
.section-header { border-bottom: 1px solid var(--border) !important; padding-bottom: 6px !important; margin-bottom: 12px !important; }
.section-title { font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .08em !important; color: var(--t3) !important; }
.section-action { color: var(--teal) !important; font-size: 11px !important; }

th { font-family: 'Inter', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .08em !important; color: var(--t3) !important; border-bottom: 1.5px solid var(--t1) !important; background: none !important; padding: 8px 14px !important; }
td { font-size: 13px !important; border-bottom-color: var(--bord-s) !important; color: var(--t1) !important; }
tr:hover td { background: var(--bg2) !important; }

/* ════════════════════════════════════════════
   §8  INPUTS + BUTTONS
   ════════════════════════════════════════════ */
input, select, textarea, .te-input, .te-textarea, .pc-select {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  color: var(--t1) !important;
  font-family: 'Inter', sans-serif !important;
}
input:focus, select:focus, textarea:focus { border-color: var(--teal) !important; outline: none !important; }
input::placeholder, textarea::placeholder { color: var(--t3) !important; }

.btn { border-radius: 4px !important; font-size: 11px !important; letter-spacing: .03em !important; box-shadow: none !important; }
.btn:hover { transform: none !important; opacity: .82 !important; }
.btn-primary { background: var(--teal) !important; color: #F0EDE6 !important; border: none !important; }
.btn-ghost { background: none !important; border: 1px solid var(--border) !important; color: var(--t2) !important; }
.btn-ghost:hover { border-color: var(--teal) !important; color: var(--teal) !important; opacity: 1 !important; }
.btn-success { background: var(--teal) !important; color: #F0EDE6 !important; }
.btn-danger { background: none !important; border: 1px solid var(--red) !important; color: var(--red) !important; }
.btn-gold { background: var(--teal) !important; color: #F0EDE6 !important; }

.pill { border-color: var(--border) !important; color: var(--t2) !important; border-radius: 3px !important; font-size: 11px !important; }
.pill.active, .pill.active-gold, .pill.active-green, .pill.active-blue, .pill.active-red {
  background: var(--teal-d) !important; border-color: var(--teal) !important; color: var(--teal) !important;
}

/* ════════════════════════════════════════════
   §9  PANELS + MODALS
   ════════════════════════════════════════════ */
.side-panel, .task-editor { background: var(--card) !important; border-left: 1px solid var(--border) !important; box-shadow: none !important; }
.sp-header, .sp-tabs, .te-actions { background: var(--card) !important; border-color: var(--bord-s) !important; }
.sp-title { font-family: 'Fraunces', serif !important; font-size: 18px !important; font-weight: 400 !important; color: var(--t1) !important; }
.sp-tab { font-size: 11px !important; font-weight: 500 !important; letter-spacing: .04em !important; color: var(--t3) !important; text-transform: uppercase !important; }
.sp-tab.active { color: var(--teal) !important; border-bottom-color: var(--teal) !important; }
.te-title-input { font-family: 'Fraunces', serif !important; font-size: 22px !important; font-weight: 400 !important; color: var(--t1) !important; }
#modal { background: var(--card) !important; border: 1px solid var(--border) !important; box-shadow: 0 4px 24px rgba(0,0,0,.06) !important; border-radius: 6px !important; }
.modal-hdr h2 { font-family: 'Fraunces', serif !important; font-weight: 400 !important; }
#panel-overlay, #modal-overlay { background: rgba(251,249,244,.6) !important; backdrop-filter: blur(2px) !important; }
#popup-card { background: var(--card) !important; border: 1px solid var(--border) !important; box-shadow: 0 4px 20px rgba(0,0,0,.07) !important; border-radius: 6px !important; }

/* ════════════════════════════════════════════
   §10  QUICK FOLLOW-UP TRAY — cream, teal save
   ════════════════════════════════════════════ */
#fu-tray-btn { background: var(--teal) !important; color: #F0EDE6 !important; box-shadow: 0 2px 8px rgba(31,78,74,.25) !important; }
#fu-quick-tray { background: var(--card) !important; border: 1px solid var(--border) !important; box-shadow: 0 4px 20px rgba(0,0,0,.06) !important; }
.fu-tray-header { background: var(--bg2) !important; border-bottom: 1px solid var(--border) !important; }
.fu-tray-header span { font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .08em !important; color: var(--t3) !important; }
.fu-drop-zone { border-color: var(--border) !important; color: var(--t3) !important; font-size: 11px !important; font-style: italic !important; }
.fu-drop-zone.drag-over { border-color: var(--teal) !important; background: var(--teal-d) !important; color: var(--teal) !important; }

/* ════════════════════════════════════════════
   §11  MISC
   ════════════════════════════════════════════ */
.act-icon { background: var(--bg2) !important; }
.act-takeaway { color: var(--teal) !important; font-size: 12px !important; }
.followup-card.overdue { border-left: 2px solid var(--red) !important; }
.overdue-label { color: var(--red) !important; }
.we-owe .owed-col-hdr { color: var(--red) !important; border-color: var(--red) !important; }
.they-owe .owed-col-hdr { color: var(--teal) !important; border-color: var(--teal) !important; }
a { color: var(--teal) !important; }
.email-link { color: var(--teal) !important; }
.drop-zone { border-color: var(--border) !important; background: transparent !important; }
.drop-zone:hover, .drop-zone.drag-over { border-color: var(--teal) !important; background: var(--teal-d) !important; }
.board-col.drop-target > .cards { outline: 2px dashed var(--teal) !important; outline-offset: 2px !important; background: var(--teal-d) !important; }
.ai-loading { color: var(--t3) !important; }
.ai-loading::before { border-color: var(--border) !important; border-top-color: var(--teal) !important; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Dark header blocks in feed → match editorial */
[style*="background:#060e18"], [style*="background: #060e18"],
[style*="background:#06101c"], [style*="background: #06101c"] {
  background: var(--bg2) !important;
  border-radius: 0 !important;
}
[style*="color:#4a6a8a"], [style*="color: #4a6a8a"] {
  color: var(--t3) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* Nav icon overrides */
.nav-icon { font-style: normal !important; }

/* Lucide icons in nav */
.nav-icon svg { width: 15px; height: 15px; stroke-width: 1.75; vertical-align: middle; }
.nav-item.active .nav-icon svg { stroke: var(--teal); }
.nav-item:hover .nav-icon svg { stroke: var(--teal); }
.nav-item .nav-icon svg { stroke: var(--t2); }

/* ═══════════════════════════
   ENFORCED RULES §10
   ═══════════════════════════ */

/* No shadows anywhere */
* { box-shadow: none !important; }

/* No gradients anywhere */
*, *::before, *::after { background-image: none !important; }

/* No blur / glassmorphism */
* { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* No animation beyond 150ms */
* { animation-duration: 0ms !important; }
.card, .firm-card, .followup-card, .nav-item, .btn, .btn-new,
.channel-btn, .pill, input, select, .side-panel, .task-editor,
#fu-quick-tray, #popup-card {
  transition-duration: 150ms !important;
  transition-property: border-color, color, background-color, opacity !important;
}
.side-panel, .task-editor { transition: transform 150ms ease !important; }

/* Panel overlays — no blur */
#panel-overlay, #modal-overlay { backdrop-filter: none !important; background: rgba(26,26,24,.2) !important; }

/* Single accent — stamp out any remaining color deviations */
[style*="color:var(--blue)"]   { color: var(--teal) !important; }
[style*="color:#3b82f6"]       { color: var(--teal) !important; }
[style*="color:#a855f7"]       { color: var(--t2) !important; }
[style*="color:#eab308"]       { color: var(--t2) !important; }
[style*="color:#22c55e"]       { color: var(--teal) !important; }
[style*="color:#c9a84c"]       { color: var(--teal) !important; }
[style*="background:#1e6af0"]  { background: var(--teal) !important; }
[style*="background:#c9a84c"]  { background: var(--teal) !important; }

/* Brand mark — compass */
.brand-mark { width: 28px; height: 28px; flex-shrink: 0; }
.brand-name {
  font-family: "Fraunces", serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #DDD8CE !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  letter-spacing: .01em !important;
}