/* SPP Flip Hub v2 — dark, dense, phone-friendly (used on job sites) */
:root{
  --bg:#0B0F17; --panel:#131A28; --panel2:#0F1520; --line:#22304A;
  --ink:#E9EDF5; --dim:#8B98B0; --faint:#5C6980;
  --gold:#E8B44C; --teal:#3FBFB4; --green:#5BD98A; --red:#F26D6D;
  --blue:#6FA8FF; --purple:#B08AF5;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.45 "Segoe UI",system-ui,-apple-system,sans-serif}
a{color:var(--teal);text-decoration:none}
.mono{font-family:ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace}

/* topbar */
.topbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:14px 20px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#121A2A,#0D1320);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.mark{background:var(--gold);color:#20180a;font-weight:800;letter-spacing:.06em;
  border-radius:9px;padding:7px 10px;font-size:15px}
.brand-name{display:block;font-weight:650;font-size:15.5px;line-height:1.15}
.brand-sub{display:block;color:var(--dim);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase}
.tabs{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.tabs a{padding:8px 14px;border-radius:9px;color:var(--dim);font-weight:550}
.tabs a.on{background:var(--panel);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
main{max-width:1180px;margin:0 auto;padding:18px 16px 80px}
.loading{color:var(--dim);padding:60px;text-align:center}

/* portfolio strip */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  margin-bottom:18px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px}
.kpi .v{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums}
.kpi .k{color:var(--dim);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  margin-top:2px}
.kpi .v.pos{color:var(--green)} .kpi .v.neg{color:var(--red)}
.kpi .sub{color:var(--dim);font-size:12px;margin-top:3px}

/* pipeline */
.stagehead{display:flex;align-items:center;gap:10px;margin:22px 0 10px}
.stagehead h2{margin:0;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim)}
.stagehead .rule{flex:1;height:1px;background:var(--line)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:15px 16px;cursor:pointer;transition:border-color .12s}
.pcard:hover{border-color:var(--teal)}
.pcard .top{display:flex;justify-content:space-between;align-items:start;gap:8px}
.pcard h3{margin:0;font-size:16.5px}
.pcard .addr{color:var(--dim);font-size:12.5px;margin-top:1px}
.pcard .nums{display:flex;gap:16px;margin:12px 0 4px;flex-wrap:wrap}
.pcard .nums div{min-width:70px}
.pcard .nums .l{color:var(--dim);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.pcard .nums .n{font-size:15.5px;font-weight:650;font-variant-numeric:tabular-nums}
.pos{color:var(--green)} .neg{color:var(--red)}
.bar{height:6px;background:var(--panel2);border-radius:4px;margin:10px 0 4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--teal);border-radius:4px}
.bar i.over{background:var(--red)}
.bar-lbl{color:var(--dim);font-size:11.5px}
.badges{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}

/* chips */
.chip{display:inline-block;padding:3px 9px;border-radius:6px;font-size:11px;
  font-weight:650;letter-spacing:.06em;text-transform:uppercase}
.st-prospect{background:#233047;color:#9FB4D8}
.st-offer{background:#3A2F14;color:var(--gold)}
.st-under_contract{background:#3A2F14;color:#F5C96A}
.st-rehab{background:#123830;color:var(--teal)}
.st-listed{background:#251A44;color:var(--purple)}
.st-sold{background:#143521;color:var(--green)}
.st-dead{background:#2A2A2E;color:#8A8A93}
.chip.task{background:#233047;color:#9FB4D8}
.chip.task.overdue{background:#41161B;color:var(--red)}
.chip.payer{background:#233047;color:#BFD0EA;text-transform:none}

/* property detail */
.crumb{color:var(--dim);font-size:13px;margin-bottom:10px;display:inline-block}
.phead{display:flex;align-items:start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.phead h1{margin:0;font-size:24px}
.phead .addr{color:var(--dim)}
.phead select{margin-left:auto}
.datebar{display:flex;gap:18px;flex-wrap:wrap;color:var(--dim);font-size:12.5px;
  margin-bottom:16px}
.datebar b{color:var(--ink);font-weight:600}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;margin-bottom:16px}
.panel>h2{margin:0 0 12px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);display:flex;align-items:center;gap:10px}
.panel>h2 .spacer{flex:1}

/* analyzer */
.calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.calc .cell{background:var(--panel2);border-radius:10px;padding:10px 12px}
.calc .l{color:var(--dim);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.calc .n{font-size:16.5px;font-weight:650;font-variant-numeric:tabular-nums;margin-top:2px}
.calc .cell.big{grid-column:span 2}
.calc .cell.big .n{font-size:23px}
.hint{color:var(--dim);font-size:12.5px;margin-top:10px}
.hint b{color:var(--ink)}

/* tables */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{color:var(--dim);text-align:left;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:7px 10px;border-bottom:1px solid var(--line)}
td{padding:8px 10px;border-bottom:1px solid var(--panel2);vertical-align:top}
tbody tr{cursor:pointer}
tbody tr:hover{background:#182135}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tfoot td{font-weight:700;border-top:1px solid var(--line);border-bottom:none}
.muted{color:var(--dim)} .small{font-size:12px}
.done{opacity:.5;text-decoration:line-through}

/* tasks */
.tasklist{list-style:none;margin:0;padding:0}
.tasklist li{display:flex;align-items:center;gap:11px;padding:9px 6px;
  border-bottom:1px solid var(--panel2)}
.tasklist li:last-child{border-bottom:none}
.tasklist input[type=checkbox]{width:17px;height:17px;accent-color:var(--teal);
  flex-shrink:0;cursor:pointer}
.tasklist .t{flex:1;cursor:pointer}
.tasklist .meta{color:var(--dim);font-size:12px}
.tasklist .due.overdue{color:var(--red);font-weight:650}

/* buttons + forms */
button,.btn{background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  border-radius:9px;padding:7px 14px;font-size:13.5px;cursor:pointer;font-weight:550}
button:hover,.btn:hover{border-color:var(--teal)}
button.primary{background:var(--gold);border-color:var(--gold);color:#20180a;font-weight:700}
button.danger{color:var(--red)}
select,input,textarea{background:var(--panel2);color:var(--ink);
  border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:14px;
  font-family:inherit}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--teal)}

/* filter row */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.filters input,.filters select{min-width:130px}
.filters .spacer{flex:1}

/* modal */
#modal-root:empty{display:none}
.overlay{position:fixed;inset:0;background:rgba(4,7,14,.72);z-index:50;
  display:flex;align-items:flex-start;justify-content:center;padding:40px 14px;
  overflow-y:auto}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  width:100%;max-width:560px;padding:20px 22px}
.modal h2{margin:0 0 16px;font-size:17px}
.modal form{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.modal label{display:flex;flex-direction:column;gap:4px;font-size:12px;
  color:var(--dim);letter-spacing:.05em}
.modal label.wide{grid-column:span 2}
.modal .actions{grid-column:span 2;display:flex;gap:9px;margin-top:8px}
.modal .actions .spacer{flex:1}

/* docs */
.doclist{list-style:none;margin:0;padding:0}
.doclist li{display:flex;gap:12px;align-items:center;padding:8px 6px;
  border-bottom:1px solid var(--panel2);font-size:13.5px}
.doclist .folder{color:var(--dim);font-size:12px}
.doclist .size{margin-left:auto;color:var(--dim);font-size:12px;white-space:nowrap}

/* toast */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:99;
  background:var(--panel);border:1px solid var(--teal);color:var(--ink);
  border-radius:11px;padding:10px 20px;font-size:14px;opacity:0;
  pointer-events:none;transition:opacity .2s}
#toast.show{opacity:1}
#toast.err{border-color:var(--red)}

@media(max-width:640px){
  .modal form{grid-template-columns:1fr}
  .modal label.wide,.modal .actions{grid-column:span 1}
  .calc .cell.big{grid-column:span 1}
  .phead select{margin-left:0}
}

/* --- v3: login, userbox, activity --- */
#userbox{display:flex;gap:7px;align-items:center;margin-left:8px}
.small-btn{padding:5px 10px;font-size:12px;color:var(--dim)}
.login-wrap{display:flex;justify-content:center;padding:8vh 10px}
.login{max-width:360px;width:100%;text-align:center}
.login form{display:flex;flex-direction:column;gap:12px;text-align:left}
.login label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--dim)}
.actlist{list-style:none;margin:0;padding:0}
.actlist li{display:flex;gap:10px;align-items:baseline;padding:7px 4px;
  border-bottom:1px solid var(--panel2);font-size:13.5px;flex-wrap:wrap}
.actlist li:last-child{border-bottom:none}
.actlist .meta{margin-left:auto;color:var(--dim);font-size:12px;white-space:nowrap}

/* analyzer cells that open the edit modal */
.calc .cell.clickable{cursor:pointer;transition:border-color .12s,background .12s;
  border:1px solid transparent}
.calc .cell.clickable:hover{border-color:var(--teal);background:#16203200}


/* ---- uploads / file rows (added 2026-09-08) ---- */
.uprow {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px dashed var(--line, #26304a);
  border-radius: 10px;
  transition: background .15s, border-color .15s;
}
.uprow.over {
  border-color: var(--accent, #4da3ff);
  background: rgba(77, 163, 255, .10);
}
.doclist li .xbtn {
  margin-left: 8px;
  padding: 0 7px;
  line-height: 1.5;
  font-size: 15px;
  color: var(--muted, #8b97ad);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.doclist li .xbtn:hover {
  color: #ff8a8a;
  border-color: #5a2b2b;
  background: rgba(255, 90, 90, .10);
}


/* ---- photos + receipts (added 2026-09-08) ---- */
.photogrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.photogrid .shot {
  margin: 0;
  border: 1px solid var(--line, #26304a);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, .02);
}
.photogrid .shot img {
  display: block;
  width: 100%;
  height: 118px;
  object-fit: cover;
  background: #0d1220;
}
.photogrid .shot figcaption {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted, #8b97ad);
  word-break: break-all;
}
.photogrid .shot figcaption .xbtn { margin-left: auto; flex: none; }
.segmented { display: inline-flex; gap: 2px; }
.segmented button {
  padding: 4px 11px;
  font-size: 12px;
  border: 1px solid var(--line, #26304a);
  background: transparent;
  color: var(--muted, #8b97ad);
  cursor: pointer;
}
.segmented button:first-child { border-radius: 8px 0 0 8px; }
.segmented button:last-child { border-radius: 0 8px 8px 0; }
.segmented button.on {
  color: #fff;
  background: rgba(77, 163, 255, .18);
  border-color: var(--accent, #4da3ff);
}
a.clip { text-decoration: none; font-size: 13px; }


/* ---- document browser (added 2026-09-09) ---- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 13px;
}
.crumbs a { color: var(--accent, #4da3ff); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { color: var(--muted, #8b97ad); opacity: .6; }
.crumbs .here { color: #fff; font-weight: 600; }
.doclist li.folder a { font-weight: 600; }
.doclist li.folder a::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 12px;
  margin-right: 8px;
  vertical-align: -1px;
  border-radius: 2px 3px 3px 3px;
  background: linear-gradient(180deg, #5b7fb8, #3d5b88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.doclist li.folder.up a::before { opacity: .45; }


/* ---- running totals (added 2026-09-09) ---- */
.runtot {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.runtot .big .l {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #8b97ad);
}
.runtot .big .n { font-size: 30px; font-weight: 700; line-height: 1.15; }
.runtot .bargroup { flex: 1; min-width: 220px; }
.runtot .track {
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
  margin-bottom: 6px;
}
.runtot .fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3d7fd1, #4da3ff);
  transition: width .3s ease;
}
.runtot .fill.over { background: linear-gradient(90deg, #c2603a, #ff8a5c); }