/* Terracore Financing Bot — UI Flow Architecture
 * Shared styles for: index.html, supplier.html, financier.html,
 * buyer.html, system-view.html
 *
 * CSS class .d (e.g. dot-d, persona-banner.d, step-num.d) is legacy
 * naming from when the supplier persona was called "Distributor".
 * It now refers to the Supplier persona; .s is kept as a synonym.
 */
:root {
  /* WhatsApp design tokens (current Meta UI, 2025) */
  --wa-green: #008069;
  --wa-green-dark: #005C4B;
  --wa-green-bubble: #D9FDD3;
  --wa-bg-chat: #EFEAE2;
  --wa-bg-input: #F0F2F5;
  --wa-bg-system: rgba(225, 245, 254, 0.92);
  --wa-text: #111B21;
  --wa-text-muted: #667781;
  --wa-text-tick: #8696A0;
  --wa-text-read: #53BDEB;
  --wa-divider: #E9EDEF;
  --wa-button-blue: #027EB5;
  --wa-shadow: 0 1px 0.5px rgba(11,20,26,.13);

  /* Persona accents */
  --p-supplier: #0B5FFF;
  --p-supplier-soft: #E7EEFF;
  --p-financier: #B8860B;
  --p-financier-soft: #FFF5DC;
  --p-buyer: #7C3AED;
  --p-buyer-soft: #F1EBFF;

  /* Doc */
  --doc-bg: #F8FAFC;
  --doc-card: #FFFFFF;
  --doc-border: #E2E8F0;
  --doc-text: #0F172A;
  --doc-text-muted: #64748B;
  --doc-accent: #0F172A;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--doc-bg);
  color: var(--doc-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Layout */
.layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
nav.sidebar {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  border-right: 1px solid var(--doc-border);
  background: #FFFFFF;
  padding: 28px 22px;
  font-size: 14px;
}
nav.sidebar .brand { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; margin-bottom: 6px; }
nav.sidebar .brand-sub { font-size: 12px; color: var(--doc-text-muted); margin-bottom: 22px; }
nav.sidebar h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--doc-text-muted); margin: 18px 0 8px; font-weight: 600; }
nav.sidebar ul { list-style: none; padding: 0; margin: 0; }
nav.sidebar li a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  color: var(--doc-text); text-decoration: none;
  font-weight: 500;
  transition: background 0.12s ease;
}
nav.sidebar li a:hover { background: #F1F5F9; }
nav.sidebar li a .dot { width: 8px; height: 8px; border-radius: 99px; flex-shrink: 0; }
.dot-d { background: var(--p-supplier); }
.dot-s { background: var(--p-supplier); }
.dot-f { background: var(--p-financier); }
.dot-b { background: var(--p-buyer); }

main { padding: 48px 56px 120px; max-width: 1480px; }
section { margin-bottom: 80px; }

h1 { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; }
h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 6px; padding-top: 8px; }
h3 { font-size: 18px; font-weight: 600; margin: 0 0 10px; }
h4 { font-size: 14px; font-weight: 600; margin: 0 0 6px; }
p  { margin: 0 0 12px; }
.lede { font-size: 17px; color: var(--doc-text-muted); max-width: 820px; }
.muted { color: var(--doc-text-muted); }

.section-head { margin-bottom: 28px; }
.section-head .crumb { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--doc-text-muted); margin-bottom: 6px; font-weight: 600; }

/* Persona section header */
.persona-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 24px; border-radius: 16px;
  margin-bottom: 28px;
}
.persona-banner.d { background: var(--p-supplier-soft); border-left: 5px solid var(--p-supplier); }
.persona-banner.s { background: var(--p-supplier-soft); border-left: 5px solid var(--p-supplier); }
.persona-banner.f { background: var(--p-financier-soft); border-left: 5px solid var(--p-financier); }
.persona-banner.b { background: var(--p-buyer-soft); border-left: 5px solid var(--p-buyer); }
.persona-banner h2 { font-size: 22px; margin: 0; }
.persona-banner p { margin: 4px 0 0; font-size: 14px; color: var(--doc-text-muted); }

/* Flow strip — horizontal scroll of phone screens.
 * Free-scroll (no snap) so the user can drag the scrollbar or two-finger
 * swipe without the snap "fighting" them halfway. */
.flow-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(360px, 380px);
  gap: 28px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px 24px 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: #94A3B8 #F1F5F9;
  scrollbar-width: auto;
}
.flow-strip::-webkit-scrollbar {
  height: 14px;
  background: transparent;
}
.flow-strip::-webkit-scrollbar-track {
  background: #F1F5F9;
  border-radius: 8px;
  margin: 0 24px;
}
.flow-strip::-webkit-scrollbar-thumb {
  background: #94A3B8;
  border-radius: 8px;
  border: 3px solid #F1F5F9;
  background-clip: padding-box;
}
.flow-strip::-webkit-scrollbar-thumb:hover {
  background: #64748B;
  background-clip: padding-box;
  border: 3px solid #F1F5F9;
}

.flow-step {
  display: flex; flex-direction: column; gap: 14px;
}
.flow-step .step-meta { display: flex; align-items: baseline; gap: 8px; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 99px;
  background: var(--doc-accent); color: white; font-size: 13px; font-weight: 700;
}
.step-num.d { background: var(--p-supplier); }
.step-num.s { background: var(--p-supplier); }
.step-num.f { background: var(--p-financier); }
.step-num.b { background: var(--p-buyer); }
.step-title { font-size: 15px; font-weight: 600; }
.step-tag {
  display: inline-block; font-size: 11px; padding: 2px 8px;
  background: #F1F5F9; color: var(--doc-text-muted); border-radius: 99px;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.step-tag.brd { background: #FEF3C7; color: #92400E; }
.step-tag.ms { background: #DBEAFE; color: #1E40AF; }

.commentary {
  background: var(--doc-card); border: 1px solid var(--doc-border); border-radius: 12px;
  padding: 14px 16px; font-size: 13px; line-height: 1.5;
}
.commentary h4 { font-size: 12px; color: var(--doc-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.commentary ul { margin: 4px 0 0; padding-left: 18px; }
.commentary li { margin-bottom: 4px; }
.commentary strong { color: var(--doc-text); }

/* ===========================================================
   PHONE FRAME (iPhone-style, simplified, no notch shadow)
   =========================================================== */
.phone {
  width: 360px; height: 720px;
  border-radius: 44px;
  background: #0F0F10;
  padding: 12px;
  box-shadow: 0 20px 50px rgba(15,23,42,0.14), 0 6px 14px rgba(15,23,42,0.08);
  position: relative;
}
.phone-screen {
  width: 100%; height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: var(--wa-bg-chat);
  position: relative;
  display: flex; flex-direction: column;
}
.phone-notch {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 28px; border-radius: 99px; background: #0F0F10;
  z-index: 10;
}

/* iOS-style status bar inside the screen */
.ios-status {
  position: relative; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px 6px;
  font-size: 13px; font-weight: 600;
  background: var(--wa-green);
  color: #FFFFFF;
}
.ios-status .right { display: flex; align-items: center; gap: 4px; }
.ios-status svg { width: 14px; height: 14px; }

/* WhatsApp chat header */
.wa-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 12px;
  background: var(--wa-green);
  color: white;
}
.wa-header .back svg { width: 22px; height: 22px; fill: white; }
.wa-header .avatar {
  width: 38px; height: 38px; border-radius: 99px;
  background: linear-gradient(135deg, #FFFFFF, #E2E8F0);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: var(--wa-green-dark);
  overflow: hidden;
  flex-shrink: 0;
}
.wa-header .avatar.brand {
  background: linear-gradient(135deg, #005C4B, #003D31);
  color: #FFFFFF;
}
.wa-header .meta { flex: 1; min-width: 0; }
.wa-header .name { font-size: 15px; font-weight: 600; line-height: 1.2; display: flex; align-items: center; gap: 4px; }
.wa-header .verified-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 99px; background: white; color: var(--wa-green);
  font-size: 9px; font-weight: 900; flex-shrink: 0;
}
.wa-header .status { font-size: 11px; opacity: 0.85; line-height: 1.2; }
.wa-header .icons { display: flex; gap: 14px; }
.wa-header .icons svg { width: 20px; height: 20px; fill: white; }

/* Chat doodle background */
.wa-chat {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px 8px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g fill='%23D6CDB6' fill-opacity='0.35'><circle cx='30' cy='30' r='1.5'/><circle cx='80' cy='60' r='1.5'/><circle cx='140' cy='40' r='1.5'/><circle cx='180' cy='80' r='1.5'/><circle cx='50' cy='110' r='1.5'/><circle cx='110' cy='130' r='1.5'/><circle cx='160' cy='160' r='1.5'/><circle cx='30' cy='180' r='1.5'/><circle cx='90' cy='190' r='1.5'/></g></svg>"),
    var(--wa-bg-chat);
  display: flex; flex-direction: column; gap: 6px;
}

/* System bubble (date pill / encryption notice) */
.wa-system {
  align-self: center;
  background: var(--wa-bg-system);
  color: #1F4E5F;
  font-size: 11.5px;
  padding: 5px 12px;
  border-radius: 8px;
  margin: 4px 0;
  text-align: center;
  box-shadow: 0 1px 1px rgba(11,20,26,0.06);
  max-width: 80%;
}
.wa-system.warn { background: #FFF8C4; color: #6E5500; }

/* Bubble */
.wa-bubble {
  max-width: 80%;
  padding: 6px 8px 5px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--wa-text);
  line-height: 1.35;
  box-shadow: var(--wa-shadow);
  position: relative;
  word-wrap: break-word;
}
.wa-bubble.in {
  background: #FFFFFF;
  align-self: flex-start;
  border-top-left-radius: 0;
}
.wa-bubble.out {
  background: var(--wa-green-bubble);
  align-self: flex-end;
  border-top-right-radius: 0;
}
.wa-bubble .b-time {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; color: var(--wa-text-muted);
  float: right; margin: 6px 0 -2px 8px;
  line-height: 1;
}
.wa-bubble .b-time svg { width: 14px; height: 11px; }
.b-time .tick-read { color: var(--wa-text-read); }
.b-time .tick-sent { color: var(--wa-text-tick); }

.b-text { white-space: pre-wrap; }
.b-text strong { font-weight: 700; }
.b-text em { font-style: italic; color: var(--wa-text-muted); }
.b-text code {
  background: rgba(0,0,0,0.05); padding: 0 4px; border-radius: 3px;
  font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px;
}
.b-text .mono {
  font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13px;
  letter-spacing: 0.02em;
}

/* Quoted reply within a bubble */
.wa-quote {
  border-left: 3px solid var(--wa-green);
  background: rgba(6,95,70,0.06);
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: 12.5px;
}
.wa-quote .q-name { color: var(--wa-green-dark); font-weight: 600; font-size: 12px; }
.wa-quote .q-text { color: var(--wa-text-muted); }

/* Document attachment card */
.wa-doc {
  display: flex; align-items: center; gap: 10px;
  background: rgba(15,23,42,0.05);
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 4px;
}
.wa-doc .doc-icon {
  width: 36px; height: 36px;
  background: #E0F2EF;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--wa-green-dark); font-weight: 700; font-size: 11px;
}
.wa-doc .doc-meta { flex: 1; min-width: 0; }
.wa-doc .doc-name { font-size: 13px; font-weight: 500; color: var(--wa-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-doc .doc-size { font-size: 11px; color: var(--wa-text-muted); }

/* Image attachment in bubble */
.wa-image {
  width: 100%; height: 160px; border-radius: 6px;
  background-size: cover; background-position: center;
  margin-bottom: 4px;
}
.wa-image.waybill {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 50%, #F59E0B 100%);
  position: relative;
}
.wa-image.waybill::after {
  content: "📦 WAYBILL — INV-23"; color: rgba(0,0,0,0.7);
  position: absolute; bottom: 8px; left: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
.wa-image.invoice {
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 50%, #60A5FA 100%);
  position: relative;
}
.wa-image.invoice::after {
  content: "🧾 PRIME GOODS — INVOICE INV-23"; color: rgba(0,0,0,0.75);
  position: absolute; bottom: 8px; left: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
.wa-image.ticket {
  background: linear-gradient(135deg, #ECFCCB 0%, #BEF264 50%, #65A30D 100%);
  position: relative;
}
.wa-image.ticket::after {
  content: "⚖️ WEIGHBRIDGE TICKET WB-2841";
  color: rgba(0,0,0,0.78);
  position: absolute; bottom: 8px; left: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
.wa-image.receipt {
  background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 50%, #4ADE80 100%);
  position: relative;
}
.wa-image.receipt::after {
  content: "✅ PAYMENT RECEIPT"; color: rgba(0,0,0,0.75);
  position: absolute; bottom: 8px; left: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}

/* Interactive reply buttons (WhatsApp Cloud API) */
.wa-buttons {
  margin-top: 6px;
  display: flex; flex-direction: column;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--wa-shadow);
}
.wa-buttons button {
  background: white;
  color: var(--wa-button-blue);
  border: none;
  padding: 11px 8px;
  font-size: 14px;
  font-weight: 500;
  border-top: 1px solid var(--wa-divider);
  cursor: default;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit;
}
.wa-buttons button:first-child { border-top: none; }
.wa-buttons button svg { width: 14px; height: 14px; }

/* List message CTA */
.wa-list-cta {
  margin-top: 6px;
  background: white;
  color: var(--wa-button-blue);
  text-align: center;
  padding: 11px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--wa-shadow);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* WhatsApp Flow CTA bubble (entry point that opens the Flow modal) */
.wa-flow-entry {
  margin-top: 6px;
  background: white;
  color: var(--wa-button-blue);
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--wa-shadow);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.wa-flow-entry svg { width: 16px; height: 16px; }

/* WhatsApp Flow sheet (native modal form rendered by WhatsApp) */
.wa-flow-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px 6px;
  font-size: 13px; font-weight: 600;
  background: #FFFFFF;
  color: #000000;
}
.wa-flow-status svg { width: 14px; height: 14px; }
.wa-flow-sheet {
  flex: 1;
  background: #FFFFFF;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.wa-flow-header {
  padding: 14px 16px 14px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid #E9EDEF;
}
.wa-flow-header .close {
  font-size: 22px; line-height: 1; color: #111B21;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
}
.wa-flow-header .title { font-size: 16px; font-weight: 600; color: #111B21; }
.wa-flow-body {
  flex: 1; padding: 18px 18px 12px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  background: #FFFFFF;
}
.wa-flow-intro { font-size: 13px; color: #54656F; margin-top: -4px; }
.wa-flow-field { display: flex; flex-direction: column; gap: 6px; }
.wa-flow-label { font-size: 12px; font-weight: 600; color: #111B21; }
.wa-flow-input {
  background: #F5F6F6; border: 1px solid transparent;
  border-radius: 10px; padding: 13px 14px;
  font-size: 14px; color: #111B21;
  display: flex; align-items: center; justify-content: space-between;
}
.wa-flow-input.empty { color: #8696A0; }
.wa-flow-input.filled { color: #111B21; font-weight: 500; }
.wa-flow-input.readonly {
  background: #ECFDF5; border: 1px solid #A7F3D0;
  color: #065F46; font-weight: 500;
}
.wa-flow-input .chev { color: #54656F; }
.wa-flow-helper { font-size: 11.5px; color: #54656F; }
.wa-flow-helper.success { color: #047857; display: flex; align-items: center; gap: 4px; }
.wa-flow-checkbox {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px;
  background: #F5F6F6;
  border-radius: 10px;
}
.wa-flow-checkbox .box {
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--wa-green);
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; font-size: 13px; flex-shrink: 0; margin-top: 1px;
  font-weight: 700;
}
.wa-flow-checkbox .text { font-size: 13px; color: #111B21; line-height: 1.4; }
.wa-flow-footer {
  padding: 12px 16px 22px;
  background: #FFFFFF;
  border-top: 1px solid #E9EDEF;
  display: flex; flex-direction: column; gap: 10px;
}
.wa-flow-cta-btn {
  background: var(--wa-green); color: #FFFFFF;
  text-align: center; padding: 14px;
  border-radius: 26px; font-size: 15px; font-weight: 600;
}
.wa-flow-fineprint { font-size: 10.5px; color: #8696A0; text-align: center; line-height: 1.4; }

/* CTA URL button */
.wa-cta-url {
  margin-top: 4px;
  background: white;
  color: var(--wa-button-blue);
  text-align: center;
  padding: 11px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--wa-shadow);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* Footer text on template messages */
.b-footer { margin-top: 6px; padding-top: 6px; font-size: 11px; color: var(--wa-text-muted); }

/* Typing indicator */
.wa-typing {
  align-self: flex-start;
  background: white; border-radius: 8px;
  padding: 8px 12px;
  box-shadow: var(--wa-shadow);
  display: inline-flex; gap: 3px;
}
.wa-typing span {
  width: 6px; height: 6px; border-radius: 99px;
  background: #B8B8B8;
}

/* WhatsApp input bar */
.wa-input {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px 8px;
  background: var(--wa-bg-chat);
}
.wa-input .field {
  flex: 1; background: white; border-radius: 24px;
  height: 38px; display: flex; align-items: center; padding: 0 12px;
  color: var(--wa-text-muted); font-size: 14px;
  box-shadow: var(--wa-shadow);
  gap: 10px;
}
.wa-input .field svg { width: 20px; height: 20px; fill: var(--wa-text-muted); }
.wa-input .field span { flex: 1; }
.wa-input .send {
  width: 42px; height: 42px; border-radius: 99px;
  background: var(--wa-green);
  display: flex; align-items: center; justify-content: center;
}
.wa-input .send svg { width: 20px; height: 20px; fill: white; }

/* ===========================================================
   EMAIL CLIENT UI
   Used in the buyer flow only. Buyers are corporate AP teams
   who process invoices via email — payment instructions go to
   their finance department's inbox, never their WhatsApp.
   =========================================================== */
.email-frame {
  width: 380px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.04);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.email-window-bar {
  background: #F3F4F6;
  padding: 9px 12px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid #E5E7EB;
}
.email-window-bar .traffic-lights { display: flex; gap: 6px; }
.email-window-bar .light { width: 11px; height: 11px; border-radius: 99px; flex-shrink: 0; }
.email-window-bar .light.red { background: #FF5F57; }
.email-window-bar .light.yellow { background: #FEBC2E; }
.email-window-bar .light.green { background: #28C840; }
.email-window-bar .app-name {
  flex: 1; text-align: center; font-size: 11.5px; color: #6B7280; font-weight: 500;
}

.email-toolbar {
  padding: 7px 14px;
  border-bottom: 1px solid #E5E7EB;
  display: flex; gap: 14px; align-items: center;
  font-size: 11px; color: #6B7280;
  background: #FAFAFA;
}
.email-toolbar .tool { display: flex; align-items: center; gap: 4px; }

.email-body-wrap {
  height: 600px;
  overflow-y: auto;
}
.email-body {
  padding: 18px 18px 16px;
}
.email-subject {
  font-size: 16px; font-weight: 600;
  margin: 0 0 14px; color: #111827;
  line-height: 1.3;
}

.email-meta {
  display: flex; gap: 10px; align-items: flex-start;
  padding-bottom: 14px; border-bottom: 1px solid #E5E7EB;
  margin-bottom: 14px;
}
.email-avatar {
  width: 34px; height: 34px; border-radius: 99px;
  background: linear-gradient(135deg, #005C4B, #003D31);
  color: white; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.email-recipients-block { flex: 1; min-width: 0; font-size: 12px; line-height: 1.5; }
.email-from-line {
  font-size: 12.5px; color: #111827; font-weight: 600;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.email-from-line .verified-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9.5px; font-weight: 700; color: #15803D;
  background: #DCFCE7; padding: 1px 6px; border-radius: 99px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.email-from-line .email-addr { font-weight: 400; color: #6B7280; font-size: 11.5px; }
.email-recipients { color: #6B7280; margin-top: 4px; font-size: 11.5px; }
.email-recipients .label { font-weight: 600; color: #4B5563; display: inline-block; min-width: 28px; }
.email-recipients .pill {
  display: inline-block; background: #F3F4F6; padding: 1px 6px;
  border-radius: 4px; margin-right: 3px; font-size: 11px;
}
.email-date {
  font-size: 11px; color: #6B7280;
  flex-shrink: 0; white-space: nowrap;
  margin-top: 2px;
}

.email-content {
  font-size: 13px; color: #1F2937; line-height: 1.6;
  white-space: pre-wrap;
}
.email-content strong { font-weight: 600; color: #111827; }
.email-content em { color: #6B7280; font-style: italic; }
.email-content .mono {
  font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px;
  background: #F3F4F6; padding: 1px 4px; border-radius: 3px;
  letter-spacing: 0.02em;
}

.email-card {
  margin: 12px 0;
  padding: 12px 14px;
  background: #F9FAFB;
  border-radius: 8px;
  border-left: 3px solid var(--wa-green);
}
.email-card .label {
  font-size: 10px; font-weight: 700; color: #6B7280;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
}
.email-card .value-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; color: #111827; padding: 3px 0;
  gap: 10px;
}
.email-card .value-row .k { color: #6B7280; font-weight: 500; flex-shrink: 0; }
.email-card .value-row .v { font-weight: 600; text-align: right; word-break: break-all; }
.email-card .value-row .v.mono-v {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
}

.email-warning {
  margin: 12px 0;
  padding: 10px 12px;
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: 8px;
  font-size: 12px; color: #78350F; line-height: 1.5;
  display: flex; gap: 8px;
}
.email-warning .icon { font-size: 14px; line-height: 1.2; flex-shrink: 0; }

.email-success {
  margin: 12px 0;
  padding: 10px 12px;
  background: #DCFCE7;
  border: 1px solid #86EFAC;
  border-radius: 8px;
  font-size: 12px; color: #14532D; line-height: 1.5;
  display: flex; gap: 8px;
}
.email-success .icon { font-size: 14px; line-height: 1.2; flex-shrink: 0; }

.email-signature {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid #E5E7EB;
  font-size: 11.5px; color: #6B7280; line-height: 1.5;
}
.email-signature strong { color: #111827; }

.email-attachments {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid #E5E7EB;
}
.email-attachments-label {
  font-size: 10.5px; font-weight: 700; color: #6B7280;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
}
.email-attachment {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: #F9FAFB;
  border: 1px solid #E5E7EB; border-radius: 8px;
  margin-bottom: 6px;
}
.email-attachment:last-child { margin-bottom: 0; }
.email-attachment .ico {
  width: 30px; height: 30px; background: #DC2626;
  color: white; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 9px; letter-spacing: 0.05em;
  flex-shrink: 0;
}
.email-attachment .meta { flex: 1; min-width: 0; }
.email-attachment .name {
  font-size: 12px; font-weight: 500; color: #111827;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.email-attachment .size { font-size: 10.5px; color: #6B7280; }

.email-actions {
  padding: 10px 14px; background: #FAFAFA;
  border-top: 1px solid #E5E7EB;
  display: flex; gap: 6px;
}
.email-actions .btn {
  padding: 5px 12px; border: 1px solid #D1D5DB; border-radius: 6px;
  font-size: 11.5px; color: #374151; background: white;
  font-weight: 500;
}

/* ===========================================================
   FINANCING PARTNER DASHBOARD — read-only Terracore ledger
   Used in financier.html for the web dashboard surface.
   This is the desktop counterpart to the financier's WhatsApp
   alert plane: full ledger, reconciliation, reporting, settings.
   =========================================================== */
.dash-wrap {
  margin: 24px 0 8px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(15,23,42,0.12), 0 4px 10px rgba(15,23,42,0.06);
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
}
.dash-window-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  background: #F3F4F6;
  border-bottom: 1px solid #E5E7EB;
}
.dash-window-bar .traffic-lights { display: flex; gap: 6px; }
.dash-window-bar .light { width: 11px; height: 11px; border-radius: 99px; }
.dash-window-bar .light.red { background: #FF5F57; }
.dash-window-bar .light.yellow { background: #FEBC2E; }
.dash-window-bar .light.green { background: #28C840; }
.dash-window-bar .url {
  flex: 1;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  color: #4B5563;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex; align-items: center; gap: 6px;
  max-width: 480px;
  margin: 0 auto;
}
.dash-window-bar .url .lock { color: #15803D; font-size: 10px; }
.dash-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 640px;
}
.dash-sidebar {
  background: #0F172A;
  color: #CBD5E1;
  padding: 20px 14px;
  font-size: 13px;
}
.dash-sidebar .brand {
  font-weight: 700; color: #FFFFFF;
  letter-spacing: -0.01em; font-size: 15px;
  padding: 0 8px 6px;
}
.dash-sidebar .brand-sub {
  font-size: 11px; color: #64748B; padding: 0 8px 18px;
  border-bottom: 1px solid #1E293B; margin-bottom: 14px;
}
.dash-sidebar .nav-section {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #64748B; padding: 6px 8px; margin-top: 10px; font-weight: 600;
}
.dash-sidebar .nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: #CBD5E1;
  font-weight: 500;
  font-size: 13px;
}
.dash-sidebar .nav-item.active {
  background: #1E293B;
  color: #FFFFFF;
}
.dash-sidebar .nav-item .ico { font-size: 14px; }
.dash-sidebar .institution-card {
  margin-top: 18px; padding: 12px;
  background: #1E293B; border-radius: 8px;
  font-size: 12px;
}
.dash-sidebar .institution-card .label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #64748B; font-weight: 700; margin-bottom: 4px;
}
.dash-sidebar .institution-card .name { color: #FFFFFF; font-weight: 600; line-height: 1.3; }
.dash-sidebar .institution-card .rep { color: #94A3B8; font-size: 11px; margin-top: 4px; }

.dash-main { background: #F8FAFC; padding: 22px 28px; overflow-x: auto; }
.dash-topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px;
}
.dash-topbar h2 {
  font-size: 20px; font-weight: 700; margin: 0;
  letter-spacing: -0.01em; color: #0F172A;
}
.dash-topbar .sub {
  font-size: 12px; color: #64748B; margin-top: 2px;
}
.dash-topbar .actions { display: flex; gap: 8px; align-items: center; }
.dash-topbar .actions .btn {
  background: #FFFFFF; border: 1px solid #E5E7EB;
  border-radius: 8px; padding: 7px 12px;
  font-size: 12.5px; font-weight: 500; color: #374151;
  display: inline-flex; align-items: center; gap: 6px;
}
.dash-topbar .actions .badge-readonly {
  background: #FEF3C7; border: 1px solid #FCD34D;
  color: #78350F; font-size: 10.5px; font-weight: 700;
  padding: 4px 9px; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.06em;
}

.dash-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 22px;
}
.dash-kpi {
  background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 10px;
  padding: 14px 16px;
}
.dash-kpi .label {
  font-size: 11px; color: #64748B; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600; margin-bottom: 6px;
}
.dash-kpi .value {
  font-size: 22px; font-weight: 700; color: #0F172A;
  letter-spacing: -0.015em; line-height: 1.1;
}
.dash-kpi .delta {
  font-size: 11.5px; color: #64748B; margin-top: 4px;
}
.dash-kpi .delta.up { color: #15803D; }
.dash-kpi .delta.down { color: #B91C1C; }
.dash-kpi .bar {
  margin-top: 10px; height: 6px; background: #E5E7EB; border-radius: 99px; overflow: hidden;
}
.dash-kpi .bar-fill { height: 100%; background: var(--p-financier); border-radius: 99px; }

.dash-section-head {
  display: flex; justify-content: space-between; align-items: center;
  margin: 6px 0 10px;
}
.dash-section-head h3 {
  font-size: 14px; font-weight: 700; color: #0F172A; margin: 0;
}
.dash-section-head .filters { display: flex; gap: 6px; }
.dash-section-head .filters .chip {
  font-size: 11px; padding: 3px 9px; border-radius: 99px;
  background: #F1F5F9; color: #475569; font-weight: 500;
}
.dash-section-head .filters .chip.active {
  background: #0F172A; color: #FFFFFF;
}

.dash-table-card {
  background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 10px; overflow: hidden;
  margin-bottom: 18px;
}
table.dash-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
}
table.dash-table th {
  background: #F8FAFC; text-align: left; padding: 10px 12px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #64748B; font-weight: 600;
  border-bottom: 1px solid #E5E7EB;
  white-space: nowrap;
}
table.dash-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #F1F5F9;
  color: #1F2937;
  white-space: nowrap;
}
table.dash-table tr:last-child td { border-bottom: none; }
table.dash-table tr:hover td { background: #F8FAFC; }
table.dash-table .ref {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-weight: 600; color: #0F172A;
}
table.dash-table .num { text-align: right; font-variant-numeric: tabular-nums; }
table.dash-table .obligor { font-weight: 500; color: #0F172A; }
table.dash-table .muted-cell { color: #64748B; font-size: 11.5px; }

.dash-pill {
  display: inline-block;
  font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 99px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.dash-pill.outstanding { background: #DBEAFE; color: #1E3A8A; }
.dash-pill.settled { background: #DCFCE7; color: #14532D; }
.dash-pill.pending { background: #FEF3C7; color: #78350F; }
.dash-pill.past-due { background: #FEE2E2; color: #991B1B; }
.dash-pill.disputed { background: #F3E8FF; color: #5B21B6; }

.dash-two-col {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px;
}

.dash-card {
  background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 10px; padding: 16px;
}
.dash-card h4 {
  font-size: 12.5px; font-weight: 700; color: #0F172A; margin: 0 0 10px;
}
.dash-card .row {
  display: flex; justify-content: space-between; padding: 6px 0;
  font-size: 12.5px; color: #1F2937;
  border-bottom: 1px solid #F1F5F9;
}
.dash-card .row:last-child { border-bottom: none; }
.dash-card .row .k { color: #64748B; }
.dash-card .row .v { font-weight: 600; }
.dash-card .row .v.mono {
  font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12px;
}

.dash-feed { font-size: 12.5px; }
.dash-feed-item {
  display: flex; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid #F1F5F9;
}
.dash-feed-item:last-child { border-bottom: none; }
.dash-feed-item .dot {
  width: 8px; height: 8px; border-radius: 99px;
  margin-top: 6px; flex-shrink: 0;
}
.dash-feed-item .dot.in { background: #15803D; }
.dash-feed-item .dot.out { background: #1E40AF; }
.dash-feed-item .body { flex: 1; min-width: 0; }
.dash-feed-item .body .title { color: #0F172A; font-weight: 500; }
.dash-feed-item .body .meta { color: #64748B; font-size: 11px; margin-top: 2px; }
.dash-feed-item .amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.dash-feed-item .amt.in { color: #15803D; }
.dash-feed-item .amt.out { color: #1E40AF; }

/* OTP-style numeric */
.otp-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
  margin: 4px 0;
}
.otp-grid div {
  background: rgba(0,0,0,0.04);
  border-radius: 4px;
  padding: 6px 0;
  text-align: center;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 16px; font-weight: 600;
  color: var(--wa-text);
}

/* Cross-flow timeline */
.timeline {
  background: white; border: 1px solid var(--doc-border); border-radius: 16px;
  padding: 28px;
  overflow-x: auto;
}
.timeline-grid {
  display: grid;
  grid-template-columns: 180px repeat(11, minmax(120px, 1fr));
  gap: 0;
  min-width: 1400px;
}
.tl-cell { padding: 10px 8px; border-bottom: 1px solid var(--doc-border); border-right: 1px solid var(--doc-border); font-size: 12px; }
.tl-head { background: #F8FAFC; font-weight: 600; color: var(--doc-text); font-size: 12px; padding: 12px 8px; }
.tl-row-label { background: #F8FAFC; font-weight: 600; padding: 12px; }
.tl-row-label.d { border-left: 4px solid var(--p-supplier); }
.tl-row-label.s { border-left: 4px solid var(--p-supplier); }
.tl-row-label.f { border-left: 4px solid var(--p-financier); }
.tl-row-label.b { border-left: 4px solid var(--p-buyer); }

.tl-touch { font-size: 11px; padding: 8px 6px; border-radius: 6px; line-height: 1.3; }
.tl-touch.d { background: var(--p-supplier-soft); color: #1E3A8A; }
.tl-touch.s { background: var(--p-supplier-soft); color: #115E59; }
.tl-touch.f { background: var(--p-financier-soft); color: #92400E; }
.tl-touch.b { background: var(--p-buyer-soft); color: #5B21B6; }
.tl-touch.none { color: #CBD5E1; font-style: italic; padding: 8px 6px; font-size: 11px; }

/* SLA table */
table.sla {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: white; border: 1px solid var(--doc-border); border-radius: 12px; overflow: hidden;
}
table.sla th, table.sla td {
  text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--doc-border);
}
table.sla th {
  background: #F8FAFC; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--doc-text-muted); font-weight: 600;
}
table.sla tr:last-child td { border-bottom: none; }
table.sla .sla-time { font-family: "SF Mono", Menlo, Consolas, monospace; font-weight: 700; color: var(--p-supplier); }
table.sla .crit { color: #B91C1C; font-weight: 700; }

/* Principles cards */
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 18px; }
.principle {
  background: white; border: 1px solid var(--doc-border); border-radius: 12px;
  padding: 18px;
}
.principle .icon { font-size: 24px; margin-bottom: 8px; }
.principle h4 { font-size: 14px; margin: 0 0 4px; }
.principle p { font-size: 13px; color: var(--doc-text-muted); margin: 0; }

/* Convention legend */
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.legend .li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--doc-text-muted); }
.legend .sw { width: 14px; height: 14px; border-radius: 4px; }

/* "Speed callout" badge */
.speed-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #FEE2E2; color: #B91C1C;
  padding: 2px 8px; border-radius: 99px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.speed-badge.ok { background: #DCFCE7; color: #166534; }

/* Money-control rules box */
.rules-box {
  background: #FEF2F2; border: 1px solid #FECACA; border-radius: 12px;
  padding: 18px 20px;
  margin: 18px 0;
}
.rules-box h4 { color: #991B1B; margin-bottom: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
.rules-box ul { margin: 0; padding-left: 18px; font-size: 13px; color: #7F1D1D; }
.rules-box li { margin-bottom: 4px; }

hr { border: none; border-top: 1px solid var(--doc-border); margin: 28px 0; }

/* Hint pill */
.hint {
  display: inline-block; font-size: 11px;
  padding: 2px 7px; border-radius: 99px;
  background: #F1F5F9; color: var(--doc-text-muted);
  font-weight: 500; margin-left: 6px;
}

/* ===== Active-page nav highlight (added when split into multiple files) ===== */
nav.sidebar li a.active {
  background: #0F172A;
  color: #FFFFFF;
}
nav.sidebar li a.active .dot { box-shadow: 0 0 0 2px #FFFFFF; }