/* ===========================================================
   Real Estate CRM — interface
   =========================================================== */

:root{
  --bg:#f4f5f7;
  --surface:#ffffff;
  --surface-2:#fafbfc;
  --ink:#121417;
  --ink-2:#495059;
  --muted:#79818c;
  --line:#e4e7ea;
  --line-2:#eef0f2;

  --brand:#0f5e63;
  --brand-2:#0b4a4e;
  --brand-soft:#e7f3f3;

  --ok:#136c43;
  --ok-soft:#e6f4ec;
  --warn:#8a5a00;
  --warn-soft:#fcf2de;
  --bad:#9f2420;
  --bad-soft:#fdecea;
  --info:#1d4e9b;
  --info-soft:#eaf1fb;

  --r:10px;
  --r-lg:14px;
  --shadow:0 1px 2px rgba(16,20,26,.05), 0 4px 16px rgba(16,20,26,.05);
  --sidebar:248px;
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#101216; --surface:#181b21; --surface-2:#1e222a;
    --ink:#eef1f5; --ink-2:#c3cad3; --muted:#8e97a3;
    --line:#282d36; --line-2:#222730;
    --brand:#4fb8bd; --brand-2:#6cc9cd; --brand-soft:#10292a;
    --ok:#7fd3a6; --ok-soft:#13291f;
    --warn:#e5bd73; --warn-soft:#2b2211;
    --bad:#ef9a95; --bad-soft:#2d1716;
    --info:#92b8f0; --info-soft:#141f33;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"tnum" 0;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0; font-weight:650; letter-spacing:-.011em; line-height:1.25}
h1{font-size:23px}
h2{font-size:19px}
h3{font-size:15.5px}
p{margin:0 0 10px}

/* ---------- app shell ---------- */
.app{display:flex; min-height:100vh}

.side{
  width:var(--sidebar); flex:0 0 var(--sidebar);
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.side .logo{
  display:flex; align-items:center; gap:10px;
  padding:18px 18px 14px; border-bottom:1px solid var(--line-2);
}
.side .logo .mark{
  width:32px; height:32px; border-radius:9px; flex:0 0 32px;
  background:linear-gradient(140deg,var(--brand),var(--brand-2));
  color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px;
}
.side .logo b{font-size:14.5px; line-height:1.2; color:var(--ink)}
.side .logo span{display:block; font-size:11.5px; color:var(--muted); font-weight:500}

.side nav{padding:12px 10px; overflow-y:auto; flex:1}
.side .grp{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); font-weight:700; padding:14px 10px 6px;
}
.side nav a{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px; margin-bottom:1px;
  color:var(--ink-2); font-size:14px; font-weight:550;
}
.side nav a:hover{background:var(--surface-2); color:var(--ink); text-decoration:none}
.side nav a.on{background:var(--brand-soft); color:var(--brand); font-weight:650}
.side nav a .ic{width:17px; text-align:center; opacity:.85; font-size:14px}
.side nav a .tag{
  margin-left:auto; font-size:11px; font-weight:700; padding:1px 7px;
  border-radius:999px; background:var(--brand); color:#fff;
}

.side .me{border-top:1px solid var(--line-2); padding:12px 14px; display:flex; align-items:center; gap:10px}
.side .me .av{
  width:30px; height:30px; border-radius:50%; flex:0 0 30px; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line); font-size:12px; font-weight:700; color:var(--ink-2);
}
.side .me .nm{font-size:13px; font-weight:600; line-height:1.2; min-width:0}
.side .me .nm small{display:block; color:var(--muted); font-weight:500; font-size:11.5px}
.side .me .melinks{margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:2px}
.side .me a{color:var(--muted); font-size:12px; font-weight:600; white-space:nowrap}
.side .me a:hover{color:var(--brand)}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:18px 26px 14px;
}
.bar .ttl{min-width:0}
.bar h1{margin:0}
.bar .sub{color:var(--muted); font-size:13px; margin-top:2px}
.bar .acts{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.wrap{padding:0 26px 40px; max-width:1320px}

.burger{display:none}

@media (max-width:900px){
  .app{display:block}
  .side{
    position:fixed; inset:0 auto 0 0; z-index:40; transform:translateX(-100%);
    transition:transform .18s ease; box-shadow:var(--shadow);
  }
  .side.open{transform:none}
  .burger{
    display:inline-grid; place-items:center; width:38px; height:38px; flex:0 0 38px;
    border:1px solid var(--line); border-radius:9px; background:var(--surface);
    color:var(--ink); font-size:17px; cursor:pointer;
  }
  .bar{padding:14px 16px 10px}
  .wrap{padding:0 16px 32px}
  .scrim{position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:35}
}

/* ---------- cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px; margin:0 0 18px; box-shadow:var(--shadow);
}
.card > h2, .card > h3{margin-bottom:4px}
.card .hint{color:var(--muted); font-size:13px; margin:0 0 14px}
.card.pad-0{padding:0; overflow:hidden}
.card.pad-0 .head{padding:16px 20px; border-bottom:1px solid var(--line-2)}

/* centred pages: login / setup */
body.plain{display:grid; place-items:center; min-height:100vh; padding:20px; background:var(--bg)}
body.plain .card{width:min(430px,100%); padding:28px; margin:0}
body.plain .logo{display:flex; align-items:center; gap:11px; margin-bottom:20px}
body.plain .logo .mark{
  width:40px; height:40px; border-radius:11px; flex:0 0 40px; font-size:16px;
  background:linear-gradient(140deg,var(--brand),var(--brand-2)); color:#fff;
  display:grid; place-items:center; font-weight:700;
}

/* ---------- stats ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(152px,1fr)); gap:12px; margin:0 0 18px}
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:15px 16px; box-shadow:var(--shadow); color:var(--ink); display:block;
}
.stat:hover{border-color:var(--brand); text-decoration:none}
.stat .k{font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.01em}
.stat .v{font-size:27px; font-weight:700; line-height:1.15; margin-top:5px; letter-spacing:-.02em}
.stat .d{font-size:11.5px; color:var(--muted); margin-top:2px}
.stat.accent .v{color:var(--brand)}
.stat.good .v{color:var(--ok)}
.stat.warn .v{color:var(--warn)}
.stat.bad  .v{color:var(--bad)}

/* ---------- forms ---------- */
label{display:block; margin:0 0 14px; font-size:12.5px; font-weight:650; color:var(--ink-2)}
label .req{color:var(--bad)}
input,select,textarea{
  width:100%; padding:9px 11px; margin-top:5px; font:inherit; font-size:14px;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:9px;
  transition:border-color .12s, box-shadow .12s;
}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);
}
textarea{resize:vertical; min-height:92px; line-height:1.5}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:30px}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
@media (max-width:620px){ .grid-2{grid-template-columns:1fr} }

.inline-form{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.inline-form label{margin:0}
.inline-form input,.inline-form select{width:auto; margin-top:0; min-width:150px}
.inline-form .w-sm{min-width:90px; max-width:110px}

.check{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:550; color:var(--ink-2); margin:0}
.check input{width:16px; height:16px; margin:0; accent-color:var(--brand)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--brand); color:#fff; border:1px solid var(--brand);
  padding:9px 16px; border-radius:9px; font:inherit; font-size:14px; font-weight:600;
  cursor:pointer; white-space:nowrap; transition:background .12s, border-color .12s;
}
.btn:hover{background:var(--brand-2); border-color:var(--brand-2); text-decoration:none; color:#fff}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.block{width:100%; padding:11px}
.btn.ghost{background:var(--surface); color:var(--ink-2); border-color:var(--line)}
.btn.ghost:hover{background:var(--surface-2); color:var(--ink); border-color:var(--muted)}
.btn.danger{background:var(--surface); color:var(--bad); border-color:var(--line)}
.btn.danger:hover{background:var(--bad-soft); border-color:var(--bad); color:var(--bad)}
.btn.sm{padding:6px 11px; font-size:13px; border-radius:8px}

.chip{
  display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600;
  padding:5px 10px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2); cursor:pointer;
}
.chip:hover{border-color:var(--brand); color:var(--brand); text-decoration:none}
.chip.call{color:var(--info); border-color:color-mix(in srgb,var(--info) 35%,var(--line))}
.chip.wa{color:var(--ok); border-color:color-mix(in srgb,var(--ok) 35%,var(--line))}

/* ---------- notices ---------- */
.note{
  display:flex; gap:10px; align-items:flex-start;
  padding:11px 14px; border-radius:10px; margin:0 0 14px; font-size:13.5px;
  background:var(--ok-soft); color:var(--ok); border:1px solid color-mix(in srgb,var(--ok) 28%,transparent);
}
.note.bad{background:var(--bad-soft); color:var(--bad); border-color:color-mix(in srgb,var(--bad) 28%,transparent)}
.note.info{background:var(--info-soft); color:var(--info); border-color:color-mix(in srgb,var(--info) 28%,transparent)}
.note.warn{background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 28%,transparent)}
.note b{font-weight:700}
.note code{
  font:600 14px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:rgba(0,0,0,.07); padding:2px 8px; border-radius:6px; letter-spacing:.04em;
}

/* ---------- filters ---------- */
.filters{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:12px 14px; margin:0 0 14px; box-shadow:var(--shadow);
}
.filters input,.filters select{width:auto; margin-top:0; min-width:148px}
.filters .search{min-width:230px; flex:1; max-width:340px}

/* ---------- tables ---------- */
.tablewrap{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow-x:auto; box-shadow:var(--shadow);
}
table.grid{border-collapse:collapse; width:100%; font-size:14px}
.grid th{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  color:var(--muted); background:var(--surface-2); text-align:left;
  padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.grid td{padding:12px 14px; border-bottom:1px solid var(--line-2); vertical-align:middle}
.grid tbody tr:last-child td{border-bottom:0}
.grid tbody tr:hover{background:var(--surface-2)}
.grid td.actions{white-space:nowrap; text-align:right}
.grid td.actions > *{margin-left:5px}
.grid .lead-name{font-weight:600; color:var(--ink)}
.grid .lead-name:hover{color:var(--brand)}
.empty{text-align:center; padding:48px 20px; color:var(--muted)}
.empty .big{font-size:30px; opacity:.4; margin-bottom:8px}
.nowrap{white-space:nowrap}
.sm{font-size:12.5px}
.muted{color:var(--muted)}
.mono{font:13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.overdue{color:var(--bad); font-weight:650}

/* ---------- badges ---------- */
.badge{
  display:inline-block; padding:3px 9px; border-radius:999px;
  font-size:11.5px; font-weight:650; white-space:nowrap; letter-spacing:.005em;
}
.b-new{background:var(--info-soft); color:var(--info)}
.b-good{background:var(--ok-soft); color:var(--ok)}
.b-visit{background:var(--info-soft); color:var(--info); font-weight:600}
.b-warn{background:var(--warn-soft); color:var(--warn)}
.b-bad{background:var(--bad-soft); color:var(--bad)}
.b-dead{background:#3a3a3a; color:#fff; text-decoration:line-through}
.b-won{background:var(--ok); color:#fff}
.b-mid{background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line)}

/* ---------- lead detail ---------- */
.cols{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:18px; align-items:start}
@media (max-width:900px){ .cols{grid-template-columns:1fr} }
.lead-hero{display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:16px}
.lead-hero .av{
  width:46px; height:46px; border-radius:12px; flex:0 0 46px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand); font-weight:700; font-size:17px;
}
.lead-hero h2{margin-bottom:3px}
.lead-hero .num{font:600 15px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--ink-2)}
.lead-hero .cta{display:flex; gap:7px; margin-top:9px; flex-wrap:wrap}

.facts{display:grid; grid-template-columns:120px 1fr; gap:9px 16px; font-size:13.5px; margin:0}
.facts dt{color:var(--muted); font-weight:600}
.facts dd{margin:0; color:var(--ink)}

.timeline{list-style:none; margin:0; padding:0}
.timeline li{
  position:relative; padding:0 0 16px 20px; border-left:2px solid var(--line-2);
}
.timeline li:last-child{padding-bottom:0; border-left-color:transparent}
.timeline li::before{
  content:""; position:absolute; left:-5px; top:5px; width:8px; height:8px;
  border-radius:50%; background:var(--brand);
}
.timeline .t-top{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.timeline .t-who{font-weight:650; font-size:13.5px}
.timeline .t-when{font-size:11.5px; color:var(--muted)}
.timeline .t-what{font-size:13.5px; color:var(--ink-2); margin-top:1px}

/* ---------- tabs & pager ---------- */
.tabs{display:flex; gap:6px; margin:0 0 16px; flex-wrap:wrap}
.tabs a{
  padding:7px 14px; border-radius:999px; font-size:13.5px; font-weight:600;
  color:var(--ink-2); background:var(--surface); border:1px solid var(--line);
}
.tabs a:hover{border-color:var(--muted); text-decoration:none}
.tabs a.on{background:var(--brand); border-color:var(--brand); color:#fff}
.tabs a .n{opacity:.7; margin-left:5px; font-weight:600}

.pager{display:flex; gap:5px; margin:16px 0 0; flex-wrap:wrap; align-items:center}
.pager a,.pager span{
  min-width:34px; text-align:center; padding:6px 10px; border-radius:8px;
  font-size:13.5px; font-weight:600; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line);
}
.pager a:hover{border-color:var(--brand); color:var(--brand); text-decoration:none}
.pager a.on{background:var(--brand); border-color:var(--brand); color:#fff}
.pager .gap{border:0; background:none; color:var(--muted)}

/* ---------- misc ---------- */
.pickbox{
  display:flex; flex-wrap:wrap; gap:9px 18px; padding:14px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px; margin:0 0 14px;
}
.rowline{display:flex; gap:7px; align-items:center; flex-wrap:wrap}
.rowline + .rowline{margin-top:7px}
.kv{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:7px 0; border-bottom:1px solid var(--line-2); font-size:13.5px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted); min-width:0; word-break:break-word}
.kv .v{font-weight:600; min-width:0; word-break:break-word; text-align:right}
.pre{
  background:var(--surface-2); border:1px solid var(--line); border-radius:9px;
  padding:11px 13px; font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  overflow-x:auto; white-space:pre-wrap; word-break:break-all;
}
.sep{height:1px; background:var(--line-2); margin:16px 0}
.right{text-align:right}

/* ---------- team table ---------- */
.inline-form .f-name{min-width:0; width:112px}
.inline-form .f-team{min-width:0; width:100px}
.inline-form .f-tour{min-width:0; width:140px}
.inline-form .f-num{min-width:0; width:52px; text-align:center}
.act-stack{display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.act-stack .inline-form{justify-content:flex-end; gap:6px}
.grid td.actions > *{margin-left:0}
.inline-form .f-role{min-width:0; width:126px}
.grid td.actions .act-stack .inline-form .f-tour{width:160px}

/* checkbox with a longer explanation under it (setup page) */
.check.stack{display:flex; align-items:flex-start; gap:9px; margin:14px 0 18px; font-weight:500; line-height:1.45}
.check.stack input{margin-top:2px; flex:0 0 auto}
.check.stack .sm{display:block; font-weight:400; margin-top:2px}

/* ---------- lead list as cards on a phone ---------- */
@media (max-width:640px){
  .tablewrap.cardwrap{overflow-x:visible; background:transparent; border:0; box-shadow:none}
  table.cardify{display:block}
  table.cardify thead{display:none}
  table.cardify tbody{display:block}
  table.cardify tbody tr{
    display:block; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-lg); box-shadow:var(--shadow); padding:12px 14px; margin-bottom:10px;
  }
  table.cardify tbody tr:hover{background:var(--surface)}
  table.cardify td{
    display:flex; align-items:baseline; gap:10px;
    padding:3px 0; border:0; font-size:13.5px;
  }
  table.cardify td::before{
    content:attr(data-l); flex:0 0 94px;
    font-size:11px; text-transform:uppercase; letter-spacing:.05em;
    font-weight:700; color:var(--muted);
  }
  table.cardify tbody tr{display:flex; flex-direction:column}
  table.cardify td.cell-name{order:-1; padding-bottom:7px; margin-bottom:5px; border-bottom:1px solid var(--line-2)}
  table.cardify td.cell-name::before{display:none}
  table.cardify td.cell-name .lead-name{font-size:16px; font-weight:650}
  table.cardify td.actions{
    display:flex; gap:7px; text-align:left; margin-top:9px; padding-top:10px;
    border-top:1px solid var(--line-2);
  }
  table.cardify td.actions::before{display:none}
  table.cardify td.actions > *{margin-left:0; flex:1; justify-content:center; padding:9px 10px}
  table.cardify td[colspan]{display:block; padding:0}
  table.cardify td[colspan]::before{display:none}
}

/* ---------- tags ---------- */
/* Six tones; a tag's name always maps to the same one. The name is always
   written out, so colour is a helper, never the only signal. */
:root{
  --tg0:#1d4e9b; --tg0-s:#eaf1fb;
  --tg1:#136c43; --tg1-s:#e6f4ec;
  --tg2:#8a5a00; --tg2-s:#fcf2de;
  --tg3:#6b3fa0; --tg3-s:#f2ecfa;
  --tg4:#0f6670; --tg4-s:#e3f4f5;
  --tg5:#9d2f1c; --tg5-s:#fdf0ec;
}
@media (prefers-color-scheme:dark){
  :root{
    --tg0:#92b8f0; --tg0-s:#141f33;
    --tg1:#7fd3a6; --tg1-s:#13291f;
    --tg2:#e5bd73; --tg2-s:#2b2211;
    --tg3:#c4a6ef; --tg3-s:#241a33;
    --tg4:#7fd0d8; --tg4-s:#102a2d;
    --tg5:#f0a08b; --tg5-s:#2b1612;
  }
}
.tg{
  display:inline-flex; align-items:center; gap:2px; max-width:100%;
  padding:2px 9px; border-radius:999px; font-size:12px; font-weight:650; line-height:1.5;
  white-space:nowrap; border:1px solid transparent;
}
a.tg:hover{text-decoration:none; border-color:currentColor}
.tg-0{color:var(--tg0); background:var(--tg0-s)}
.tg-1{color:var(--tg1); background:var(--tg1-s)}
.tg-2{color:var(--tg2); background:var(--tg2-s)}
.tg-3{color:var(--tg3); background:var(--tg3-s)}
.tg-4{color:var(--tg4); background:var(--tg4-s)}
.tg-5{color:var(--tg5); background:var(--tg5-s)}
.tg-more{color:var(--ink-2); background:var(--surface-2); border-color:var(--line)}

/* lead page */
.tagbox{
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r);
  padding:12px 14px; margin:0 0 4px;
}
.tagbox-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:9px}
.tagbox-head h4{font-size:13px; font-weight:700; color:var(--ink)}
.taglist{list-style:none; margin:0 0 10px; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.taglist .tg{padding:0 3px 0 0; font-size:13px}
.taglist .tg-name{color:inherit; padding:4px 4px 4px 11px; min-width:0; overflow:hidden; text-overflow:ellipsis}
.taglist .tg-name:hover{text-decoration:underline}
.tg-x{
  display:inline-grid; place-items:center; width:26px; height:26px; flex:0 0 26px;
  border:0; border-radius:50%; background:transparent; color:inherit; opacity:.7;
  font:600 16px/1 inherit; cursor:pointer; padding:0;
}
.tg-x:hover{opacity:1; background:color-mix(in srgb,currentColor 14%,transparent)}
.tg-x:focus-visible,.tg-plus:focus-visible,.tg:focus-visible,.taglist .tg-name:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
}
.tag-empty{margin:0 0 10px}
.tag-add{display:flex; gap:8px; align-items:center}
.tag-add input{margin-top:0; flex:1; min-width:0}
.tag-suggest{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:10px}
.tag-suggest .muted{margin-right:2px}
.tg-plus{
  font:inherit; font-size:12.5px; font-weight:600; color:var(--ink-2);
  background:var(--surface); border:1px dashed var(--line); border-radius:999px;
  padding:4px 11px; cursor:pointer; white-space:nowrap;
  transition:border-color .12s, color .12s;
}
.tg-plus:hover{border-color:var(--brand); border-style:solid; color:var(--brand)}
.tag-tip{margin:8px 0 0; font-size:11.5px}

/* lead list */
.row-tags{display:flex; flex-wrap:wrap; gap:4px; margin-top:5px}
.row-tags .tg{font-size:11.5px; padding:1px 8px; max-width:160px; overflow:hidden; text-overflow:ellipsis}

@media (max-width:640px){
  .tg-x{width:34px; height:34px; flex-basis:34px}
  .taglist .tg-name{padding:7px 4px 7px 12px}
  .tg-plus{padding:8px 13px}
  .tag-add .btn{padding:10px 14px}
  table.cardify td.cell-name{flex-direction:column; align-items:flex-start; gap:0}
  .row-tags .tg{padding:4px 10px; font-size:12px}
}

/* ---------- form fields with a separate <label for> ---------- */
label[for]{margin:0}
label[for] + :is(input,select,textarea){margin-bottom:14px}
.field-help,.field-err{margin:-9px 0 14px; font-size:12px; line-height:1.45}
.field-help{color:var(--muted)}
.field-err{color:var(--bad); font-weight:600}
.is-bad{border-color:var(--bad)}
.is-bad:focus{border-color:var(--bad); box-shadow:0 0 0 3px var(--bad-soft)}
.fs{border:0; margin:0 0 6px; padding:0; min-width:0}
.fs legend{
  font-size:11px; text-transform:uppercase; letter-spacing:.07em; font-weight:700;
  color:var(--muted); padding:0; margin:0 0 10px;
}
.fs + .fs{border-top:1px solid var(--line-2); padding-top:16px}
.span-2{grid-column:1 / -1}
.form-narrow{max-width:760px}
.form-foot{display:flex; gap:8px; flex-wrap:wrap; padding-top:16px; border-top:1px solid var(--line-2); margin-top:4px}
@media (max-width:640px){
  .form-foot .btn{flex:1; padding:12px}
  input,select,textarea{font-size:16px}  /* stops phones zooming into the field */
}

/* ---------- tours page ---------- */
.cols-flip{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
@media (max-width:900px){ .cols-flip{grid-template-columns:1fr} }
.tour-list{list-style:none; margin:0; padding:0}
.tour-list li{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  padding:14px 20px; border-bottom:1px solid var(--line-2);
}
.tour-list li:last-child{border-bottom:0}
.tour-list li.off .tour-name b{color:var(--muted)}
.tour-list li.editing{background:var(--brand-soft)}
.tour-main{flex:1; min-width:200px}
.tour-name{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.tour-name b{font-size:14.5px}
.tour-nums{margin-top:2px}
.tour-kw{margin-top:4px; color:var(--ink-2); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11.5px}
.tour-acts{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.icon-btn{
  width:32px; height:32px; display:inline-grid; place-items:center; padding:0;
  border:1px solid var(--line); border-radius:8px; background:var(--surface);
  color:var(--ink-2); font:600 14px/1 inherit; cursor:pointer;
}
.icon-btn:hover:not(:disabled){border-color:var(--brand); color:var(--brand)}
.icon-btn:disabled{opacity:.35; cursor:default}
.icon-btn:focus-visible,.btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
@media (max-width:640px){
  .tour-list li{padding:14px 16px}
  .icon-btn{width:40px; height:40px}
  .tour-acts .btn.sm{padding:9px 12px}
}

/* ===================== v15: bookings, messages, bulk, alerts ===================== */

/* trips & payments on a lead */
.trip{border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; margin:0 0 10px; background:var(--surface-2)}
.trip-top{display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap}
.trip-top b{font-size:14.5px}
.trip-top .badge{margin-left:auto}
.paybar{height:8px; border-radius:99px; background:var(--line); overflow:hidden; margin:10px 0 8px}
.paybar span{display:block; height:100%; background:var(--ok); border-radius:99px}
.trip-nums{display:flex; gap:6px 18px; flex-wrap:wrap; color:var(--ink-2)}
.trip-edit,.trip-add{margin-top:10px}
.trip-edit summary{cursor:pointer; color:var(--brand); font-size:13px; font-weight:600; list-style:none}
.trip-edit summary::-webkit-details-marker,.trip-add summary::-webkit-details-marker{display:none}
.trip-edit summary::before{content:"▸ "}
.trip-edit[open] summary::before{content:"▾ "}
.trip-edit form,.trip-add form{margin-top:12px}
.trip-add summary{list-style:none; display:inline-flex}
.trip-add[open] summary{margin-bottom:4px}

.bookbox{border:1px dashed color-mix(in srgb,var(--ok) 55%,var(--line)); background:var(--ok-soft);
  border-radius:var(--r); padding:12px 14px 2px; margin:0 0 14px}
.bookbox-t{font-weight:700; color:var(--ok); margin:0 0 10px; font-size:13.5px}

/* WhatsApp message buttons */
.wa-list{display:flex; flex-direction:column; gap:8px}
.wa-item{display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:1px solid var(--line);
  border-radius:var(--r); color:var(--ink); background:var(--surface); transition:border-color .12s, background .12s}
.wa-item:hover{border-color:var(--ok); background:var(--ok-soft); text-decoration:none}
.wa-t{font-weight:650; font-size:13.5px; color:var(--ok)}
.wa-t::before{content:"💬 "}
.wa-p{font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wa-bubble{margin-top:8px; background:var(--ok-soft); border-radius:4px 12px 12px 12px; padding:9px 12px;
  font-size:13px; line-height:1.5; color:var(--ink-2); max-width:520px}
.blanks{display:flex; flex-wrap:wrap; gap:6px; margin-top:-6px}
.blanks .tg-plus{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px}

/* lead list: tick boxes + bulk bar */
.grid th.ck,.grid td.ck{width:36px; padding-right:0}
.ck input{width:18px; height:18px; margin:0; accent-color:var(--brand); cursor:pointer}
.grid tbody tr.picked{background:var(--brand-soft)}
.bulkbar{
  position:sticky; top:8px; z-index:20; display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center;
  background:var(--ink); color:var(--surface); border-radius:var(--r-lg); padding:10px 14px; margin:0 0 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.bulkbar[hidden]{display:none}
.bulk-n{font-size:13.5px; margin-right:4px}
.bulk-group{display:inline-flex; gap:6px; align-items:center}
.bulkbar input,.bulkbar select{width:auto; min-width:140px; margin:0; padding:6px 10px; font-size:13px}
.bulkbar .btn.ghost{background:transparent; color:var(--surface); border-color:color-mix(in srgb,var(--surface) 40%,transparent)}
.tries{display:inline-block; margin-left:4px; font-size:11px; font-weight:700; color:var(--muted)}
.tries.hi{color:var(--bad)}
.filters .check{margin:0 4px}
.push-right{margin-left:auto}

/* reports */
.seg{display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden}
.seg a{padding:8px 12px; font-size:13.5px; font-weight:600; color:var(--ink-2); border-right:1px solid var(--line)}
.seg a:last-child{border-right:0}
.seg a:hover{background:var(--surface-2); text-decoration:none}
.seg a.on{background:var(--brand); color:#fff}
.tabs.sub a{font-size:12.5px; padding:5px 12px}

/* duplicates */
.dup-head{display:flex; gap:10px; align-items:baseline; margin-bottom:10px}
.dup-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; margin-bottom:12px}
.dup-item{display:flex; gap:10px; align-items:flex-start; margin:0; padding:12px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r); font-weight:500; color:var(--ink)}
.dup-item:has(input:checked){border-color:var(--brand); background:var(--brand-soft)}
.dup-item input{width:18px; height:18px; margin:2px 0 0; accent-color:var(--brand); flex:0 0 auto}
.dup-body{display:flex; flex-direction:column; gap:3px; min-width:0}
.dup-name{font-weight:700; font-size:14px}
.star{color:var(--warn)}

/* new-lead alerts */
.toasts{position:fixed; right:16px; bottom:16px; z-index:60; display:flex; flex-direction:column; gap:8px; max-width:calc(100vw - 32px)}
.toast{display:flex; flex-direction:column; gap:1px; min-width:240px; padding:12px 16px; border-radius:12px;
  background:var(--ink); color:var(--surface); box-shadow:0 10px 30px rgba(0,0,0,.25);
  animation:toast-in .25s ease-out; transition:opacity .4s, transform .4s}
.toast:hover{text-decoration:none; color:var(--surface)}
.toast b{font-size:13px; color:#ffd27a}
.toast span{font-size:14px; font-weight:600}
.toast em{font-style:normal; font-size:12px; opacity:.75}
.toast.gone{opacity:0; transform:translateY(8px)}
@keyframes toast-in{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .toast{animation:none; transition:none} }
.bell{background:none; border:0; padding:0; font:inherit; font-size:12px; font-weight:600; color:var(--muted); cursor:pointer; white-space:nowrap}
.bell:hover{color:var(--brand)}
.bell.on{color:var(--ok)}

@media (max-width:640px){
  .bulkbar{top:4px; padding:10px}
  .bulk-group{width:100%}
  .bulk-group > :first-child{flex:1}
  .push-right{margin-left:0}
  .seg{width:100%}
  .seg a{flex:1; text-align:center; padding:9px 4px}
  table.cardify td.ck{order:-2; padding:0 0 4px}
  table.cardify td.ck::before{content:"Select"; flex:0 0 auto}
  .trip-top .badge{margin-left:0}
}

/* v15 fixes */
.filters .check input{width:16px; min-width:0; height:16px}
.side nav .bell{display:block; margin:14px 10px 4px; padding:8px 10px; width:calc(100% - 20px); text-align:left;
  border:1px dashed var(--line); border-radius:8px; font-size:12.5px}
.side nav .bell.on{border-style:solid; background:var(--ok-soft)}
form.inline{display:inline}

/* lead split control panel */
.explain .steps{margin:6px 0 0; padding-left:20px; font-size:14px; line-height:1.7}
.split-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap}
.stepper{display:inline-flex; align-items:center; gap:6px}
.stepper input{width:64px; margin:0; text-align:center; font-weight:700; padding:7px 4px}
.stepper input.changed{border-color:var(--brand); background:var(--brand-soft)}
.stepper .icon-btn{width:36px; height:36px; font-size:18px}
.savebar{position:sticky; bottom:0; z-index:15; display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap;
  padding:12px 0; background:linear-gradient(to top, var(--bg) 70%, transparent)}
.savebar #dirty{margin-right:auto; color:var(--brand); font-weight:600}
@media (max-width:640px){
  .stepper .icon-btn{width:44px; height:44px}
  .stepper input{width:70px; padding:10px 4px}
  .savebar .btn{flex:1}
}
@media (max-width:640px){
  .split-tour table.cardify tbody tr{box-shadow:none; border:0; border-bottom:1px solid var(--line-2); border-radius:0; margin:0}
  .split-tour table.cardify tbody tr:last-child{border-bottom:0}
}

/* upload leads */
.bigsteps{list-style:none; counter-reset:st; margin:0; padding:0}
.bigsteps > li{counter-increment:st; position:relative; padding:0 0 22px 46px}
.bigsteps > li:last-child{padding-bottom:0}
.bigsteps > li::before{content:counter(st); position:absolute; left:0; top:-2px; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; background:var(--brand); color:#fff; font-weight:700}
.bigsteps > li > b{font-size:15px; display:block; margin-bottom:3px}
.bigsteps > li > p{margin:0 0 10px}
.upform{margin-top:10px}
.upform input[type=file]{padding:10px; background:var(--surface-2); border-style:dashed}
.cols-help td{padding:8px 10px; font-size:13.5px; vertical-align:top}
.cols-help td:first-child{white-space:nowrap; width:1%}
.result{border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
.problems{margin:6px 0 0; padding-left:20px; font-size:13px; color:var(--bad)}
.src{display:inline-block; margin-top:2px; font-size:11.5px; font-weight:600; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:0 6px}
.src:hover{border-color:var(--brand); color:var(--brand); text-decoration:none}

/* ---------- property sizes ---------- */
.size-chips{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px}

/* ---------- site visits ---------- */
.visit{border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; margin:0 0 12px; display:grid; gap:6px; background:var(--surface)}
.visit-today{border-color:var(--warn); box-shadow:0 0 0 2px var(--warn-soft)}
.visit-top{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.visit-acts form{margin:0}
.visit-edit summary{cursor:pointer; font-size:13px; color:var(--brand); margin-top:2px}
.visit-edit form{margin-top:10px}
.visit-add{margin-top:6px}
.visit-add form{margin-top:12px}
.sent-box{border:1px solid var(--line); border-radius:var(--r); padding:8px 12px 10px; margin:12px 0; display:flex; flex-wrap:wrap; gap:6px 16px}
.sent-box legend{font-size:13px; font-weight:600; padding:0 4px}
.chk{display:inline-flex; gap:6px; align-items:center; font-size:14px; font-weight:400; margin:0; min-height:32px}
.chk input{width:auto; margin:0}
button.chip{cursor:pointer; font-family:inherit}

/* ---------- visit calendar ---------- */
.cal-head{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px}
.cal-head h3{margin:0 6px; min-width:140px; text-align:center}
.cal-filter{margin-left:auto}
.cal{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px}
.cal-dow{font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; padding:2px 4px}
.cal-day{min-height:92px; border:1px solid var(--line); border-radius:8px; padding:4px; display:flex; flex-direction:column; gap:3px; background:var(--surface); min-width:0}
.cal-empty{border:0; background:transparent}
.cal-past{background:var(--surface-2)}
.cal-sun .cal-n{color:var(--bad)}
.cal-today{border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-soft)}
.cal-n{font-size:12.5px; font-weight:700; display:flex; justify-content:space-between; align-items:center}
.cal-count{font-size:11px; background:var(--brand); color:#fff; border-radius:999px; padding:0 6px; line-height:17px}
.cal-v{display:block; font-size:11.5px; line-height:1.3; padding:2px 5px; border-radius:5px; background:var(--info-soft); color:var(--info); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cal-v:hover{text-decoration:none; filter:brightness(.96)}
.cal-done{background:var(--ok-soft); color:var(--ok)}
.cal-noshow{background:var(--bad-soft); color:var(--bad)}
.cal-cancelled{background:var(--surface-2); color:var(--muted); text-decoration:line-through}
.vlist{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.vl{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; border-bottom:1px solid var(--line-2); padding-bottom:10px}
.vl-time{font-weight:700; font-size:13px; white-space:nowrap}
.vl-main{display:grid; gap:2px; min-width:0}
.vl-acts{grid-column:2; display:flex; gap:6px; flex-wrap:wrap}
@media (max-width:700px){
  .cal{gap:2px}
  .cal-day{min-height:54px; padding:3px}
  .cal-v{display:none}
  .cal-dow{font-size:10px; padding:0}
}
.row-acts{display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; align-items:center}
.row-acts form{margin:0}