/* NJ Leasing team app: shared styles.
   Design values from njleasingco.com, as in the approved mock-ups (Client Builds/Ary Lover (NJ Leasing)/mockups):
   navy #0a1628, gold #c9a84c, cream #f8f5ef, border #e5e0d5; DM Sans and Playfair Display (SIL Open Font License);
   4 to 6px button corners, 12px cards. Status tag colours follow the select colours fixed in architecture.md section 4. */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/dm-sans.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700 900;font-display:swap;src:url(fonts/playfair-display.woff2) format("woff2")}
:root{
  --navy:#0a1628;--navy-2:#162440;--gold:#c9a84c;--gold-l:#e8c97a;--gold-ink:#7f6119;
  --bg:#f8f5ef;--sf:#ffffff;--sf2:#f3f4f6;--sf3:#faf8f3;--line:#e5e0d5;--line2:#efebe3;
  --ink:#0a1628;--mut:#5c6370;--bar:#0a1628;--bar-line:rgba(201,168,76,.3);
  --sel:#fbf3dc;--hover:#fcfaf4;--scrim:rgba(10,22,40,.34);
  --red:#a8232b;--red-bg:#fbe4e4;--amber:#8a5200;--amber-bg:#fdf0d8;--green:#1d6a42;--green-bg:#e0f0e6;
  --shadow:0 1px 2px rgba(10,22,40,.05),0 10px 28px rgba(10,22,40,.10);
  --r-btn:6px;--r-card:12px;--r-tile:8px;
  --font:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --y-bg:#fbefc6;--y:#6b4f00;--o-bg:#fde3cb;--o:#8a4300;--b-bg:#dfe9f7;--b:#1d4f91;--c-bg:#d7eff2;--c:#0b5c68;
  --g-bg:#dcefe2;--g:#1d6a42;--g2-bg:#c5e3cf;--g2:#11492c;--t-bg:#d5eeea;--t:#0d5f58;--p-bg:#e9e1f5;--p:#56398f;
  --p2-bg:#dccdee;--p2:#3f2770;--r-bg:#f8dcdc;--r:#a3242c;--r2-bg:#efc8c8;--r2:#7a1a20;--n-bg:#ebe8e1;--n:#4c525c;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --gold-ink:#e3c676;--bg:#0a1628;--sf:#0f1d33;--sf2:#16263f;--sf3:#0c192d;--line:#24375a;--line2:#1b2c47;
  --ink:#f2eee5;--mut:#a7b0bf;--bar:#060d1a;--sel:rgba(201,168,76,.16);--hover:rgba(255,255,255,.03);--scrim:rgba(0,0,0,.5);
  --red:#ff8f94;--red-bg:rgba(255,120,125,.14);--amber:#f2b860;--amber-bg:rgba(242,184,96,.14);--green:#82d6a5;--green-bg:rgba(130,214,165,.14);
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --y-bg:rgba(240,200,80,.16);--y:#f0d27a;--o-bg:rgba(245,150,70,.17);--o:#f6b27d;--b-bg:rgba(100,150,230,.18);--b:#a9c6f3;--c-bg:rgba(70,190,205,.16);--c:#8fdbe5;
  --g-bg:rgba(110,200,150,.16);--g:#8ad9aa;--g2-bg:rgba(80,180,120,.24);--g2:#a6e8bf;--t-bg:rgba(70,190,175,.16);--t:#88dccf;--p-bg:rgba(160,130,230,.18);--p:#c8b4f2;
  --p2-bg:rgba(140,100,220,.26);--p2:#d6c6f7;--r-bg:rgba(240,100,100,.16);--r:#ff9da1;--r2-bg:rgba(220,60,70,.26);--r2:#ffb3b6;--n-bg:rgba(200,205,215,.12);--n:#c1c7d1;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --gold-ink:#e3c676;--bg:#0a1628;--sf:#0f1d33;--sf2:#16263f;--sf3:#0c192d;--line:#24375a;--line2:#1b2c47;
  --ink:#f2eee5;--mut:#a7b0bf;--bar:#060d1a;--sel:rgba(201,168,76,.16);--hover:rgba(255,255,255,.03);--scrim:rgba(0,0,0,.5);
  --red:#ff8f94;--red-bg:rgba(255,120,125,.14);--amber:#f2b860;--amber-bg:rgba(242,184,96,.14);--green:#82d6a5;--green-bg:rgba(130,214,165,.14);
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --y-bg:rgba(240,200,80,.16);--y:#f0d27a;--o-bg:rgba(245,150,70,.17);--o:#f6b27d;--b-bg:rgba(100,150,230,.18);--b:#a9c6f3;--c-bg:rgba(70,190,205,.16);--c:#8fdbe5;
  --g-bg:rgba(110,200,150,.16);--g:#8ad9aa;--g2-bg:rgba(80,180,120,.24);--g2:#a6e8bf;--t-bg:rgba(70,190,175,.16);--t:#88dccf;--p-bg:rgba(160,130,230,.18);--p:#c8b4f2;
  --p2-bg:rgba(140,100,220,.26);--p2:#d6c6f7;--r-bg:rgba(240,100,100,.16);--r:#ff9da1;--r2-bg:rgba(220,60,70,.26);--r2:#ffb3b6;--n-bg:rgba(200,205,215,.12);--n:#c1c7d1;
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg)}
body{font:400 14px/1.45 var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--gold-ink)}
[hidden]{display:none!important}
.serif{font-family:var(--serif)}
.mut{color:var(--mut)}
.num{font-variant-numeric:lining-nums tabular-nums}

/* top bar, after the site's nav: navy, gold mark, Playfair brand */
.bar{height:56px;background:var(--bar);color:#fff;display:flex;align-items:center;gap:14px;padding:0 20px;border-bottom:1px solid var(--bar-line);position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;flex-shrink:0}
.mark{width:32px;height:32px;background:var(--gold);border-radius:4px;display:flex;align-items:center;justify-content:center;font:900 13.5px/1 var(--serif);color:#0a1628}
.bn{font:700 15px/1 var(--serif);color:#fff;white-space:nowrap}.bn b{color:var(--gold);font-weight:700}
.bar-sep{width:1px;height:22px;background:rgba(255,255,255,.18)}
.bar-title{font-size:14.5px;font-weight:500;color:#fff;white-space:nowrap}
.bar-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.who{font-size:13px;color:rgba(255,255,255,.8);padding:5px 11px;border:1px solid rgba(255,255,255,.16);border-radius:999px;white-space:nowrap}
.ib{width:34px;height:34px;border-radius:6px;border:1px solid rgba(255,255,255,.16);background:transparent;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-weight:500}
.ib:hover,.ib:focus-visible{border-color:var(--gold);color:var(--gold);outline:none}
.as-bar{background:var(--gold);color:#0a1628;font-size:13px;display:flex;align-items:center;gap:10px;padding:6px 20px;position:sticky;top:56px;z-index:29}
.as-bar select{background:rgba(255,255,255,.55);border:1px solid rgba(10,22,40,.25);border-radius:6px;padding:3px 6px;color:#0a1628}
.as-bar a{color:#0a1628;font-weight:500;margin-left:auto}

/* buttons: the site's 4 to 6px corners, gold and navy fills */
.btn{font:500 13.5px/1 var(--font);padding:9px 14px;border-radius:var(--r-btn);border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.btn.gold{background:var(--gold);color:#0a1628}.btn.gold:hover{background:var(--gold-l)}
.btn.navy{background:var(--navy);color:#fff}.btn.navy:hover{background:var(--navy-2)}
.btn.ghost{background:var(--sf);color:var(--ink);border-color:var(--line)}.btn.ghost:hover{border-color:var(--gold)}
.btn.danger{background:var(--red);color:#fff}
.btn.sm{padding:6px 10px;font-size:12.5px}
.btn:disabled{opacity:.45;cursor:not-allowed}
:root[data-theme="dark"] .btn.navy{background:var(--sf2);border-color:var(--line);color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.navy{background:var(--sf2);border-color:var(--line);color:var(--ink)}}
.btn:focus-visible,.chip:focus-visible,.seg button:focus-visible,a:focus-visible,tr.row:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
kbd{font:500 11px/1 var(--font);background:var(--sf2);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:2px 6px;color:var(--ink);white-space:nowrap}

/* inputs: cream fill, gold focus, as on the site's forms */
.in{font:400 14px/1.3 var(--font);color:var(--ink);background:var(--sf3);border:1px solid var(--line);border-radius:var(--r-btn);padding:9px 11px;width:100%;outline:none;transition:border-color .15s,background .15s}
.in:focus{border-color:var(--gold);background:var(--sf);box-shadow:0 0 0 3px rgba(201,168,76,.22)}
.in.err{border-color:var(--red)}
textarea.in{min-height:84px;resize:vertical;line-height:1.45}
select.in{cursor:pointer}
.lb{display:block;font-size:11.5px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.ferr{color:var(--red);font-size:12.5px;margin-top:5px}
.search{position:relative;flex:1;min-width:200px;max-width:360px}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--mut);pointer-events:none}
.search .in{padding-left:32px}

/* chips, segmented controls, tags */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--sf);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:12.5px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.chip:hover{border-color:var(--gold)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
:root[data-theme="dark"] .chip.on{background:var(--gold);border-color:var(--gold);color:#0a1628}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip.on{background:var(--gold);border-color:var(--gold);color:#0a1628}}
.chip .n{font-size:11.5px;opacity:.75}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-btn);overflow:hidden;background:var(--sf)}
.seg button{border:0;background:transparent;padding:8px 14px;font-size:13px;cursor:pointer;color:var(--ink);border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--navy);color:#fff}
:root[data-theme="dark"] .seg button.on{background:var(--gold);color:#0a1628}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .seg button.on{background:var(--gold);color:#0a1628}}
.tg{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:500;white-space:nowrap;line-height:1.6}
.tg-y{background:var(--y-bg);color:var(--y)}.tg-o{background:var(--o-bg);color:var(--o)}.tg-b{background:var(--b-bg);color:var(--b)}.tg-c{background:var(--c-bg);color:var(--c)}
.tg-g{background:var(--g-bg);color:var(--g)}.tg-g2{background:var(--g2-bg);color:var(--g2)}.tg-t{background:var(--t-bg);color:var(--t)}.tg-p{background:var(--p-bg);color:var(--p)}
.tg-p2{background:var(--p2-bg);color:var(--p2)}.tg-r{background:var(--r-bg);color:var(--r)}.tg-r2{background:var(--r2-bg);color:var(--r2)}.tg-n{background:var(--n-bg);color:var(--n)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}

/* cards and tables */
.card{background:var(--sf);border:1px solid var(--line);border-radius:var(--r-card)}
.tbl-wrap{overflow:auto}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.tbl th{position:sticky;top:0;z-index:2;background:var(--sf);text-align:left;font-size:11.5px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:var(--mut);padding:10px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th[data-sort]{cursor:pointer;user-select:none}.tbl th[data-sort]:hover{color:var(--ink)}
.tbl th .ar{color:var(--gold-ink);margin-left:3px}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line2);vertical-align:middle;white-space:nowrap}
.tbl tr.row{cursor:pointer}
.tbl tr.row:hover td{background:var(--hover)}
.tbl tr.row.sel td{background:var(--sel)}
.tbl tr.row.sel td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.tbl tr.grp td{background:var(--sf3);font-size:11.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--mut);font-weight:500;padding:7px 12px}
.tbl tr.flash td{animation:flash 1.4s ease-out}
@keyframes flash{0%{background:rgba(201,168,76,.38)}100%{background:transparent}}
.empty{padding:40px 16px;text-align:center;color:var(--mut)}
.copy{cursor:copy;border-bottom:1px dashed transparent}.copy:hover{border-bottom-color:var(--gold)}

/* drawer and scrim */
.scrim{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(600px,100vw);background:var(--sf);border-left:1px solid var(--line);box-shadow:-14px 0 40px rgba(10,22,40,.2);transform:translateX(102%);transition:transform .22s ease;z-index:41;display:flex;flex-direction:column}
.drawer.on{transform:none}
.dr-h{padding:18px 22px 14px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:flex-start}
.dr-h h2{font:700 22px/1.2 var(--serif)}
.dr-h .x{margin-left:auto}
.dr-b{flex:1;overflow:auto;padding:16px 22px 48px}
.x{width:32px;height:32px;border-radius:6px;border:1px solid var(--line);background:var(--sf);cursor:pointer;color:var(--mut);font-size:18px;line-height:1;flex-shrink:0}
.x:hover{border-color:var(--gold);color:var(--ink)}
.sect{margin-top:20px}
.sect h3{font-size:11.5px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-ink);margin-bottom:8px}
.kv{display:grid;grid-template-columns:132px 1fr;gap:6px 14px;font-size:13.5px}
.kv dt{color:var(--mut)}
.kv dd{min-width:0}
.photos{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.photos svg{border-radius:var(--r-tile);flex-shrink:0;display:block}

/* dialogs */
.dlg-back{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:flex-start;justify-content:center;padding:7vh 16px 16px;z-index:60;overflow:auto}
.dlg{background:var(--sf);border:1px solid var(--line);border-radius:var(--r-card);width:min(540px,100%);box-shadow:var(--shadow)}
.dlg.wide{width:min(760px,100%)}
.dlg-h{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.dlg-h h3{font:700 19px/1.2 var(--serif)}
.dlg-h .x{margin-left:auto}
.dlg-b{padding:16px 20px}
.dlg-f{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 16px;border-top:1px solid var(--line2)}
.field{margin-bottom:14px}
.keys-t{width:100%;border-collapse:collapse;font-size:13.5px}.keys-t td{padding:6px 0;border-bottom:1px solid var(--line2)}.keys-t td:first-child{width:150px}

/* toast */
.toast{position:fixed;left:50%;bottom:42px;transform:translate(-50%,140px);background:#0a1628;color:#fff;border:1px solid rgba(201,168,76,.4);padding:11px 16px;border-radius:8px;font-size:13.5px;display:flex;gap:16px;align-items:center;opacity:0;transition:.25s;z-index:90;box-shadow:0 10px 30px rgba(0,0,0,.28);max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast button{background:none;border:0;color:var(--gold);font:500 13.5px var(--font);cursor:pointer;white-space:nowrap}

/* key bar */
.keybar{position:fixed;left:0;right:0;bottom:0;height:30px;display:flex;gap:18px;align-items:center;padding:0 20px;background:var(--sf);border-top:1px solid var(--line);font-size:12px;color:var(--mut);z-index:20;overflow:hidden;white-space:nowrap}
.keybar span{display:inline-flex;gap:6px;align-items:center}
@media (max-width:760px){.keybar{display:none}.bn{display:none}.who{display:none}}

/* data freshness and errors, not in the mock-ups: the build reads a shared snapshot that can be a minute or two old */
.fresh{font-size:12px;color:rgba(255,255,255,.62);white-space:nowrap}
.fresh.stale{color:var(--gold)}
.boot{padding:60px 20px;text-align:center;color:var(--mut)}
@media (max-width:760px){.fresh{display:none}}