`public/lending-grid.css`

92 lines
/* lending-grid.css — shared styling for the CRCP lending-intelligence grid pages.
   Lifted from the reference list build (broker-grid.html) so every lending page matches. */
:root{ --bg:#0c0f15; --card:#141925; --line:#232a38; --ink:#E6E8EC; --mut:#8A93A2; --gold:#C8A24B; --acc:#70AD47; --blue:#58a6ff; --warn:#d29922; }
*{box-sizing:border-box;} body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;}
header{display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;background:rgba(12,15,21,.98);backdrop-filter:blur(8px);flex-wrap:wrap;}
header h1{font-size:16px;margin:0;} header h1 b{color:var(--gold);}
header .nav{display:flex;gap:12px;margin-left:6px;flex-wrap:wrap;} header .nav a{color:var(--blue);text-decoration:none;font-size:13px;} header .nav a:hover{color:var(--gold);}
.spacer{flex:1;}
.search{background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:8px 12px;font-size:14px;min-width:220px;}
.toggle{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;}
.toggle button{background:var(--card);border:0;color:var(--mut);padding:8px 13px;font-size:13px;cursor:pointer;}
.toggle button.on{background:var(--gold);color:#1a1205;font-weight:700;}
.csvbtn{background:var(--card);border:1px solid var(--line);color:var(--acc);border-radius:9px;padding:8px 12px;font-size:13px;cursor:pointer;} .csvbtn:hover{border-color:var(--acc);}
.count{color:var(--mut);font-size:12px;}
#sortsel{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:5px 8px;font-size:12px}
#denswrap{display:none;align-items:center;gap:6px;font-size:13px;color:var(--mut)}
#denswrap input[type=range]{width:92px;accent-color:var(--acc)}
.shell{display:flex;align-items:flex-start;}
.rail{flex:0 0 260px;background:var(--bg2,#0a0d13);border-right:1px solid var(--line);align-self:stretch;position:sticky;top:53px;height:calc(100vh - 53px);overflow-y:auto;padding:0 0 40px;}
.rail .rsec{padding:13px 16px;border-bottom:1px solid var(--line);}
.rail h4{margin:0 0 9px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--mut);}
.rail .rsec > h4 { cursor:pointer; display:flex; align-items:center; justify-content:space-between; user-select:none; }
.rail .rsec > h4::after { content:'▾'; color:var(--mut); font-size:11px; margin-left:8px; transition:transform .15s; }
.rail .rsec.collapsed > h4::after { transform:rotate(-90deg); }
.rail .rsec.collapsed > *:not(h4) { display:none !important; }
.chips{display:flex;flex-wrap:wrap;gap:6px;}
.chip{background:var(--card);color:var(--mut);border:1px solid var(--line);border-radius:16px;padding:4px 10px;font-size:12px;cursor:pointer;user-select:none;}
.chip:hover{color:var(--ink);} .chip.active{border-color:var(--gold);color:var(--gold);background:rgba(200,162,75,.10);}
.chip .ct{color:var(--mut);font-size:10px;margin-left:4px;}
.fieldtoggles{display:flex;flex-direction:column;gap:1px;max-height:320px;overflow-y:auto;}
.ftog{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);cursor:pointer;padding:3px 4px;border-radius:6px;} .ftog:hover{background:rgba(200,162,75,.08);} .ftog input{accent-color:var(--gold);}
.fgrp{font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--gold);margin:9px 0 3px;font-weight:700;opacity:.85;} .fgrp:first-child{margin-top:0;}
.minibtn{background:var(--card);color:var(--mut);border:1px solid var(--line);border-radius:7px;padding:4px 9px;font-size:11px;cursor:pointer;margin-right:5px;} .minibtn:hover{border-color:var(--gold);color:var(--ink);}
.wrap{flex:1 1 auto;min-width:0;padding:0 0 60px;}
.databar{display:flex;align-items:center;gap:10px;padding:8px 22px;border-bottom:1px solid var(--line);color:var(--mut);font-size:11.5px;}
.databar .pubtag{color:var(--acc);border:1px solid rgba(112,173,71,.5);border-radius:8px;padding:2px 8px;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;}
.tblwrap{overflow:auto;max-height:calc(100vh - 140px);border:1px solid var(--line);border-radius:10px;margin:16px 20px 0;}
table.g{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px;white-space:nowrap;}
table.g thead th{position:sticky;top:0;background:var(--headbg,#1b2230);color:var(--mut);text-transform:uppercase;letter-spacing:.3px;font-size:10.5px;padding:8px 10px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none;z-index:2;}
table.g thead th:hover{color:var(--ink);}
table.g thead th.asc::after{content:' ▲';color:var(--gold);} table.g thead th.desc::after{content:' ▼';color:var(--gold);}
table.g thead th.dragcol{cursor:grab;} table.g thead th.dragging{opacity:.45;}
table.g thead th.dropL{box-shadow:inset 3px 0 0 var(--gold);} table.g thead th.dropR{box-shadow:inset -3px 0 0 var(--gold);}
table.g tbody td{padding:7px 10px;border-bottom:1px solid var(--line2,#20262f);}
table.g tbody tr:hover td{background:rgba(200,162,75,.07);}
table.g td.n{text-align:right;font-variant-numeric:tabular-nums;}
table.g a{color:var(--blue);text-decoration:none;} table.g a:hover{text-decoration:underline;}
.miss{color:#5A6472;} .mut{color:var(--mut);}
.atype{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;padding:1px 6px;border-radius:8px;}
.atype.com{background:rgba(200,162,75,.16);color:var(--gold);} .atype.res{background:rgba(88,166,255,.16);color:var(--blue);}
.atype.grn{background:rgba(112,173,71,.18);color:#8fd06f;} .atype.warn{background:rgba(210,153,34,.18);color:var(--warn);}
.geo{display:inline-block;font-size:10px;font-weight:700;padding:1px 7px;border-radius:8px;}
.geo.ca{background:rgba(127,174,106,.18);color:#8fd06f;border:1px solid rgba(127,174,106,.5);}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card-min,280px),1fr));gap:18px;padding:16px 20px 0;}
.gc{background:var(--card);border:2px solid var(--line2,#2a3547);border-radius:11px;padding:16px 18px;cursor:pointer;}
.gc .nm{font-weight:700;margin-bottom:6px;}
.gc .row{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:2px 0;border-top:1px solid var(--line2,#20262f);}
.gc .row .k{color:var(--mut);}
.hide{display:none;}
/* compact List view (3rd view — one scannable row per record, inline key/values) */
.lst{padding:14px 20px 0;display:flex;flex-direction:column;}
.lrow{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding:10px 4px;border-bottom:1px solid var(--line2,#20262f);cursor:pointer;}
.lrow:hover{background:rgba(200,162,75,.06);}
.lnm{font-weight:700;min-width:200px;flex:0 0 auto;color:var(--ink);}
.lmeta{display:flex;flex-wrap:wrap;gap:5px 16px;flex:1 1 320px;min-width:0;}
.lm{font-size:12.5px;white-space:nowrap;}
.lk{color:var(--mut);font-size:10px;text-transform:uppercase;letter-spacing:.5px;margin-right:5px;}
/* mobile: ⚙ Filters button + rail modal (rail is display:none <820px, so surface it here) */
.railbtn{display:none;background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:8px 12px;font-size:13px;cursor:pointer;}
.railbtn:hover{border-color:var(--gold);}
.railov{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:70;display:none;align-items:flex-start;justify-content:center;padding:14px;}
.railov.on{display:flex;}
.railmd{width:100%;max-width:520px;max-height:90vh;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:15px;overflow:hidden;}
.railmd-h{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink);}
.railmd-x{background:none;border:0;color:var(--mut);font-size:20px;cursor:pointer;line-height:1;}
.railmd-b{overflow:auto;padding:0;}
.rail.in-modal{display:block!important;position:static!important;height:auto!important;width:auto!important;flex:none!important;top:auto!important;border:0!important;}
@media(max-width:820px){ .railbtn{display:inline-block;} }
#ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:60;align-items:flex-start;justify-content:center;padding:40px 14px;overflow-y:auto;}
#ov.on{display:flex;}
#modal{width:min(640px,96vw);background:var(--card);border:1px solid var(--line);border-radius:15px;padding:20px 22px;position:relative;}
#modal h3{margin:0 0 2px;font-size:20px;} #modal .mfirm{color:var(--gold);font-size:13px;}
#modal .x{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--mut);font-size:22px;cursor:pointer;}
#modal .sec{margin-top:14px;} #modal .sec h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut);}
#modal .litem{display:flex;justify-content:space-between;gap:14px;padding:5px 0;border-bottom:1px solid var(--line2,#20262f);font-size:13px;} #modal .litem .m{color:var(--mut);}
#modal .litem a.dl{color:var(--blue);text-decoration:none;} #modal .litem a.dl:hover{text-decoration:underline;}
/* firm→broker drill: cap a long roster so the modal stays compact (Steve refine #3) */
.rosterscroll{max-height:340px;overflow:auto;margin:2px -4px 0;padding:0 4px;}
.rosterscroll::-webkit-scrollbar{width:8px;} .rosterscroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}
a.brokerlink{cursor:pointer;} a.backfirm{cursor:pointer;color:var(--gold);text-decoration:none;font-size:12.5px;} a.backfirm:hover{text-decoration:underline;}
@media(max-width:820px){ .rail{display:none;} .tblwrap,.grid{margin-left:10px;margin-right:10px;} }