/* ===========================================================================
   PropFlow — agency rental CRM  ·  light design system (redesign target)
   Self-contained: this file styles /propflow.html only. It does NOT touch the
   live Valore app (styles.css). Palette + type derived from the design mockups.
   =========================================================================== */

:root {
  /* ---- canvas & surfaces ---- */
  --bg:          #f3f2ec;   /* warm off-white app canvas */
  --sidebar:     #fbfbf8;
  --surface:     #ffffff;   /* cards */
  --surface-2:   #faf9f5;   /* inset panels / hover rows */
  --surface-3:   #f5f4ee;

  /* ---- lines ---- */
  --line:        #e8e6dd;
  --line-soft:   #efeee7;
  --line-strong: #ddd9cd;

  /* ---- ink ---- */
  --ink:         #20211c;
  --ink-body:    #3c3e36;
  --ink-muted:   #7b7e72;
  --ink-faint:   #a4a798;

  /* ---- brand green ---- */
  --green:        #2a6a48;   /* logo tile */
  --green-deep:   #1e5738;   /* primary buttons */
  --green-hover:  #184a2f;
  --green-ink:    #215c40;   /* green text (active nav, links) */
  --sage:         #e7efe7;   /* active nav bg, soft fills */
  --sage-line:    #cfe0d2;
  --green-tint:   #eef4ee;

  /* chart green scale (dark -> light) */
  --g1: #1f5a3d;
  --g2: #3f7a58;
  --g3: #6a9d80;
  --g4: #9cbfa9;
  --g5: #c6d9cc;
  --g-track: #ece9e0;

  /* ---- tan / Valore accent ---- */
  --tan:        #c49a63;
  --tan-deep:   #8a6a3e;
  --tan-soft:   #f3e9db;
  --tan-line:   #e6d3b4;

  /* ---- amber / warning ---- */
  --amber:      #b9822e;
  --amber-soft: #faf3e0;
  --amber-line: #ecdca8;

  /* ---- automation (peach) ---- */
  --auto-bg:    #f7ece0;
  --auto-ink:   #9a6438;

  /* ---- danger / arrears ---- */
  --red:        #b23b2a;
  --red-soft:   #f6e2da;
  --red-line:   #eecabd;

  /* ---- success ---- */
  --ok:         #3f8a63;

  /* ---- lavender (system tags) ---- */
  --lav-bg:     #eae7f2;
  --lav-ink:    #6b5f93;

  --radius:   14px;
  --radius-sm: 9px;
  --shadow:   0 1px 2px rgba(30,28,20,.04), 0 8px 24px -16px rgba(30,28,20,.18);
  --shadow-card: 0 1px 0 rgba(30,28,20,.03), 0 1px 3px rgba(30,28,20,.05);

  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --sidebar-w: 208px;
  --topbar-h: 56px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink-body);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--green-ink); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 700; letter-spacing: -.01em; }
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.num  { font-family: var(--mono); font-feature-settings: "tnum" 1; }
::selection { background: var(--sage); }

/* ========================= APP SHELL ========================= */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 14px;
}
.brand-logo {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(150deg, #2f7350, #235d3d);
  color: #fff; font-weight: 800; font-size: 17px;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px -1px rgba(31,90,61,.5), inset 0 1px 0 rgba(255,255,255,.25);
  position: relative;
}
.brand-logo::after {
  content: ""; position: absolute; right: 4px; bottom: 4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.45);
}
.brand-name { font-weight: 800; font-size: 16px; color: var(--ink); letter-spacing: -.02em; }

.nav { padding: 4px 10px; display: flex; flex-direction: column; gap: 1px; flex: 1; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--ink-muted); font-size: 13.5px; font-weight: 500;
  border: none; background: none; text-align: left; width: 100%;
}
.nav-item svg { width: 17px; height: 17px; flex: none; stroke: currentColor; opacity: .85; }
.nav-item:hover { background: var(--surface-3); color: var(--ink-body); }
.nav-item.is-active { background: var(--sage); color: var(--green-ink); font-weight: 600; }
.nav-item.is-active svg { opacity: 1; }
.nav-count {
  margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--ink-muted); background: var(--surface-3);
  border-radius: 20px; padding: 1px 7px; min-width: 22px; text-align: center;
}
.nav-item.is-active .nav-count { background: #fff; color: var(--green-ink); }

.side-user {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-top: 1px solid var(--line); margin-top: auto;
}
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--sage); color: var(--green-ink);
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
  border: 1px solid var(--sage-line);
}
.side-user-name { font-weight: 700; color: var(--ink); font-size: 13px; }
.side-user-role { color: var(--ink-faint); font-size: 11.5px; }
.side-user .chev { margin-left: auto; color: var(--ink-faint); }

/* ---- main ---- */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar-h); flex: none;
  display: flex; align-items: center; gap: 16px;
  padding: 0 22px; background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; z-index: 20;
}
.page-title { font-weight: 700; color: var(--ink); font-size: 15px; }
.topbar-search {
  margin-left: auto; width: min(360px, 40%);
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 10px; color: var(--ink-faint);
}
.topbar-search svg { width: 15px; height: 15px; stroke: currentColor; }
.topbar-search input {
  border: none; background: none; outline: none; flex: 1;
  font-family: inherit; font-size: 13px; color: var(--ink-body);
}
.kbd {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; background: var(--surface-2);
}
.bell { position: relative; color: var(--ink-muted); background: none; border: none; padding: 4px; }
.bell svg { width: 18px; height: 18px; stroke: currentColor; }
.bell::after {
  content: ""; position: absolute; top: 3px; right: 4px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--tan);
  border: 1.5px solid var(--bg);
}

.content { padding: 22px; flex: 1; }
.view { display: none; }
.view.is-active { display: block; }

/* ========================= CARDS ========================= */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.card-pad { padding: 18px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-head h2 { font-size: 14.5px; }
.card-sub { color: var(--ink-muted); font-size: 12px; margin-top: 2px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }

/* ========================= BUTTONS ========================= */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 8px; padding: 8px 13px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-body);
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.btn-primary:hover { background: var(--green-hover); }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 7px; }
.btn-ghost { background: none; border-color: var(--line); }
.link-arrow { color: var(--green-ink); font-weight: 600; font-size: 12.5px; background: none; border: none; padding: 0; }

/* ========================= BADGES / CHIPS ========================= */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 20px; white-space: nowrap; text-transform: uppercase;
}
.b-green  { background: var(--green-deep); color: #fff; }
.b-sage   { background: var(--sage); color: var(--green-ink); }
.b-tan    { background: var(--tan-soft); color: var(--tan-deep); }
.b-grey   { background: var(--surface-3); color: var(--ink-muted); }
.b-lav    { background: var(--lav-bg); color: var(--lav-ink); }
.b-red    { background: var(--red); color: #fff; }
.b-amber  { background: #f4e6c4; color: #8a6410; }
.b-red-soft { background: var(--red-soft); color: var(--red); }
.b-ok     { background: var(--sage); color: var(--ok); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500;
  padding: 3px 9px; border-radius: 7px;
  background: var(--surface-3); color: var(--ink-muted); border: 1px solid var(--line-soft);
}
.chip .num { font-size: 11.5px; }
.chip-ok  { background: var(--green-tint); color: var(--ok); border-color: var(--sage-line); }
.chip-warn{ background: var(--amber-soft); color: var(--amber); border-color: var(--amber-line); }
.chip-tan { background: var(--tan-soft); color: var(--tan-deep); border-color: var(--tan-line); }

/* automation action pill */
.auto {
  display: flex; align-items: center; gap: 7px;
  background: var(--auto-bg); color: var(--auto-ink);
  border-radius: 8px; padding: 8px 10px; font-size: 12px; font-weight: 500;
}
.auto .bolt { color: var(--tan); font-weight: 700; }

.tick { color: var(--ok); font-weight: 700; }
.cross{ color: var(--red);  font-weight: 700; }

/* ========================= KPI STRIP ========================= */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 16px; box-shadow: var(--shadow-card); }
.kpi-label { font-size: 11.5px; color: var(--ink-muted); font-weight: 600; }
.kpi-value { font-family: var(--mono); font-size: 27px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; margin: 6px 0 4px; }
.kpi-value.is-red { color: var(--red); }
.kpi-foot { font-size: 11.5px; color: var(--ink-faint); }

/* ========================= DASHBOARD ========================= */
.greeting { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.greeting h1 { font-size: 22px; }
.greeting .date { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }

.dash-grid { display: grid; grid-template-columns: 1fr 360px 340px; gap: 16px; align-items: start; }
@media (max-width: 1300px){ .dash-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px){ .dash-grid { grid-template-columns: 1fr; } }

/* vertical bar chart (lead source -> lease) */
.vbars { display: flex; align-items: flex-end; gap: 14px; height: 240px; padding-top: 20px; }
.vbar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.vbar-col { width: 100%; max-width: 54px; border-radius: 7px 7px 0 0; position: relative; }
.vbar-pct { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink); }
.vbar-label { font-size: 11.5px; color: var(--ink-body); margin-top: 8px; font-weight: 600; }
.vbar-sub { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }

/* horizontal bars (leads this week) */
.hbars { display: flex; flex-direction: column; gap: 11px; }
.hbar { display: grid; grid-template-columns: 88px 1fr 26px; align-items: center; gap: 10px; }
.hbar-label { font-size: 12px; color: var(--ink-body); }
.hbar-track { height: 12px; background: var(--g-track); border-radius: 20px; overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 20px; }
.hbar-val { font-family: var(--mono); font-size: 12px; text-align: right; color: var(--ink); font-weight: 600; }
.stat-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 12.5px; }
.stat-row .num { font-size: 14px; font-weight: 700; color: var(--ink); }

/* open tickets by priority */
.prio-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-radius: 10px; margin-bottom: 8px; font-weight: 600; }
.prio-row .num { font-family: var(--mono); font-size: 15px; font-weight: 700; }
.prio-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.prio-emergency { background: var(--red-soft); color: var(--red); }
.prio-emergency .prio-dot { background: var(--red); }
.prio-urgent { background: var(--amber-soft); color: var(--amber); }
.prio-urgent .prio-dot { background: var(--amber); }
.prio-routine { background: var(--surface-2); color: var(--ink-body); }
.prio-routine .prio-dot { background: var(--ink-faint); }

/* ========================= KANBAN ========================= */
.funnel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.funnel-step { display: flex; flex-direction: column; gap: 2px; padding: 4px 4px; }
.funnel-step .k { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.funnel-step .v { font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--ink); }
.funnel-step .v small { font-size: 11px; color: var(--ink-faint); font-weight: 500; margin-left: 4px; }
.funnel-arrow { color: var(--ink-faint); }

.board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.col { flex: 0 0 268px; min-width: 268px; }
.col-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 0 2px; }
.col-head h3 { font-size: 12.5px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.col-count { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.col-body { display: flex; flex-direction: column; gap: 10px; }

.kcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; box-shadow: var(--shadow-card); position: relative;
}
.kcard.is-alert { background: #fffaf9; border-color: var(--red-line); }
.kcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.kcard-name { font-weight: 700; color: var(--ink); font-size: 13.5px; }
.kcard-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); margin-top: 2px; }
.kcard-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.kcard-line { font-size: 12px; margin-top: 5px; display: flex; align-items: center; gap: 6px; }
.kcard-note { font-size: 11.5px; color: var(--ink-muted); margin-top: 6px; }
.kcard-alert-note {
  background: var(--amber-soft); border: 1px solid var(--amber-line); color: #7a5a1e;
  border-radius: 8px; padding: 9px 10px; font-size: 12px; margin-top: 4px;
}

/* mandate / tab bar for tickets */
.subnav { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--surface-3); border: 1px solid var(--line); border-radius: 9px; padding: 3px; }
.seg button { border: none; background: none; padding: 6px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-muted); }
.seg button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
.seg .num { font-size: 11px; color: var(--ink-faint); margin-left: 4px; }
.mandate-note { font-size: 12px; color: var(--ink-muted); }

/* ========================= LIST RAIL + DETAIL ========================= */
.rail-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px){ .rail-layout { grid-template-columns: 1fr; } }
.rail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.rail-search { padding: 12px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rail-search input { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-family: inherit; font-size: 12.5px; outline: none; background: var(--surface-2); }
.rail-count { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.rail-list { max-height: calc(100vh - 190px); overflow-y: auto; }
.rail-item { display: flex; gap: 11px; align-items: flex-start; padding: 12px 13px; border-bottom: 1px solid var(--line-soft); border-left: 2px solid transparent; }
.rail-item:hover { background: var(--surface-2); }
.rail-item.is-active { background: var(--sage); border-left-color: var(--green); }
.rail-item .r-title { font-weight: 700; color: var(--ink); font-size: 13px; }
.rail-item .r-sub { font-size: 11.5px; color: var(--ink-muted); margin-top: 1px; }
.rail-item .r-sub .num { font-size: 11px; }
.rail-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.rail-foot { padding: 12px 13px; font-size: 11.5px; color: var(--ink-faint); }

.detail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.detail-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1150px){ .detail-grid-2 { grid-template-columns: 1fr; } }

/* property/contact header */
.dhead { display: flex; align-items: flex-start; gap: 14px; }
.dhead .avatar-lg { width: 46px; height: 46px; border-radius: 50%; background: var(--sage); color: var(--green-ink); display: grid; place-items: center; font-weight: 700; font-size: 16px; border: 1px solid var(--sage-line); flex: none; }
.dhead h1 { font-size: 18px; }
.dhead .d-contact { font-family: var(--mono); font-size: 12.5px; color: var(--ink-muted); margin: 3px 0 8px; }
.dhead-actions { margin-left: auto; display: flex; gap: 8px; flex: none; }

/* definition rows */
.drow { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.drow:first-child { border-top: none; }
.drow .dk { color: var(--ink-muted); }
.drow .dv { font-family: var(--mono); color: var(--ink); font-weight: 600; text-align: right; }
.drow .dv small { font-weight: 400; color: var(--ink-faint); }

/* linked row card */
.linkrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.linkrow:hover { border-color: var(--sage-line); }
.linkrow .lr-title { font-weight: 600; color: var(--ink); font-size: 13px; }
.linkrow .lr-sub { font-size: 11.5px; color: var(--ink-muted); margin-top: 2px; }
.linkrow .arrow { color: var(--green-ink); }

/* renewal banner */
.banner { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: var(--radius); background: var(--amber-soft); border: 1px solid var(--amber-line); }
.banner .b-ico { color: var(--amber); }
.banner .b-text { flex: 1; font-size: 13px; color: #6f571f; }
.banner .b-text strong { color: #5a4413; }
.banner-actions { display: flex; gap: 8px; }

/* 12-month rent bars */
.rentbars { display: flex; align-items: flex-end; gap: 5px; height: 74px; }
.rentbar { flex: 1; border-radius: 3px 3px 0 0; min-height: 8px; }
.rentbar.ok  { background: var(--g1); }
.rentbar.part{ background: var(--tan); }
.rentbar.miss{ background: var(--red); }
.rentbars-labels { display: flex; gap: 5px; margin-top: 5px; }
.rentbars-labels span { flex: 1; text-align: center; font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }

/* collection progress */
.progress { height: 9px; background: var(--g-track); border-radius: 20px; overflow: hidden; margin: 4px 0 6px; }
.progress > i { display: block; height: 100%; background: var(--amber); border-radius: 20px; }
.moneyrows .drow .dv { font-size: 13px; }
.moneyrows .drow.total { border-top: 1px solid var(--line); }

/* allocation row + input */
.alloc { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); margin-bottom: 8px; }
.alloc .a-when { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); }
.alloc .a-what { font-size: 12px; color: var(--ink-body); }
.alloc .a-amt { font-family: var(--mono); font-weight: 700; color: var(--ink); }
.input { border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; font-family: var(--font); font-size: 13px; background: var(--surface); outline: none; color: var(--ink-body); }
.input:focus { border-color: var(--sage-line); }
.field-row { display: flex; gap: 8px; align-items: center; }

/* arrears ladder */
.ladder { display: flex; flex-direction: column; }
.ladder-step { display: flex; gap: 12px; padding: 9px 0; position: relative; }
.ladder-mark { width: 20px; flex: none; display: flex; flex-direction: column; align-items: center; }
.ladder-dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); z-index: 1; }
.ladder-dot.done { background: var(--ok); border-color: var(--ok); }
.ladder-dot.now  { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.ladder-line { width: 2px; flex: 1; background: var(--line); margin-top: 2px; }
.ladder-step:last-child .ladder-line { display: none; }
.ladder-body { padding-top: 0; }
.ladder-body .l-title { font-size: 12.5px; color: var(--ink); font-weight: 600; }
.ladder-body.pending .l-title { color: var(--ink-faint); font-weight: 500; }
.ladder-body .l-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); }

/* threads / messages */
.thread-tabs { display: inline-flex; gap: 2px; }
.thread-tabs button { border: 1px solid var(--line); background: var(--surface); font-size: 11.5px; padding: 4px 10px; color: var(--ink-muted); }
.thread-tabs button:first-child { border-radius: 7px 0 0 7px; }
.thread-tabs button:last-child { border-radius: 0 7px 7px 0; }
.thread-tabs button.is-active { background: var(--sage); color: var(--green-ink); border-color: var(--sage-line); font-weight: 600; }
.thread { display: flex; flex-direction: column; gap: 12px; padding: 6px 2px; }
.msg { max-width: 82%; }
.msg .bubble { padding: 9px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.5; }
.msg-in .bubble { background: var(--surface-2); border: 1px solid var(--line); border-top-left-radius: 4px; color: var(--ink-body); }
.msg-out { align-self: flex-end; }
.msg-out .bubble { background: var(--sage); border: 1px solid var(--sage-line); border-top-right-radius: 4px; color: #204531; }
.msg-out.auto-msg .bubble { background: var(--auto-bg); border-color: #ecd8c2; color: var(--auto-ink); }
.msg-meta { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); margin-top: 4px; }
.msg-out .msg-meta { text-align: right; }
.quick-replies { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.reply-box { display: flex; gap: 8px; }
.reply-box .input { flex: 1; }

/* audit trail */
.audit { display: flex; flex-direction: column; }
.audit-row { display: grid; grid-template-columns: 92px 130px 1fr; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 12.5px; }
.audit-row:first-child { border-top: none; }
.audit-when { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.audit-who { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.audit-who .who-auto { color: var(--tan-deep); }
.audit-who .who-user { color: var(--green-ink); font-weight: 600; }
.audit-what { color: var(--ink-body); }

/* ========================= TABLES ========================= */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 12px 10px; border-bottom: 1px solid var(--line-soft); font-size: 13px; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl .ta-r { text-align: right; }
.tbl .num { color: var(--ink); }
.tbl tr.clickable:hover { background: var(--surface-2); cursor: pointer; }
.tbl tr.total-row td { font-weight: 700; border-top: 2px solid var(--line); color: var(--ink); }
.cell-strong { font-weight: 700; color: var(--ink); }
.cell-sub { font-size: 11.5px; color: var(--ink-muted); margin-top: 2px; }
.microbar { height: 3px; border-radius: 3px; background: var(--g-track); margin-top: 6px; overflow: hidden; max-width: 220px; }
.microbar > i { display: block; height: 100%; background: var(--g2); }
.microbar.short > i { background: var(--tan); }

/* ========================= ACCOUNTING (bank feed) ========================= */
.acc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.acc-head h1 { font-size: 20px; }
.acc-head .spacer { flex: 1; }
.acc-grid { display: grid; grid-template-columns: 1fr 380px; gap: 16px; align-items: start; }
@media (max-width: 1200px){ .acc-grid { grid-template-columns: 1fr; } }

.feed-row { padding: 14px 4px; border-top: 1px solid var(--line-soft); }
.feed-row:first-child { border-top: none; }
.feed-top { display: flex; align-items: center; gap: 10px; }
.feed-when { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.feed-ref { font-family: var(--mono); font-size: 12.5px; color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
.feed-amt { margin-left: auto; font-family: var(--mono); font-weight: 700; color: var(--ink); font-size: 14px; }
.feed-amt.out { color: var(--red); }
.feed-match { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.confbar { width: 70px; height: 6px; border-radius: 20px; background: var(--g-track); overflow: hidden; flex: none; }
.confbar > i { display: block; height: 100%; }
.conf-hi > i { background: var(--g2); }
.conf-mid > i { background: var(--tan); }
.conf-lo > i { background: var(--amber); }
.feed-conf { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); }
.feed-target { font-size: 12px; color: var(--ink-body); }
.feed-actions { display: flex; gap: 7px; margin-top: 11px; justify-content: flex-end; }
.teach { display: flex; align-items: center; gap: 9px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; margin-top: 10px; }
.teach .teach-label { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.teach select { border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; font-family: inherit; font-size: 12px; background: var(--surface); color: var(--ink-body); }

.ll-stmt { padding: 13px 0; border-top: 1px solid var(--line-soft); }
.ll-stmt:first-of-type { border-top: none; }
.ll-stmt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ll-stmt .ll-name { font-weight: 700; color: var(--ink); font-size: 13px; }
.ll-stmt .ll-sub { font-size: 11.5px; color: var(--ink-muted); margin-top: 2px; }
.ll-stmt .ll-amt { font-family: var(--mono); font-weight: 700; color: var(--ink); }
.ll-stmt-actions { display: flex; gap: 7px; margin-top: 9px; }

.compliance .drow { font-size: 12.5px; }
.compliance .dv { color: var(--ok); }

/* ========================= SCHEMES ========================= */
.scheme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px){ .scheme-grid { grid-template-columns: 1fr; } }
.mini-card { border: 1px solid var(--line); border-radius: 11px; padding: 14px; background: var(--surface-2); }
.mini-card .eyebrow { margin-bottom: 6px; }
.mini-card .big { font-family: var(--mono); font-size: 19px; font-weight: 700; color: var(--ink); }
.phase-card { border: 1px dashed var(--line-strong); border-radius: 12px; padding: 16px; background: var(--surface); }
.phase-card h3 { font-size: 14px; color: var(--lav-ink); }
.phase-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 12.5px; }
.phase-row .num { color: var(--ink-faint); }

/* ========================= DOCUMENT VAULT ========================= */
.vault-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 12.5px; }
.vault-row:first-child { border-top: none; }
.vault-row .v-name { color: var(--ink-body); }
.vault-row .v-when { margin-left: auto; font-family: var(--mono); font-size: 11px; }
.vault-row .v-ok { color: var(--ok); }
.vault-row .v-out { color: var(--amber); }
.lock { color: var(--ink-faint); }

/* ========================= INBOX ========================= */
.inbox-layout { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px){ .inbox-layout { grid-template-columns: 1fr; } }
.inbox-item { display: flex; gap: 11px; padding: 12px 13px; border-bottom: 1px solid var(--line-soft); border-left: 2px solid transparent; }
.inbox-item.is-active { background: var(--sage); border-left-color: var(--green); }
.inbox-item.unread .ii-name { font-weight: 800; }
.inbox-item:hover { background: var(--surface-2); }
.ii-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: 13px; }
.ii-wa { background: #e4f3e9; color: #1f8a4c; }
.ii-em { background: #e8eef7; color: #3a63a8; }
.ii-portal { background: var(--tan-soft); color: var(--tan-deep); }
.ii-name { font-weight: 600; color: var(--ink); font-size: 13px; }
.ii-preview { font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ii-when { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; }
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; align-self: center; }

/* ========================= MOBILE PREVIEW ========================= */
.mobile-wrap { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.phone { width: 300px; border: 10px solid #23241f; border-radius: 38px; background: var(--bg); overflow: hidden; box-shadow: var(--shadow); }
.phone-notch { height: 26px; background: #23241f; border-radius: 0 0 14px 14px; width: 130px; margin: 0 auto; }
.phone-screen { padding: 14px; }
.phone-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px; }

/* ========================= SETTINGS ========================= */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px){ .settings-grid { grid-template-columns: 1fr; } }
.toggle { width: 38px; height: 22px; border-radius: 20px; background: var(--line-strong); position: relative; border: none; flex: none; }
.toggle.on { background: var(--green); }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.toggle.on::after { transform: translateX(16px); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.set-row:first-child { border-top: none; }
.set-row .s-title { font-weight: 600; color: var(--ink); font-size: 13px; }
.set-row .s-sub { font-size: 12px; color: var(--ink-muted); }

.section-gap { margin-top: 16px; }
.pill-note { font-size: 11.5px; color: var(--ink-faint); margin-top: 10px; }
.hr { height: 1px; background: var(--line-soft); border: none; margin: 14px 0; }