:root {
  --navy: #0a1628;
  --navy-2: #14243c;
  --navy-3: #23405f;
  --accent: #d1d1d6;
  --accent-soft: #e8e8ed;
  --bg: #f5f5f7;
  --card: #ffffff;
  --line: #e5e5ea;
  --text: #1c1c26;
  --muted: #6e6e78;
  --green: #34a765;
  --orange: #e8912d;
  --red: #d64545;
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(10,22,40,.05), 0 8px 24px rgba(10,22,40,.06);
  --shadow-lg: 0 24px 60px rgba(10,22,40,.18);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, 'SF Pro Display', 'Segoe UI', system-ui, Inter, Arial, sans-serif;
  --glass: rgba(255,255,255,.72);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--sans); background: var(--bg); color: var(--text); font-size: 14px; -webkit-font-smoothing: antialiased; }
a { color: var(--navy-3); text-decoration: none; }
.hidden { display: none !important; }

/* ---------- Top bar - floating glass nav ---------- */
#topbar { background: rgba(10,22,40,.92); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); color: #fff; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 30px rgba(10,22,40,.25); }
.topbar-inner { display: flex; align-items: center; gap: 18px; padding: 0 20px; height: 60px; max-width: 1520px; margin: 0 auto; }
.brand { display: flex; align-items: center; color: #fff; margin-right: 10px; }
.brand-logo { height: 22px; width: auto; display: block; }
.brand-word { font-family: var(--serif); font-size: 24px; letter-spacing: 1px; text-transform: lowercase; }

#mainnav { display: flex; align-items: center; gap: 4px; flex: 1; }
#mainnav .nav-item { position: relative; padding: 12px 0; }
#mainnav a.nav-link, #mainnav span.nav-link {
  display: block; padding: 8px 14px; color: #c9d2dd; font-size: 13px; font-weight: 590; cursor: pointer; white-space: nowrap;
  border-radius: 999px; transition: background .22s ease, color .22s ease, box-shadow .22s ease;
}
#mainnav .nav-link:hover {
  color: #fff; background: rgba(255,255,255,.12);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 0 0 .5px rgba(255,255,255,.18) inset, 0 4px 14px rgba(0,0,0,.18);
}
#mainnav .nav-item.active > .nav-link {
  color: #fff; background: rgba(255,255,255,.16);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 0 0 .5px rgba(255,255,255,.25) inset, 0 0 18px rgba(255,255,255,.10), 0 4px 14px rgba(0,0,0,.2);
}
.dropdown { display: none; position: absolute; top: calc(100% - 2px); left: 0; background: #ffffff; color: var(--text); min-width: 224px; border-radius: 14px; box-shadow: var(--shadow-lg), 0 0 0 .5px rgba(10,22,40,.08); overflow: hidden; padding: 6px; }
.nav-item:hover .dropdown { display: block; }
.dropdown a { display: block; padding: 9px 14px; color: var(--text); font-size: 13px; border-radius: 9px; transition: background .15s; }
.dropdown a:hover { background: rgba(10,22,40,.07); }
.dropdown .dd-head { padding: 8px 14px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }

.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* The nav is nowrap and won't shrink, so on anything under ~1400px it was
   pushing the right-hand cluster past the viewport edge - notifications and
   the avatar ended up off-screen with the page scrolling sideways. Reclaim
   the space from the nav padding and the search field instead (only in that
   band, so the wide layout is unchanged), and never shrink the icons. */
@media (max-width: 1400px) {
  #mainnav a.nav-link, #mainnav span.nav-link { padding-left: 11px; padding-right: 11px; }
  .global-search input { width: 140px; }
  .global-search input:focus { width: 200px; }
}
.global-search { position: relative; }
.global-search input { width: 170px; padding: 9px 14px; border-radius: 999px; border: none; background: rgba(255,255,255,.13); color: #fff; outline: none; font-size: 13px; transition: background .2s, width .25s ease; }
.global-search input::placeholder { color: #93a3b5; }
.global-search input:focus { background: rgba(255,255,255,.95); color: var(--text); width: 280px; }
.search-results { position: absolute; top: 46px; right: 0; width: 390px; max-height: 440px; overflow-y: auto; background: var(--glass); backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6); color: var(--text); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 6px; }
.search-results .sr-item { padding: 10px 14px; border-radius: 10px; cursor: pointer; }
.search-results .sr-item:hover { background: rgba(10,22,40,.06); }
.search-results .sr-item .sr-title { font-weight: 600; }
.search-results .sr-item .sr-sub { font-size: 12px; color: var(--muted); }
.sr-badge { display: inline-block; font-size: 10px; padding: 1px 8px; border-radius: 999px; background: var(--navy); color: #fff; margin-right: 6px; text-transform: uppercase; }

/* Dark mode toggle (moon / sun) */
.theme-toggle { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: rgba(255,255,255,.1); border: none; color: #c9d2dd; border-radius: 50%; cursor: pointer; transition: all .2s; }
.theme-toggle:hover { background: rgba(255,255,255,.2); color: #fff; transform: rotate(-12deg); }
.theme-toggle svg { display: block; }

/* Notifications bell (replaces the old EN/AR toggle) */
.notif-menu { position: relative; }
.notif-bell { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: rgba(255,255,255,.1); border: none; color: #c9d2dd; border-radius: 50%; cursor: pointer; transition: all .2s; }
.notif-bell:hover { background: rgba(255,255,255,.2); color: #fff; }
.notif-badge { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #ff453a; color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--navy); }
.notif-dd { position: absolute; right: 0; top: 46px; background: rgba(255,255,255,.93); backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6); color: var(--text); border-radius: 16px; box-shadow: var(--shadow-lg); width: 340px; max-height: 430px; overflow-y: auto; z-index: 60; padding: 6px; }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 8px; font-size: 13px; border-bottom: .5px solid var(--line); margin-bottom: 4px; }
.notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.notif-item:hover { background: rgba(10,22,40,.06); }
.notif-item.read { opacity: .55; }
.notif-ico { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.notif-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.notif-title { font-size: 12.5px; font-weight: 650; line-height: 1.35; }
.notif-sub { font-size: 11px; color: var(--muted); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: #2f81f7; flex-shrink: 0; margin-top: 6px; }
.notif-empty { padding: 22px 14px; font-size: 12.5px; color: var(--muted); text-align: center; }

.user-menu { position: relative; }
.user-chip { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(255,255,255,.1); transition: background .2s; }
.user-chip:hover { background: rgba(255,255,255,.18); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(145deg, #e8e8ed, #c9c9d1); color: var(--navy); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.avatar-img { object-fit: cover; display: inline-block; background: #fff; }
span.avatar { display: inline-flex; }

/* PropertyFinder Superagent badge - purple circle, white star */
.sa-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #3D4DBE; color: #fff; vertical-align: middle; box-shadow: 0 0 0 2px #fff; margin: 0 2px; }
.user-chip .u-name { font-size: 12px; color: #fff; }
.user-chip .u-role { font-size: 10px; color: #93a3b5; }
.user-dd { position: absolute; right: 0; top: 44px; background: var(--glass); backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6); color: var(--text); border-radius: 16px; box-shadow: var(--shadow-lg); min-width: 230px; overflow: hidden; z-index: 50; padding: 6px; }
.user-dd .ud-item { padding: 10px 14px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-radius: 10px; }
.user-dd .ud-item:hover { background: rgba(10,22,40,.06); }

.hamburger { display: none; background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; }

/* ---------- Layout ---------- */
#app { max-width: 1520px; margin: 0 auto; padding: 28px 22px 90px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 26px; color: var(--navy); font-weight: 700; letter-spacing: -.4px; }
.page-head .sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Buttons - pill ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 17px; border-radius: 999px; border: none; background: #fff; color: var(--text); font-size: 13px; font-weight: 590; cursor: pointer; box-shadow: 0 0 0 .5px rgba(10,22,40,.12), 0 1px 3px rgba(10,22,40,.08); transition: all .18s ease; }
.btn:hover { box-shadow: 0 0 0 .5px rgba(10,22,40,.2), 0 4px 12px rgba(10,22,40,.12); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary { background: var(--navy); color: #fff; box-shadow: 0 2px 8px rgba(10,22,40,.3); }
.btn.primary:hover { background: var(--navy-2); }
.btn.danger { color: var(--red); }
.btn.danger:hover { background: #fdf3f3; }
.btn.sm { padding: 5px 12px; font-size: 12px; }
.btn.ghost { box-shadow: none; background: transparent; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ---------- Cards / stats ---------- */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.card h3 { font-size: 13px; color: var(--muted); margin-bottom: 14px; text-transform: uppercase; letter-spacing: .8px; font-weight: 600; }
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 18px 16px; transition: transform .18s ease, box-shadow .18s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(10,22,40,.1); }
.stat-card .s-val { font-size: 28px; font-weight: 700; color: var(--navy); letter-spacing: -.6px; }
.stat-card .s-label { font-size: 11px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .5px; }
.stat-card.gold { background: linear-gradient(160deg, #fff, var(--accent-soft)); }

/* Dashboard widgets - Salesforce-card style with glassmorphism (typographic, no icons) */
.dwidget-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
.dwidget { border-radius: 22px; padding: 26px 26px 20px; position: relative; overflow: hidden;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 1px 2px rgba(10,22,40,.06), 0 14px 34px rgba(10,22,40,.10), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .18s ease, box-shadow .18s ease; }
.dwidget:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(10,22,40,.16), inset 0 1px 0 rgba(255,255,255,.5); }
.dwidget::after { content: ''; position: absolute; top: -55%; right: -25%; width: 75%; height: 130%;
  background: radial-gradient(closest-side, rgba(255,255,255,.35), transparent); pointer-events: none; }
/* Dashboard palette: teal primary · white surface · bright light blue accents */
:root { --teal: #008080; --teal-2: #006b6b; --lblue: #00BFFF; --lblue-2: #009fdd; }
.dwidget.dw-teal { background: linear-gradient(155deg, rgba(0,140,140,.95), rgba(0,110,110,.93)); color: #fff; }
.dwidget.dw-blue { background: linear-gradient(155deg, rgba(30,197,255,.95), rgba(0,168,232,.93)); color: #fff; }
.dwidget.dw-white { background: rgba(255,255,255,.9); color: var(--text); border: 1px solid rgba(0,128,128,.18); }
.dwidget.dw-white .dw-title { color: var(--teal); opacity: 1; }
.dwidget.dw-white .dw-hero { color: var(--teal); }
.dwidget .dw-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; opacity: .82; }
.dwidget .dw-hero { font-size: 46px; font-weight: 750; letter-spacing: -1.5px; line-height: 1.05; margin-top: 12px; }
.dwidget .dw-herolabel { font-size: 12.5px; opacity: .78; margin-top: 1px; font-weight: 550; }
.dwidget .dw-rows { margin-top: 16px; }
.dwidget .dw-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 13px; border-top: 1px solid rgba(255,255,255,.28); }
.dwidget.dw-white .dw-row { border-top-color: rgba(10,22,40,.08); }
.dwidget .dw-val { font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; }
.dwidget .dw-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dwidget .dw-dot.up { background: #bdf3ff; box-shadow: 0 0 0 2.5px rgba(255,255,255,.3); }
.dwidget.dw-white .dw-dot.up { background: var(--lblue); box-shadow: 0 0 0 2.5px rgba(0,191,255,.18); }
.dwidget .dw-dot.down { background: #ffffff; box-shadow: 0 0 0 2.5px rgba(255,255,255,.3); }
.dwidget.dw-white .dw-dot.down { background: var(--teal); box-shadow: 0 0 0 2.5px rgba(0,128,128,.18); }
.dwidget .dw-foot { margin-top: 14px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.28); font-size: 11.5px; font-weight: 600; opacity: .85; }
.dwidget.dw-white .dw-foot { border-top-color: rgba(10,22,40,.08); color: var(--muted); }
@media (max-width: 1000px) { .dwidget-grid { grid-template-columns: 1fr; } }

/* Dashboard widget card-flip: chart icon top-right flips the card to a graph
   view (actual bars + target markers). Front/back share the widget's own
   background; the toggle stays put so it works from either face. */
.dwidget { perspective: 1400px; }
.dw-graph-btn { position: absolute; top: 14px; right: 14px; z-index: 5; width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.22); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; }
.dw-graph-btn:hover { background: rgba(255,255,255,.38); transform: scale(1.1); }
.dwidget.dw-white .dw-graph-btn { background: rgba(0,128,128,.12); color: var(--teal); }
.dwidget.dw-white .dw-graph-btn:hover { background: rgba(0,128,128,.22); }
.dw-flip { position: relative; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.35,.1,.25,1); }
.dwidget.dw-flipped .dw-flip { transform: rotateY(180deg); }
.dw-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.dw-back { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; overflow: hidden; }
.dwg-rows { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 11px; margin-top: 12px; }
.dwg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.dwg-nums { font-weight: 750; font-size: 12.5px; white-space: nowrap; }
.dwg-track { position: relative; height: 11px; border-radius: 999px; background: rgba(255,255,255,.22); }
.dwg-fill { height: 100%; border-radius: 999px; background: #fff; min-width: 3px; }
.dwg-target { position: absolute; top: -3px; bottom: -3px; width: 2.5px; border-radius: 2px; background: #ffd166; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
.dwidget.dw-white .dwg-track { background: rgba(0,128,128,.12); }
.dwidget.dw-white .dwg-fill { background: var(--teal); }
.dwidget.dw-white .dwg-target { background: var(--orange); box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
.dw-back .dw-foot { margin-top: 12px; }

/* Rounded period dropdown (dashboard filter bar) - pill trigger + rounded panel */
.dd-select { position: relative; display: inline-block; }
.dd-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: none; border-radius: 999px; background: rgba(10,22,40,.05); font-family: var(--sans); font-size: 13px; color: var(--text); cursor: pointer; transition: background .15s; }
.dd-btn:hover { background: rgba(10,22,40,.1); }
.dd-caret { font-size: 10px; color: var(--muted); }
.dd-panel { position: absolute; top: calc(100% + 6px); left: 0; min-width: 154px; background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 90; }
.dd-opt { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 9px; font-size: 12.5px; cursor: pointer; transition: background .12s; }
.dd-opt:hover { background: rgba(10,22,40,.06); }
.dd-opt.on { color: var(--navy); font-weight: 650; }
.dd-panel { max-height: 280px; overflow-y: auto; min-width: 100%; white-space: nowrap; z-index: 400; }
/* The filter bars use backdrop-filter, which creates a stacking context - so a
   dropdown's z-index only competes INSIDE that bar. Lifting the bars themselves
   keeps their dropdowns above the cards/tables that follow (those also become
   stacking contexts in dark mode, which is why this only showed up at night). */
.filter-bar, .pfilter { position: relative; z-index: 60; }

/* Phone cell: number wraps freely, but the WhatsApp + call icons stay locked
   together on one line even in a narrow column */
.phone-cell { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pc-num { white-space: nowrap; }
.pc-actions { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; flex-shrink: 0; }

/* Pinned-notice marker - brand red in both themes */
.notice-pin { color: var(--red); display: inline-flex; vertical-align: -2px; }

/* Themed SVG chart parts (analytics time-series, donut track) */
.svg-grid { stroke: rgba(10,22,40,.07); }
.svg-track { stroke: rgba(10,22,40,.07); }
.svg-val { fill: var(--navy); }

/* Offer pill toggle: one segmented pill - Accept | Reject (or, once
   rejected, Increase | Decrease) - replacing separate buttons */
.ptoggle { display: inline-flex; align-items: stretch; border-radius: 999px; overflow: hidden; background: rgba(10,22,40,.04); box-shadow: 0 0 0 .5px rgba(10,22,40,.16); }
.ptoggle button { border: none; background: transparent; font-family: var(--sans); font-size: 11.5px; font-weight: 650; padding: 6px 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; transition: background .18s, color .18s; }
.ptoggle button + button { border-left: .5px solid rgba(10,22,40,.16); }
.ptoggle .pt-acc { color: #1e7a46; }
.ptoggle .pt-acc:hover { background: var(--green); color: #fff; }
.ptoggle .pt-rej { color: var(--red); }
.ptoggle .pt-rej:hover { background: var(--red); color: #fff; }
.ptoggle .pt-up, .ptoggle .pt-down { color: var(--navy-3); }
.ptoggle .pt-up:hover, .ptoggle .pt-down:hover { background: var(--navy); color: #fff; }

/* Property record actions: one liquid-glass pill (white hue) with dashed
   separators between actions */
.action-pill { display: inline-flex; align-items: stretch; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.55); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 0 0 .5px rgba(10,22,40,.1), 0 4px 14px rgba(10,22,40,.08), inset 0 1px 0 rgba(255,255,255,.7); }
.ap-btn { border: none; background: transparent; font-family: var(--sans); font-size: 12.5px; font-weight: 590; color: var(--text); padding: 9px 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background .15s; }
.ap-btn:hover { background: rgba(255,255,255,.85); }
.ap-btn + .ap-btn { border-left: 1px dashed rgba(10,22,40,.2); }

/* Hover tooltip (buyer max budget etc) */
.tip { position: relative; cursor: help; border-bottom: 1px dashed rgba(10,22,40,.3); }
.tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(3px); background: rgba(10,22,40,.94); color: #fff; padding: 5px 12px; border-radius: 8px; font-size: 11px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .18s cubic-bezier(.22,.8,.35,1), transform .18s cubic-bezier(.22,.8,.35,1); z-index: 60; }
.tip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Bedroom shorthand cell (2 + S, 3 + M, 2 + S + M) - kept on one line so the
   notation never breaks across rows */
.beds-short { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Responsive agent name: full name normally, "O.Woodman" once the table gets
   tight. The agent column compresses first so the beds column keeps its
   full notation. */
.nm-abbr { display: none; }
@media (max-width: 1500px) {
  .nm-full { display: none; }
  .nm-abbr { display: inline; white-space: nowrap; }
}

/* Inline count icons (buyers list) */
.count-ico { display: inline-flex; align-items: center; gap: 4px; margin-right: 11px; font-size: 12.5px; font-weight: 650; color: var(--text); }
.count-ico .ico { color: var(--muted); }

/* Compact PropertyFinder credits widget - page-head variant of .pf-red */
.pfcredit-card.pf-compact { padding: 9px 16px; gap: 12px; border-radius: 16px; box-shadow: 0 6px 18px rgba(239,94,82,.28); }
.pfcredit-card.pf-compact .pfc-title { font-size: 9.5px; letter-spacing: .6px; display: flex; align-items: center; gap: 6px; }
.pfcredit-card.pf-compact .pfc-val { font-size: 19px; margin: 2px 0 0; letter-spacing: -.3px; }
.pfcredit-card.pf-compact .pfc-sub { font-size: 10.5px; }

/* HR Boards Inventory accordion - collapsed rows show requested units only */
.hrb-agent { margin-bottom: 10px; }
.hrb-head { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer; user-select: none; padding: 6px 8px; margin: 0 -8px; border-radius: 10px; transition: background .15s; }
.hrb-head:hover { background: rgba(10,22,40,.05); }
.hrb-pills { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }

/* Analytics broker profile cards - symmetrical rows and headers.
   align-self: start stops a grid item inheriting its row-mate's height, so
   expanding one broker's accordion no longer stretches the card beside it
   (grid items default to align-items: stretch). Collapsed cards still line
   up, because their content is identical. */
.ana-broker-card { display: flex; flex-direction: column; align-self: start; }
.ana-broker-card .ana-bhead { min-height: 64px; align-items: center; }
.ana-broker-card .kv.metric-row { min-height: 42px; align-items: center; padding-top: 6px; padding-bottom: 6px; }
.ana-broker-card .kv .k { font-size: 12.5px; }
.ana-broker-card .kv .v { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 5px; }
.ana-broker-card .kv .v .cell-sub { flex-basis: 100%; text-align: right; margin-top: 0; }

/* Stat groups + icon chips (Salesforce-style) */
.stat-group-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin: 4px 0 10px; }
.stat-grid + .stat-group-title { margin-top: 8px; }
.stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; font-size: 17px; flex-shrink: 0; }

/* Task Schedule mini calendar (Salesforce-style) */
.tsched-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.tsched-dow { font-size: 9.5px; color: var(--muted); font-weight: 700; text-align: center; padding: 3px 0; text-transform: uppercase; letter-spacing: .4px; }
.tsched-cell { min-height: 44px; border-radius: 9px; background: rgba(10,22,40,.03); padding: 4px 5px 3px; cursor: pointer; position: relative; transition: background .15s; }
.tsched-cell:hover { background: rgba(10,22,40,.09); }
.tsched-cell.empty { background: transparent; cursor: default; }
.tsched-cell.today { background: var(--navy); }
.tsched-cell.today .tsched-daynum { color: #fff; font-weight: 700; }
.tsched-daynum { font-size: 10.5px; color: var(--text); font-weight: 600; }
.tsched-bars { display: flex; gap: 2px; margin-top: 3px; }
.tsched-bar { display: block; height: 4px; flex: 1; max-width: 14px; border-radius: 2px; }
.tsched-ava { position: absolute; bottom: 3px; right: 4px; display: flex; align-items: center; gap: 2px; }
.tsched-ava .avatar { box-shadow: 0 0 0 1.5px #fff; }
.tsched-more { font-size: 8.5px; color: var(--muted); font-weight: 700; }

/* Tick-box grid (Features & Amenities) - pill-style tickboxes */
.checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; max-height: 240px; overflow-y: auto; background: rgba(10,22,40,.03); border: .5px solid var(--line); border-radius: 14px; padding: 12px; }
.checkgrid .cg-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; text-transform: none; font-weight: 500; color: var(--text); letter-spacing: 0; padding: 6px 10px; border-radius: 9px; transition: background .15s; }
.checkgrid .cg-item:hover { background: rgba(10,22,40,.06); }
.checkgrid .cg-item:has(input:checked) { background: rgba(35,64,95,.1); color: var(--navy); font-weight: 650; }
.checkgrid input { accent-color: var(--navy); width: 15px; height: 15px; flex-shrink: 0; }

/* Monday.com-style call outcome status cells */
.status-cell { display: inline-flex; align-items: center; justify-content: center; min-width: 118px; padding: 7px 12px; border-radius: 7px; font-size: 11.5px; font-weight: 700; color: #fff; cursor: pointer; text-align: center; transition: filter .15s; user-select: none; }
.status-cell:hover { filter: brightness(1.08); }
.status-cell.st-notcalled { background: #d64545; }
.status-cell.st-answered { background: #00c875; }
.status-cell.st-noanswer { background: #fdab3d; }

/* Property detail photo gallery */
.pgallery { display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: 150px 150px; gap: 8px; border-radius: var(--radius); overflow: hidden; }
.pgallery .pg-tile { background: linear-gradient(145deg, var(--navy-2), var(--navy-3)); position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 34px; overflow: hidden; }
.pgallery .pg-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.pgallery .pg-tile:hover img { transform: scale(1.06); }
.pgallery .pg-main { grid-row: 1 / 3; font-size: 54px; }
.pgallery .pg-count { position: absolute; bottom: 8px; right: 10px; background: rgba(10,22,40,.65); backdrop-filter: blur(8px); padding: 2px 10px; border-radius: 999px; font-size: 11px; }

/* ---------- Tables - light ---------- */
.table-wrap { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th { text-align: left; padding: 12px 14px; background: transparent; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--line); }
table.data td { padding: 11px 14px; border: none; vertical-align: middle; }
table.data tbody tr:nth-child(even) td { background: #fafafc; }
table.data tr:hover td { background: #f2f4f8; }
table.data tr.clickable { cursor: pointer; }
table.data td .cell-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }

.thumb { width: 46px; height: 46px; border-radius: 10px; background: linear-gradient(145deg, var(--navy-2), var(--navy-3)); display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; flex-shrink: 0; cursor: zoom-in; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.thumb-zoom .tz-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carousel .car-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m-photo { overflow: hidden; }
.m-photo img { width: 100%; height: 100%; object-fit: cover; }
.bro-hero img, .proj-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bro-hero, .proj-photo { position: relative; }
.m-photo { transition: transform .18s ease, box-shadow .18s ease; }
.m-photo:hover { transform: scale(2); z-index: 30; box-shadow: 0 10px 30px rgba(10,22,40,.35); }

/* Hover photo preview - enlarges to the right, click-through photos */
.thumb-zoom { position: fixed; z-index: 500; width: 250px; background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; animation: pop .15s ease-out; }
.thumb-zoom .tz-photo { aspect-ratio: 1 / 1; border-radius: 10px; background: linear-gradient(145deg, var(--navy-2), var(--navy-3)); display: flex; align-items: center; justify-content: center; font-size: 56px; color: #fff; position: relative; }
.thumb-zoom .tz-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.22); backdrop-filter: blur(8px); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 15px; }
.thumb-zoom .tz-nav.prev { left: 8px; } .thumb-zoom .tz-nav.next { right: 8px; }
.thumb-zoom .tz-count { position: absolute; bottom: 8px; right: 10px; font-size: 11px; background: rgba(10,22,40,.65); padding: 2px 9px; border-radius: 999px; }
.thumb-zoom .tz-title { font-size: 11.5px; color: var(--muted); padding: 7px 4px 2px; font-weight: 600; }

/* New Projects */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.proj-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.proj-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(10,22,40,.14); }
.proj-photo { aspect-ratio: 16 / 10; background: linear-gradient(145deg, var(--navy-2), var(--navy-3)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 44px; position: relative; }
.handover-badge { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); color: var(--navy); font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.proj-body { padding: 14px 16px 16px; }
.proj-body .pj-name { font-weight: 700; font-size: 14.5px; color: var(--navy); }
.proj-body .pj-area { font-size: 12px; color: var(--muted); margin-top: 2px; }
.proj-body .pj-price { font-size: 13px; margin-top: 8px; }
.proj-body .pj-price b { font-size: 15px; color: var(--navy); }
.proj-body .pj-dev { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ---------- Filter bar - glass ---------- */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 10px 14px; border-radius: 999px; box-shadow: var(--shadow); }
.filter-bar select, .filter-bar input { padding: 7px 13px; border: none; border-radius: 999px; font-size: 13px; background: rgba(10,22,40,.05); color: var(--text); outline: none; transition: background .15s, box-shadow .15s; }
.filter-bar select:focus, .filter-bar input:focus { background: #fff; box-shadow: 0 0 0 2px rgba(35,64,95,.25); }
.filter-bar label { font-size: 12px; color: var(--muted); font-weight: 600; }

/* Properties filter panel - stacked labels, tidy grid, expandable More Filters */
.pfilter { background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 14px 16px; border-radius: 18px; box-shadow: var(--shadow); margin-bottom: 16px; }
.pf-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.pf-row2 { margin-top: 12px; padding-top: 12px; border-top: .5px solid var(--line); }
.pf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-field > label { font-size: 10.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding-left: 4px; }
.pf-field select, .pf-field input { padding: 8px 12px; border: none; border-radius: 11px; font-size: 13px; background: rgba(10,22,40,.05); color: var(--text); outline: none; transition: background .15s, box-shadow .15s; min-width: 120px; }
.pf-field select:focus, .pf-field input:focus { background: #fff; box-shadow: 0 0 0 2px rgba(35,64,95,.25); }
.pf-search { flex: 1; min-width: 180px; }
.pf-search input { width: 100%; }
.pf-range { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.pf-range input { width: 78px; min-width: 78px; }
.pf-more button { white-space: nowrap; }

/* Listing cell - big photo, price beside, pills + ref stacked under the price */
.ppc { display: flex; align-items: center; gap: 14px; min-width: 210px; }
.ppc-left { flex-shrink: 0; }
.ppc .thumb { width: 74px; height: 74px; border-radius: 13px; font-size: 28px; }
.ppc-ref { font-size: 10.5px; font-weight: 700; color: var(--muted); letter-spacing: .3px; white-space: nowrap; }
.ppc-right { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ppc-price { font-size: 14px; white-space: nowrap; }
.ppc-pills { display: flex; flex-wrap: wrap; gap: 3px; }

/* Traffic-light filter chips (buyers) */
.tl-chips { display: inline-flex; gap: 4px; }
.tl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: rgba(10,22,40,.05); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; }
.tl-chip:hover { background: rgba(10,22,40,.1); }
.tl-chip.on { background: var(--navy); color: #fff; }

/* Offer action buttons (Offers & Map) - tidy stacked group, equal widths */
.offer-actions { display: flex; flex-direction: column; gap: 5px; min-width: 128px; }
.offer-actions .btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 12px; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.offer-actions .oa-reject { background: rgba(214,69,69,.09); color: var(--red); }
.offer-actions .oa-reject:hover { background: var(--red); color: #fff; }
.offer-actions .oa-adjust { background: rgba(10,22,40,.06); color: var(--navy); }
.offer-actions .oa-adjust:hover { background: var(--navy); color: #fff; }

/* Back / Next record navigation - labeled pill buttons */
.rec-btn { font-weight: 700; letter-spacing: .3px; padding: 9px 20px; }
.rec-btn:first-child { border-radius: 999px 8px 8px 999px; }
.rec-btn:last-child { border-radius: 8px 999px 999px 8px; }
.rec-nav { display: inline-flex; gap: 3px; }

/* Phone input with country code + flag picker - heights, font and radius
   match the standard form inputs exactly so the row lines up. */
.phone-input { position: relative; display: flex; gap: 6px; align-items: stretch; }
.phone-input .pi-cc { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border: none; border-radius: 11px; background: rgba(10,22,40,.07); font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; white-space: nowrap; transition: background .15s; }
.phone-input .pi-cc:hover { background: rgba(10,22,40,.12); }
.phone-input .pi-flag { display: inline-flex; align-items: center; line-height: 1; }
.phone-input .pi-flagimg { width: 20px; height: auto; border-radius: 3px; box-shadow: 0 0 0 .5px rgba(10,22,40,.15); display: block; }
.phone-input .pi-dial { font-size: 13px; font-weight: 500; }
.phone-input .pi-caret { font-size: 10px; color: var(--muted); }
.phone-input .pi-num { flex: 1; min-width: 0; height: 38px; font-family: var(--sans); font-size: 13px; }
.phone-input .pi-item .pi-flagimg { width: 18px; }
.phone-input .pi-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 80; width: 280px; max-height: 280px; overflow: hidden; display: flex; flex-direction: column; background: var(--card, #fff); border-radius: 14px; box-shadow: var(--shadow-lg); border: .5px solid var(--line); }
.phone-input .pi-search { margin: 8px; padding: 8px 12px; border: none; border-radius: 9px; background: rgba(10,22,40,.06); font-size: 12.5px; outline: none; }
.phone-input .pi-items { overflow-y: auto; padding: 0 6px 6px; }
.phone-input .pi-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; cursor: pointer; }
.phone-input .pi-item:hover { background: rgba(10,22,40,.06); }
.phone-input .pi-item-dial { margin-left: auto; color: var(--muted); font-weight: 600; }

/* AI Assistance button - modern gradient glow */
.ai-btn { position: relative; display: inline-flex; border: none; border-radius: 999px; padding: 2px; cursor: pointer; background: linear-gradient(120deg, #4f8cff, #a44fff, #ff4fd8, #4f8cff); background-size: 300% 300%; animation: aiShift 4s ease infinite; box-shadow: 0 4px 18px rgba(122,79,255,.35); transition: transform .18s ease, box-shadow .18s ease; }
.ai-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(122,79,255,.5); }
.ai-btn .ai-btn-inner { display: inline-flex; align-items: center; gap: 6px; background: rgba(10,14,30,.92); color: #fff; border-radius: 999px; padding: 8px 18px; font-size: 12.5px; font-weight: 650; letter-spacing: .3px; }
.ai-btn .ai-btn-sep { color: #a44fff; }
@keyframes aiShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* Detail header - price is the headline; ref rides small in the sub line */
.ref-small { font-size: 11.5px; font-weight: 700; letter-spacing: .4px; color: var(--muted); background: rgba(10,22,40,.05); padding: 2px 9px; border-radius: 999px; }

/* Inline multi-select filter popover (filter bars) */
.fmulti { position: relative; display: inline-block; }
.fmulti-btn { padding: 7px 13px; border: none; border-radius: 999px; font-size: 13px; background: rgba(10,22,40,.05); color: var(--text); cursor: pointer; }
.fmulti-btn.on { background: var(--navy); color: #fff; }
/* Inside a filter panel the multi-select is dressed exactly like the enhanced
   dropdowns next to it (.dd-btn): same pill, padding, gap, font and caret, with
   its text left-aligned rather than button-centred. */
.pf-field .fmulti { display: block; }
.pf-field .fmulti-btn {
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 100%; padding: 7px 14px; border-radius: 999px;
  font-family: var(--sans); font-size: 13px; font-weight: 400; line-height: normal; text-align: left;
  background: rgba(10,22,40,.05); color: var(--text);
}
.pf-field .fmulti-btn.on { background: rgba(10,22,40,.05); color: var(--text); }
.pf-field .fmulti-btn:hover { background: rgba(10,22,40,.1); }
.pf-field .fmulti-btn:focus { outline: none; box-shadow: 0 0 0 2px rgba(35,64,95,.25); }
.pf-field .fm-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-field .fm-caret { flex-shrink: 0; margin-left: auto; font-size: 10px; color: var(--muted); }
/* options styled like .dd-opt */
.pf-field .fmulti-list { border-radius: 14px; }
.pf-field .fmulti-list label { padding: 8px 12px; border-radius: 9px; font-size: 12.5px; }
.fmulti-list { position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; background: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 400; max-height: 230px; overflow-y: auto; }
.fmulti-list label { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; cursor: pointer; color: var(--text); font-weight: 500; text-transform: none; }
.fmulti-list label:hover { background: rgba(10,22,40,.06); }
.fmulti-list input { accent-color: var(--navy); }

/* ---------- Tabs - segmented ---------- */
.tabs { display: inline-flex; gap: 2px; background: rgba(10,22,40,.06); border-radius: 999px; padding: 3px; margin-bottom: 18px; flex-wrap: wrap; }
.tabs .tab { padding: 8px 16px; cursor: pointer; font-weight: 590; font-size: 12.5px; color: var(--muted); border-radius: 999px; transition: all .2s ease; white-space: nowrap; }
.tabs .tab:hover { color: var(--navy); }
.tabs .tab.active { color: var(--navy); background: #fff; box-shadow: 0 1px 4px rgba(10,22,40,.15); }
.tab-count { display: inline-block; background: rgba(10,22,40,.08); border-radius: 999px; padding: 0 7px; font-size: 10.5px; margin-left: 5px; color: var(--navy); }
.tabs .tab.active .tab-count { background: var(--accent-soft); }

/* ---------- Pills / badges ---------- */
.pill { display: inline-block; padding: 2.5px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.pill.navy { background: #e9edf3; color: var(--navy); }
.pill.green { background: #e4f4eb; color: #1e7a46; }
.pill.orange { background: #fcf0dd; color: #b06a10; }
.pill.red { background: #fbe9e9; color: var(--red); }
.pill.gold { background: var(--accent-soft); color: #55555e; }
.pill.grey { background: #ededf2; color: var(--muted); }
.pill.indigo { background: linear-gradient(135deg, #6157ff, #4d2ee0); color: #fff; box-shadow: 0 2px 8px rgba(93,63,255,.35); }

.tl-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: middle; }
.tl-dot.green { background: var(--green); box-shadow: 0 0 0 3.5px rgba(52,167,101,.16); }
.tl-dot.orange { background: var(--orange); box-shadow: 0 0 0 3.5px rgba(232,145,45,.16); }
.tl-dot.red { background: var(--red); box-shadow: 0 0 0 3.5px rgba(214,69,69,.16); }

.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer; font-size: 13px; margin: 0 1px; text-decoration: none; transition: transform .15s; background: #eef0f4; }
.icon-btn.wa { background: #e4f4eb; }
.icon-btn.call { background: #e9edf3; }
.icon-btn:hover { transform: scale(1.14); }

/* ---------- Forms / modals - glassmorphism ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(10,22,40,.35); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 44px 16px; overflow-y: auto; }
.modal { background: rgba(255,255,255,.94); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border-radius: 20px; width: 100%; max-width: 760px; box-shadow: var(--shadow-lg), 0 0 0 .5px rgba(255,255,255,.6) inset; animation: pop .22s cubic-bezier(.2,.9,.3,1.2); }
.modal.wide { max-width: 1000px; }
.modal.narrow { max-width: 480px; }
@keyframes pop { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; }
.modal-head h2 { font-size: 17px; color: var(--navy); letter-spacing: -.3px; }
.modal-close { background: rgba(10,22,40,.06); border: none; width: 28px; height: 28px; border-radius: 50%; font-size: 15px; cursor: pointer; color: var(--muted); transition: background .15s; }
.modal-close:hover { background: rgba(10,22,40,.12); }
.modal-body { padding: 6px 24px 20px; max-height: 66vh; overflow-y: auto; }
.modal-foot { padding: 14px 24px 18px; display: flex; justify-content: flex-end; gap: 8px; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; }
.field input, .field select, .field textarea { width: 100%; padding: 10px 13px; border: none; border-radius: 11px; font-size: 13.5px; font-family: var(--sans); outline: none; background: rgba(10,22,40,.05); color: var(--text); transition: background .15s, box-shadow .15s; }
.field input:focus, .field select:focus, .field textarea:focus { background: #fff; box-shadow: 0 0 0 2.5px rgba(35,64,95,.28); }
.field textarea { min-height: 72px; resize: vertical; }
.section-title { grid-column: 1 / -1; font-size: 11px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 1.2px; padding: 10px 0 2px; }

/* ---------- Searchable combobox ---------- */
.combo { position: relative; }
.combo-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 210px; overflow-y: auto; background: rgba(255,255,255,.97); backdrop-filter: blur(20px); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 60; padding: 4px; }
.combo-list .co-item { padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.combo-list .co-item:hover, .combo-list .co-item.hl { background: rgba(10,22,40,.07); }

/* ---------- Multi-select ---------- */
.mselect { position: relative; }
.ms-box { min-height: 40px; padding: 6px 10px; border-radius: 11px; background: rgba(10,22,40,.05); cursor: pointer; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ms-box .ms-ph { color: var(--muted); font-size: 13px; padding: 3px; }
.ms-chip { background: var(--navy); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; display: inline-flex; align-items: center; gap: 5px; }
.ms-chip span { cursor: pointer; opacity: .7; }
.ms-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 200px; overflow-y: auto; background: rgba(255,255,255,.97); backdrop-filter: blur(20px); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 60; padding: 4px; }
.ms-list .ms-item { padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; display: flex; justify-content: space-between; }
.ms-list .ms-item:hover { background: rgba(10,22,40,.07); }
.ms-list .ms-item.on { font-weight: 600; color: var(--navy); }

/* ---------- Chip row (single-select) ---------- */
.chiprow { display: flex; gap: 6px; flex-wrap: wrap; }
.chiprow .cr-chip { padding: 6px 13px; border-radius: 999px; background: rgba(10,22,40,.05); font-size: 12px; cursor: pointer; transition: all .15s; font-weight: 550; color: var(--muted); }
.chiprow .cr-chip:hover { background: rgba(10,22,40,.1); }
.chiprow .cr-chip.on { background: var(--navy); color: #fff; }

/* ---------- Detail pages ---------- */
.detail-layout { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.detail-side .card { margin-bottom: 16px; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 13px; border-bottom: .5px solid var(--line); }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--muted); flex-shrink: 0; }
.kv .v { font-weight: 590; text-align: right; }

.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: var(--line); border-radius: 2px; }
.tl-item { position: relative; padding: 0 0 16px 0; }
.tl-item::before { content: ''; position: absolute; left: -19px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--navy-3); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--line); }
.tl-item .tl-meta { font-size: 11.5px; color: var(--muted); }
.tl-item .tl-note { margin-top: 3px; font-size: 13px; }

/* ---------- Property photos ---------- */
.sq-photo { aspect-ratio: 1 / 1; background: linear-gradient(145deg, var(--navy-2), var(--navy-3)); border-radius: var(--radius-sm); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 44px; position: relative; overflow: hidden; }
.carousel { position: relative; width: 340px; max-width: 100%; aspect-ratio: 4 / 3; background: linear-gradient(145deg, var(--navy-2), var(--navy-3)); border-radius: var(--radius); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 48px; overflow: hidden; }
.carousel .car-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.18); backdrop-filter: blur(10px); border: none; color: #fff; font-size: 20px; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; transition: background .2s; }
.carousel .car-nav:hover { background: rgba(255,255,255,.32); }
.carousel .car-nav.prev { left: 12px; } .carousel .car-nav.next { right: 12px; }
.carousel .car-count { position: absolute; bottom: 12px; right: 14px; font-size: 12px; background: rgba(10,22,40,.6); backdrop-filter: blur(8px); padding: 3px 12px; border-radius: 999px; }

.map-embed { width: 100%; height: 260px; border: none; border-radius: var(--radius-sm); background: var(--accent-soft); }

/* ---------- Interactive Location Map (Leaflet) ---------- */
.locmap-wrap { position: relative; }
.locmap { height: 300px; border-radius: var(--radius-sm); overflow: hidden; z-index: 0; background: var(--accent-soft); }
.locmap-hint { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: rgba(10,22,40,.88);
  backdrop-filter: blur(8px); color: #fff; padding: 7px 16px; border-radius: 999px; font-size: 12px; font-weight: 550;
  z-index: 500; pointer-events: none; box-shadow: var(--shadow-lg); white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.locmap-hint.hidden { display: none; }
.locmap .leaflet-control-zoom { border: none !important; border-radius: 10px !important; overflow: hidden; box-shadow: var(--shadow); }
.locmap .leaflet-control-zoom a { background: #fff !important; color: var(--navy) !important; border: none !important; }

.coords-box { display: flex; align-items: center; gap: 11px; background: rgba(10,22,40,.04); border-radius: 10px; padding: 10px 14px; }
.coords-box .coords-pin { font-size: 18px; }
.coords-box .coords-label { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 600; }
.coords-box .coords-val { font-size: 13px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.coords-box.empty .coords-val { font-weight: 400; color: var(--muted); }

.crm-pin { position: relative; width: 38px; height: 50px; }
.crm-pin-body { position: absolute; top: 0; left: 0; width: 38px; height: 38px; border-radius: 50%;
  background: var(--navy); border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center; }
.crm-pin-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; display: block; }
.crm-pin-tail { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 14px;
  background: var(--navy); border-radius: 0 0 4px 4px; display: block; }
.crm-pin-pulse { position: absolute; top: 7px; left: 7px; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(10,22,40,.28); animation: pinPulse 2s ease-out infinite; display: block; }
@keyframes pinPulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(3); opacity: 0; } }

/* ---------- Calendar ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
/* minmax(0,1fr) + min-width:0 stop long no-wrap event labels forcing the
   columns wide - previously Sat + Sun were pushed past the clipped edge */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: #fff; gap: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.cal-dow { color: var(--muted); padding: 12px 8px 8px; font-size: 10.5px; text-align: center; text-transform: uppercase; letter-spacing: .8px; font-weight: 600; border-bottom: 1px solid var(--line); }
.cal-cell { background: #fff; min-height: 104px; min-width: 0; padding: 7px; font-size: 12px; border-bottom: .5px solid var(--line); border-right: .5px solid var(--line); }
.cal-dow { min-width: 0; }
.cal-cell.other { background: #fafafc; color: var(--muted); }
.cal-cell.today .cd { background: var(--navy); color: #fff; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.cal-cell .cd { font-weight: 600; margin-bottom: 4px; font-size: 11.5px; }
.cal-event { display: block; margin-bottom: 3px; padding: 2.5px 8px; border-radius: 6px; font-size: 10.5px; cursor: pointer; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 550; }
.cal-event.viewing { background: var(--navy-3); }
.cal-event.appointment { background: #8e8e93; }
.cal-event.followup { background: var(--green); }
.cal-event.valuation { background: #5e78a8; }
.cal-event.bankval { background: #7a6ea8; }
.cal-event.transfer { background: #2e7d8a; }
.cal-event.cancelled { opacity: .45; text-decoration: line-through; }

/* Week view */
.week-grid { display: grid; grid-template-columns: 52px repeat(7, 1fr); background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.week-grid .wk-time { font-size: 10px; color: var(--muted); text-align: right; padding: 2px 6px 0 0; border-right: .5px solid var(--line); height: 44px; }
.week-grid .wk-cell { border-right: .5px solid var(--line); border-bottom: .5px solid var(--line); height: 44px; position: relative; min-width: 0; }
.week-grid .wk-head { padding: 10px 4px; text-align: center; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--line); font-weight: 600; }
.week-grid .wk-head.today { color: var(--navy); }
.wk-event { position: absolute; left: 2px; right: 2px; border-radius: 6px; color: #fff; font-size: 10px; padding: 3px 6px; overflow: hidden; cursor: pointer; z-index: 5; font-weight: 550; }

/* ---------- Kanban tasks ---------- */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kb-col { background: rgba(10,22,40,.04); border-radius: var(--radius); padding: 12px; }
.kb-col h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); padding: 4px 6px 12px; font-weight: 600; }
.kb-card { background: #fff; border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow); cursor: pointer; border-left: 3px solid var(--line); transition: transform .15s, box-shadow .15s; }
.kb-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(10,22,40,.12); }
.kb-card.prio-High { border-left-color: var(--red); }
.kb-card.prio-Medium { border-left-color: var(--orange); }
.kb-card.prio-Low { border-left-color: var(--green); }
.kb-card .kb-title { font-weight: 600; font-size: 13px; }
.kb-card .kb-meta { font-size: 11.5px; color: var(--muted); margin-top: 5px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Charts ---------- */
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.bar-row .bar-label { width: 150px; font-size: 12px; color: var(--muted); text-align: right; flex-shrink: 0; }
.bar-row .bar-track { flex: 1; background: rgba(10,22,40,.05); border-radius: 999px; height: 22px; overflow: hidden; }
.bar-row .bar-fill { height: 100%; background: linear-gradient(90deg, var(--navy-2), var(--navy-3)); border-radius: 999px; display: flex; align-items: center; justify-content: flex-end; color: #fff; font-size: 10.5px; padding-right: 9px; min-width: 26px; transition: width .5s ease; }
.bar-row .bar-fill.gold { background: linear-gradient(90deg, #b9b9c1, var(--accent)); color: var(--navy); }

.funnel-step { margin: 0 auto 6px; background: linear-gradient(90deg, var(--navy-2), var(--navy-3)); color: #fff; text-align: center; padding: 10px; border-radius: 999px; font-size: 12.5px; font-weight: 590; }

/* ---------- Noticeboard ---------- */
.notice { border-left: 3px solid var(--accent); background: #fff; border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow); }
.notice.pinned { border-left-color: var(--navy); background: linear-gradient(160deg, #fff, #f7f8fa); }
.notice .n-title { font-weight: 650; color: var(--navy); }
.notice .n-meta { font-size: 11.5px; color: var(--muted); margin: 2px 0 6px; }

/* ---------- Toast ---------- */
#toastRoot { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: rgba(10,22,40,.9); backdrop-filter: blur(16px); color: #fff; padding: 12px 24px; border-radius: 999px; box-shadow: var(--shadow-lg); font-size: 13px; animation: pop .25s; }
.toast.success { background: rgba(30,122,70,.92); }

/* ---------- Chat widget ---------- */
.chat-widget { position: fixed; bottom: 24px; right: 24px; z-index: 300; }
.chat-toggle { width: 54px; height: 54px; border-radius: 50%; border: none; background: var(--navy); color: #fff; font-size: 22px; cursor: pointer; box-shadow: 0 10px 28px rgba(10,22,40,.4); transition: transform .2s; }
.chat-toggle:hover { transform: scale(1.07); }
.chat-panel { position: absolute; bottom: 66px; right: 0; width: 330px; background: var(--glass); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; }
.chat-header { background: var(--navy); color: #fff; padding: 14px 18px; font-weight: 650; font-family: var(--serif); }
.chat-body { height: 260px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { max-width: 85%; padding: 9px 13px; border-radius: 16px; font-size: 12.5px; }
.chat-msg.bot { background: rgba(10,22,40,.07); align-self: flex-start; border-bottom-left-radius: 5px; }
.chat-msg.user { background: var(--navy); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }
.chat-input-row { display: flex; border-top: .5px solid var(--line); background: rgba(255,255,255,.6); }
.chat-input-row input { flex: 1; border: none; background: transparent; padding: 12px 16px; outline: none; font-size: 13px; }
.chat-input-row button { border: none; background: var(--navy); color: #fff; padding: 0 18px; cursor: pointer; }

/* ---------- Record nav arrows ---------- */
.rec-nav { display: flex; gap: 6px; }
.rec-nav .btn { padding: 7px 13px; }

/* ---------- Match results ---------- */
.match-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 8px; background: #fff; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.match-row:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(10,22,40,.1); }
.match-row .m-main { font-weight: 600; font-size: 13px; }
.match-row .m-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.match-row .m-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.match-row .m-photo { width: 52px; height: 52px; border-radius: 10px; background: linear-gradient(145deg, var(--navy-2), var(--navy-3)); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.match-row input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--navy); cursor: pointer; }

.select-bar { position: sticky; bottom: 18px; display: flex; gap: 10px; justify-content: center; padding: 10px 16px; background: rgba(10,22,40,.9); backdrop-filter: blur(20px); border-radius: 999px; box-shadow: var(--shadow-lg); width: fit-content; margin: 14px auto 0; z-index: 40; }
.select-bar span { color: #fff; font-size: 12.5px; align-self: center; }

/* ---------- Brochure preview ---------- */
.bro-page { border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 14px; box-shadow: var(--shadow); background: #fff; }
.bro-cover { background: var(--navy); aspect-ratio: 1 / 1.35; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; }
.bro-cover img { width: 55%; }
.bro-footer { background: var(--navy); color: #cfd8e2; font-size: 10px; padding: 8px 16px; display: flex; justify-content: space-between; align-items: center; }
.bro-hero { aspect-ratio: 16/10; background: linear-gradient(145deg, var(--navy-2), var(--navy-3)); display: flex; align-items: center; justify-content: center; font-size: 70px; color: #fff; }

/* ---------- RTL ---------- */
html[dir="rtl"] table.data th { text-align: right; }
html[dir="rtl"] .bar-row .bar-label { text-align: left; }
html[dir="rtl"] .dropdown { left: auto; right: 0; }
html[dir="rtl"] .chat-widget { right: auto; left: 24px; }

/* ---------- Premium icons ---------- */
.btn .ico { vertical-align: -2px; margin-right: 1px; }
.select-bar .btn .ico { vertical-align: -2.5px; }
.cal-event .cal-ava { width: 13px; height: 13px; border-radius: 50%; object-fit: cover; vertical-align: -2.5px; margin-right: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.7); display: inline-block; }

/* ---------- Glass date & time picker ---------- */
.glass-dp { position: fixed; z-index: 600; width: 292px; padding: 16px; border-radius: 18px;
  background: rgba(255,255,255,.86); backdrop-filter: blur(26px) saturate(1.5); -webkit-backdrop-filter: blur(26px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.6); box-shadow: 0 24px 60px rgba(10,22,40,.24), inset 0 1px 0 rgba(255,255,255,.6);
  animation: pop .18s cubic-bezier(.2,.9,.3,1.2); }
.glass-dp .dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.glass-dp .dp-month { font-size: 13.5px; font-weight: 700; color: var(--navy); letter-spacing: -.2px; }
.glass-dp .dp-nav { width: 28px; height: 28px; border: none; border-radius: 50%; background: rgba(10,22,40,.06); color: var(--navy); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.glass-dp .dp-nav:hover { background: rgba(10,22,40,.13); }
.glass-dp .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.glass-dp .dp-dow { font-size: 10px; font-weight: 700; color: var(--muted); text-align: center; padding: 4px 0; text-transform: uppercase; }
.glass-dp .dp-day { border: none; background: transparent; font-size: 12.5px; font-family: var(--sans); color: var(--text); padding: 7px 0; border-radius: 9px; cursor: pointer; font-weight: 550; transition: background .12s; }
.glass-dp .dp-day:hover { background: rgba(10,22,40,.08); }
.glass-dp .dp-day.today { box-shadow: inset 0 0 0 1.5px rgba(35,64,95,.4); }
.glass-dp .dp-day.sel { background: var(--navy); color: #fff; font-weight: 700; }
.glass-dp .dp-time { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: .5px solid rgba(10,22,40,.1); }
.glass-dp .dp-tlabel { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin-right: 4px; }
.glass-dp .dp-tsel { flex: 1; padding: 8px 10px; border: none; border-radius: 10px; background: rgba(10,22,40,.06); font-size: 14px; font-weight: 650; color: var(--navy); text-align: center; outline: none; font-family: var(--sans); }
.glass-dp .dp-tcolon { font-weight: 700; color: var(--muted); }
.glass-dp .dp-foot { display: flex; gap: 6px; margin-top: 12px; }
.glass-dp .dp-btn { flex: 1; padding: 8px 0; border: none; border-radius: 999px; background: rgba(10,22,40,.06); color: var(--navy); font-size: 12px; font-weight: 650; cursor: pointer; font-family: var(--sans); transition: background .15s; }
.glass-dp .dp-btn:hover { background: rgba(10,22,40,.13); }
.glass-dp .dp-btn.dp-done { background: var(--navy); color: #fff; }
.glass-dp .dp-btn.dp-done:hover { background: var(--navy-2); }

/* ---------- Login - animated mesh gradient background ---------- */
#loginOverlay { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; background: #030014; overflow: hidden; }
#loginOverlay .mesh-orb { position: absolute; border-radius: 50%; pointer-events: none; }
#loginOverlay .mesh-orb.o1 { left: -10%; top: -10%; width: 60%; height: 60%;
  background: radial-gradient(circle, #7c3aed40 0%, transparent 70%); filter: blur(80px);
  animation: meshMove1 60s ease-in-out infinite; }
#loginOverlay .mesh-orb.o2 { right: -5%; top: 10%; width: 50%; height: 50%;
  background: radial-gradient(circle, #2563eb35 0%, transparent 70%); filter: blur(100px);
  animation: meshMove2 80s ease-in-out infinite; }
#loginOverlay .mesh-orb.o3 { left: 20%; bottom: -15%; width: 70%; height: 55%;
  background: radial-gradient(circle, #06b6d430 0%, transparent 70%); filter: blur(120px);
  animation: meshMove3 90s ease-in-out infinite; }
#loginOverlay .mesh-orb.o4 { left: 40%; top: 30%; width: 40%; height: 40%;
  background: radial-gradient(circle, #8b5cf625 0%, transparent 70%); filter: blur(90px);
  animation: meshMove4 70s ease-in-out infinite; }
#loginOverlay .mesh-noise { position: absolute; inset: 0; opacity: .03; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
#loginOverlay .login-card { position: relative; z-index: 10; }

/* Premium glassmorphic login card */
#loginOverlay .login-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 22px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  width: 440px;
  max-width: 92vw;
  padding: 40px 36px 30px;
  text-align: center;
}
#loginOverlay .login-card img { height: 24px; margin-bottom: 10px; filter: none; }
/* Horizontal "apricity | REAL ESTATE" lockup replaces the text title */
#loginOverlay .login-card img.lg-logo { height: auto; width: 78%; max-width: 320px; margin: 0 auto 32px; display: block; }
#loginOverlay .login-card .lg-sub { color: rgba(255, 255, 255, 0.55); font-size: 10px; letter-spacing: 4px; margin-bottom: 24px; margin-top: -12px; }
#loginOverlay .login-card .field { margin-bottom: 14px; text-align: left; }
#loginOverlay .login-card .field label { color: rgba(255, 255, 255, 0.7); font-size: 10.5px; letter-spacing: .8px; }
#loginOverlay .login-card .field input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  color: #fff;
  padding: 11px 14px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
#loginOverlay .login-card .field input::placeholder { color: rgba(255, 255, 255, 0.35); }
#loginOverlay .login-card .field input:focus {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
}
#loginOverlay .btn-access {
  background: #ffffff;
  border-radius: 11px;
  font-weight: 600;
  color: var(--navy);
  border: none;
  transition: filter .2s, box-shadow .2s, transform .15s;
}
#loginOverlay .btn-access:hover {
  background: #ffffff;
  filter: brightness(1.03);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}
#loginOverlay .lg-foot { color: rgba(255, 255, 255, 0.5); }
#loginOverlay .lg-foot a, #loginOverlay .login-card a { color: rgba(255, 255, 255, 0.5); transition: color .2s; }
#loginOverlay .lg-foot a:hover, #loginOverlay .login-card a:hover { color: rgba(255, 255, 255, 0.8); }
#loginOverlay .login-card p { color: rgba(255, 255, 255, 0.55); }
#loginOverlay .login-card p b { color: rgba(255, 255, 255, 0.85); }
@keyframes meshMove1 {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  25% { transform: translate(5%, 10%) scale(1.05); }
  50% { transform: translate(10%, 5%) scale(0.95); }
  75% { transform: translate(5%, -5%) scale(1.02); }
}
@keyframes meshMove2 {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  33% { transform: translate(-10%, 8%) scale(1.08); }
  66% { transform: translate(-5%, -5%) scale(0.95); }
}
@keyframes meshMove3 {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  50% { transform: translate(-8%, -10%) scale(1.1); }
}
@keyframes meshMove4 {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  25% { transform: translate(15%, -10%) scale(0.9); }
  50% { transform: translate(-10%, 15%) scale(1.1); }
  75% { transform: translate(-15%, -5%) scale(0.95); }
}
.login-card { background: #fff; border-radius: 20px; padding: 44px 40px 38px; width: 400px; max-width: 92vw; text-align: center; box-shadow: var(--shadow-lg); animation: pop .3s ease-out; }
.login-card img { height: 26px; margin-bottom: 8px; }
.login-card .lg-sub { color: var(--muted); font-size: 11px; letter-spacing: 3px; margin-bottom: 26px; }
.login-card .field { text-align: left; margin-bottom: 14px; }
.login-card .btn-access { width: 100%; padding: 13px; border: none; border-radius: 999px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 650; cursor: pointer; margin-top: 8px; transition: background .2s, transform .15s; }
.login-card .btn-access:hover { background: var(--navy-2); transform: translateY(-1px); }
.login-card .lg-foot { font-size: 11px; color: var(--muted); margin-top: 18px; }

/* ---------- Calendar: new event types ---------- */
.cal-event.task { background: var(--orange); }
.cal-event.shoot { background: #a35d9c; }
.cal-event.workloc { background: #eef1f5; color: var(--navy); box-shadow: inset 0 0 0 1px rgba(10,22,40,.18); font-weight: 650; }
.wk-event.workloc { color: var(--navy); }

/* ---------- Broker Activity / drill-down grouped bar charts ----------
   Two fixed series: Calls (blue) · Valuations (yellow) - legend + direct
   value labels; single-series drill bars reuse .comm (navy). */
.ba-chart { display: flex; align-items: flex-end; gap: 14px; height: 170px; padding: 6px 4px 0; }
.ba-group { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.ba-bars { flex: 1; width: 100%; display: flex; align-items: stretch; justify-content: center; gap: 5px; }
.ba-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 26px; max-width: 34px; }
.ba-val { font-size: 10.5px; color: var(--muted); font-weight: 700; margin-bottom: 3px; min-height: 13px; }
.ba-bar { width: 100%; border-radius: 4px 4px 0 0; min-height: 3px; transition: height .4s ease; }
.ba-bar.calls { background: #3ba7dc; }
.ba-bar.vendor { background: #23405f; }
.ba-bar.vals { background: #e2c044; }
.ba-bar.views { background: #34a765; }
.ba-bar.comm { background: linear-gradient(180deg, var(--navy-3), var(--navy-2)); }
.ba-name { margin-top: 8px; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.ba-legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.ba-key { display: inline-flex; align-items: center; gap: 5px; }
.ba-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ba-swatch.calls { background: #3ba7dc; }
.ba-swatch.vendor { background: #23405f; }
.ba-swatch.vals { background: #e2c044; }
.ba-swatch.views { background: #34a765; }

/* Broker Activity slider (one broker per slide) */
.ba-slider { display: flex; align-items: center; gap: 8px; }
.ba-track { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 14px; }
.ba-track::-webkit-scrollbar { display: none; }
.ba-slide { flex: 0 0 100%; min-width: 100%; scroll-snap-align: start; padding: 14px 18px; box-sizing: border-box; }
.ba-slide-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ba-slide-name { font-size: 15px; font-weight: 700; color: var(--navy); }
.ba-slide-role { font-size: 11.5px; color: var(--muted); }
.ba-hbars { display: flex; flex-direction: column; gap: 10px; }
.ba-hrow { display: flex; align-items: center; gap: 10px; }
.ba-hlabel { width: 138px; flex-shrink: 0; font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: right; }
.ba-htrack { flex: 1; height: 14px; background: rgba(10,22,40,.06); border-radius: 999px; overflow: hidden; }
.ba-hfill { height: 100%; border-radius: 999px; transition: width .5s ease; }
.ba-hfill.calls { background: #3ba7dc; }
.ba-hfill.vendor { background: #23405f; }
.ba-hfill.vals { background: #e2c044; }
.ba-hfill.views { background: #34a765; }
.ba-hval { width: 30px; flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--navy); }
.ba-arrow { width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(10,22,40,.07); color: var(--navy); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s; }
.ba-arrow:hover { background: rgba(10,22,40,.14); }
.ba-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.ba-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(10,22,40,.15); cursor: pointer; transition: all .2s; }
.ba-dot.on { background: var(--navy); width: 22px; border-radius: 999px; }

/* Table row action buttons (Manage Users) */
.row-actions { display: flex; gap: 6px; }
.iconbtn { width: 30px; height: 30px; border-radius: 9px; border: none; background: rgba(10,22,40,.06); color: var(--navy); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .18s; }
.iconbtn:hover { background: var(--navy); color: #fff; transform: translateY(-1px); }
.iconbtn.danger:hover { background: var(--red); }
.iconbtn.ok { color: var(--green); }
.iconbtn.ok:hover { background: var(--green); color: #fff; }

/* Admin Operations - bright color cards */
.opcard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.opcard { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: 16px; color: #fff; text-decoration: none; box-shadow: 0 8px 22px rgba(10,22,40,.16); transition: transform .18s ease, box-shadow .18s ease; }
.opcard:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(10,22,40,.24); }
.opcard .op-val { font-size: 28px; font-weight: 800; line-height: 1.15; }
.opcard .op-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; opacity: .85; }
/* Tinted with the CRM's own status palette (same tints as the pills) so the
   cards read as part of the system: navy / orange / green / red on soft
   washes, standard radius + shadow, muted uppercase labels. */
.opcard { color: var(--text); box-shadow: var(--shadow); border-radius: var(--radius); border: none; }
.opcard:hover { box-shadow: 0 12px 30px rgba(10,22,40,.14); }
.opcard .op-label { color: var(--muted); opacity: 1; }
.opcard.op-blue { background: #e9edf3; }
.opcard.op-blue .op-val { color: var(--navy); }
.opcard.op-yellow, .opcard.op-orange { background: #fcf0dd; }
.opcard.op-yellow .op-val, .opcard.op-orange .op-val { color: #b06a10; }
.opcard.op-green, .opcard.op-teal { background: #e4f4eb; }
.opcard.op-green .op-val, .opcard.op-teal .op-val { color: #1e7a46; }
.opcard.op-pink, .opcard.op-red { background: #fbe9e9; }
.opcard.op-pink .op-val, .opcard.op-red .op-val { color: var(--red); }

/* PropertyFinder credits - modern gradient card with progress ring */
.pfcredit-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; border-radius: 18px; background: linear-gradient(135deg, #0b2b47, #008080 130%); color: #fff; box-shadow: 0 12px 30px rgba(10,22,40,.25); }
.pfc-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: #9fd9d2; }
.pfc-val { font-size: 32px; font-weight: 800; letter-spacing: -.5px; margin: 4px 0 2px; }
.pfc-sub { font-size: 12px; color: #b8cbd8; }
.pfc-pill { display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 11px; font-weight: 600; }
.pfc-pill.warn { background: rgba(255,95,109,.35); }
.pfc-ring { flex-shrink: 0; }
.pfc-ring-fill { transition: stroke-dashoffset .8s ease; }
/* Property Finder brand-red variant (with white PF logo) */
.pfcredit-card.pf-red { background: #EF5E52; box-shadow: 0 12px 30px rgba(239,94,82,.35); }
.pfcredit-card.pf-red .pfc-title { color: rgba(255,255,255,.85); }
.pfcredit-card.pf-red .pfc-sub { color: rgba(255,255,255,.8); }
.pfcredit-card.pf-red .pfc-pill { background: rgba(255,255,255,.18); }
.pfcredit-card.pf-red .pfc-pill.warn { background: rgba(10,22,40,.3); }
/* Electric-green variant (Incentives banked commission) */
.pfcredit-card.pf-green { background: linear-gradient(135deg, #00e676, #00b248); box-shadow: 0 12px 30px rgba(0,200,83,.35); }
.pfcredit-card.pf-green .pfc-title, .pfcredit-card.pf-green .pfc-sub { color: rgba(255,255,255,.88); }
.pfcredit-card.pf-green .pfc-pill { background: rgba(255,255,255,.2); }

/* Global chart fill-in animations - pure CSS, animates from 0 to the inline
   width/height each render. Lightweight (no JS, compositor-cheap counts). */
@keyframes growW { from { width: 0; } }
@keyframes growH { from { height: 0; } }
.lb-bar, .ba-hfill, .bar-fill, .perf-fill { animation: growW .7s cubic-bezier(.22,.8,.35,1); }
.ba-bar { animation: growH .7s cubic-bezier(.22,.8,.35,1); }

/* ---------- Performance tab ---------- */
.perf-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 11px; border-radius: 999px; font-size: 11px; font-weight: 750; letter-spacing: .2px; white-space: nowrap; }
.perf-badge.ok { background: rgba(52,167,101,.14); color: #1f7a47; }
.perf-badge.miss { background: rgba(214,69,69,.13); color: var(--red); }
.perf-badge.prog { background: rgba(59,167,220,.14); color: #1d6f99; }
.perf-track { position: relative; height: 8px; background: rgba(10,22,40,.07); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.perf-track.big { height: 18px; margin-top: 0; }
.perf-fill { height: 100%; border-radius: 999px; transition: width .6s ease; }
.perf-track-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 750; color: var(--navy); text-shadow: 0 0 4px rgba(255,255,255,.7); }
.perf-hist-head { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; }
.perf-hist-caret { display: inline-flex; color: var(--muted); transition: transform .25s ease; }
.perf-hist-caret.open { transform: rotate(90deg); }
.sbar-group .perf-badge { margin-top: 5px; }

/* Stacked actual-vs-target columns (profile) */
.sbar-chart { display: flex; gap: 18px; align-items: flex-end; height: 150px; margin-top: 10px; padding: 0 4px; }
.sbar-group { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.sbar-col { position: relative; width: 46px; max-width: 100%; flex: 1; background: rgba(10,22,40,.07); border-radius: 9px; overflow: hidden; }
.sbar-fill { position: absolute; bottom: 0; left: 0; right: 0; border-radius: 0 0 9px 9px; }
/* value label sits ABOVE the column so long values (119K / 150K) always fit */
.sbar-topval { font-size: 10px; font-weight: 750; color: var(--navy); margin-bottom: 5px; white-space: nowrap; }
.sbar-label { margin-top: 7px; font-size: 10.5px; font-weight: 650; color: var(--muted); text-align: center; white-space: nowrap; }

/* Incentives ladder */
.incent-card { transition: box-shadow .2s ease; }
.incent-card.unlocked { border: 1px solid rgba(52,167,101,.35); }
.incent-ico { width: 52px; height: 52px; border-radius: 15px; background: rgba(10,22,40,.05); display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; }
.incent-card.unlocked .incent-ico { background: rgba(52,167,101,.13); }

/* ---------- Targets & performance donut ---------- */
.tgt-donut { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; }
.tgt-donut::before { content: ''; position: absolute; inset: 11px; background: var(--card); border-radius: 50%; }
.tgt-donut span { position: relative; text-align: center; line-height: 1.15; }
.tgt-donut b { font-size: 19px; color: var(--navy); letter-spacing: -.4px; }
.tgt-donut small { display: block; font-size: 8.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }

/* ---------- Fullscreen photo lightbox ---------- */
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
.lightbox { position: fixed; inset: 0; z-index: 800; background: rgba(6,12,22,.93);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center; animation: lbFade .18s ease-out; }
.lightbox .lb-img { max-width: 90vw; max-height: 80vh; border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55); transition: opacity .18s ease; user-select: none; }
.lightbox .lb-close { position: absolute; top: 18px; right: 20px; width: 42px; height: 42px; border: none;
  border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 24px; cursor: pointer;
  transition: background .15s; z-index: 2; }
.lightbox .lb-close:hover { background: rgba(255,255,255,.25); }
.lightbox .lb-title { position: absolute; top: 26px; left: 24px; color: #dfe7f0; font-size: 13px;
  font-weight: 600; max-width: 60vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px;
  border: none; border-radius: 50%; background: rgba(255,255,255,.14); backdrop-filter: blur(8px);
  color: #fff; font-size: 26px; cursor: pointer; transition: background .15s, transform .15s; z-index: 2; }
.lightbox .lb-nav:hover { background: rgba(255,255,255,.28); transform: translateY(-50%) scale(1.08); }
.lightbox .lb-prev { left: 22px; }
.lightbox .lb-next { right: 22px; }
.lightbox .lb-foot { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; flex-direction: column;
  align-items: center; gap: 10px; }
.lightbox .lb-count { background: rgba(10,22,40,.7); color: #fff; font-size: 12px; font-weight: 600;
  padding: 4px 14px; border-radius: 999px; }
.lightbox .lb-thumbs { display: flex; gap: 6px; max-width: 86vw; overflow-x: auto; padding: 4px; }
.lightbox .lb-thumb { width: 56px; height: 42px; object-fit: cover; border-radius: 7px; cursor: pointer;
  opacity: .5; transition: opacity .15s, box-shadow .15s; flex-shrink: 0; }
.lightbox .lb-thumb:hover { opacity: .85; }
.lightbox .lb-thumb.on { opacity: 1; box-shadow: 0 0 0 2px #fff; }
@media (max-width: 760px) { .lightbox .lb-nav { width: 38px; height: 38px; } .lightbox .lb-thumbs { display: none; } }

/* ---------- Ranked horizontal bars (leaderboard breakdown, analytics) ----------
   Name (avatar kept) left-aligned · bar · value label at the END of the bar,
   outside it, so zero / low values always stay readable. */
.lb-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.lb-name { display: flex; align-items: center; gap: 7px; width: 112px; flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--text); }
.lb-track { flex: 1; height: 14px; background: rgba(10,22,40,.05); border-radius: 999px; }
.lb-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--navy-2), var(--navy-3)); min-width: 4px; transition: width .5s ease; }
.lb-val { font-size: 12px; font-weight: 700; color: var(--navy); min-width: 54px; flex-shrink: 0; }

/* ---------- KPI row (Broker Performance overview) ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.kpi-card { background: #fff; border-radius: var(--radius-sm); box-shadow: 0 0 0 .5px rgba(10,22,40,.08), 0 2px 8px rgba(10,22,40,.05); padding: 14px 16px 12px; }
.kpi-val { font-size: 22px; font-weight: 750; color: var(--navy); letter-spacing: -.5px; line-height: 1.1; }
.kpi-accent { width: 32px; height: 4px; border-radius: 2px; background: var(--navy-3); margin: 8px 0 7px; }
.kpi-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }

/* Colored identity dot (broker filter chips, donut legend) */
.dotc { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; flex-shrink: 0; }

/* Large donut (conic-gradient with punched centre) */
.donut-lg { width: 150px; height: 150px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; }
.donut-lg::before { content: ''; position: absolute; inset: 20px; background: var(--card); border-radius: 50%; }
.donut-lg span { position: relative; text-align: center; line-height: 1.2; }
.donut-lg b { font-size: 20px; color: var(--navy); letter-spacing: -.4px; }
.donut-lg small { display: block; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }

/* ---------- Analytics: clickable metric rows ---------- */
.metric-row { cursor: pointer; border-radius: 8px; margin: 0 -8px; padding-left: 8px !important; padding-right: 8px !important; transition: background .15s; }
.metric-row:hover { background: rgba(10,22,40,.05); }

/* ---------- Print: only the open modal's content (schedules, brochures, deal files) ---------- */
@media print {
  body > *:not(#modalRoot) { display: none !important; }
  #modalRoot .modal-backdrop { position: static; padding: 0; background: none; backdrop-filter: none; overflow: visible; }
  #modalRoot .modal { box-shadow: none; max-width: 100%; background: #fff; }
  .modal-head .modal-close, .modal-foot { display: none !important; }
  .modal-body { max-height: none; overflow: visible; }
  .chat-widget, #toastRoot { display: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .detail-layout { grid-template-columns: 1fr; }
  .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .kanban { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  #mainnav { display: none; position: absolute; top: 60px; left: 0; right: 0; background: rgba(10,22,40,.96); backdrop-filter: blur(24px); flex-direction: column; align-items: stretch; padding: 8px 10px 14px; }
  #mainnav.open { display: flex; }
  #mainnav .dropdown { position: static; display: block; box-shadow: none; background: transparent; border-radius: 0; padding: 0; }
  #mainnav .dropdown a { color: #c9d2dd; padding-left: 30px; }
  #mainnav .dropdown .dd-head { color: #7f93a8; padding-left: 30px; }
  .hamburger { display: block; }
  .global-search input { width: 130px; }
  .global-search input:focus { width: 170px; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .cal-cell { min-height: 62px; font-size: 10px; }
  .user-chip .u-name, .user-chip .u-role { display: none; }
  .filter-bar { border-radius: var(--radius); }
}

/* ============================================================
   DARK MODE - scoped entirely under html[data-theme="dark"].
   Light mode is untouched. Artwork background over the navy base,
   liquid-glass banner with the white lockup, liquid-glass components.
   ============================================================ */

html[data-theme="dark"] {
  color-scheme: dark;
  background: #001b3d;
  /* --navy doubles as the heading/text ink across the app, so in dark it
     becomes ice-white; the handful of rules that used it as a BACKGROUND
     are re-pointed at the accent gradient further down. */
  --navy: #eaf1fb;
  --accent-soft: rgba(255,255,255,.12);
  --bg: #001b3d;
  --card: rgba(255,255,255,.07);
  --line: rgba(255,255,255,.12);
  --text: #e9eff8;
  --muted: #9db0c8;
  --glass: rgba(9,26,52,.9);
  --shadow: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.3);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
  --dk-acc1: #3f7fe8;
  --dk-acc2: #6ea8ff;
  --dk-glass: rgba(255,255,255,.07);
  --dk-glass-strong: rgba(9,26,52,.92);
  --dk-ring: 0 0 0 .5px rgba(255,255,255,.12);
}

/* ---------- Background image ----------
   ::before  the artwork itself, pinned to the viewport and covering it. The
             #001b3d base sits underneath so the page still looks right if the
             file is missing or slow to decode.
   ::after   a navy scrim. The artwork has near-white highlights, and the
             cards/banner are translucent glass - without this, white text
             over a bright patch loses its contrast. Raise or lower the .55
             alpha to taste; 0 shows the artwork at full strength. */
html[data-theme="dark"] body { background: transparent; }

html[data-theme="dark"] body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: #001b3d url('../assets/gradient-background-with-blue-purple-light-effect.jpg') center center / cover no-repeat;
}

html[data-theme="dark"] body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,20,45,.62) 0%, rgba(0,27,61,.5) 45%, rgba(0,20,45,.62) 100%);
}

/* ---------- Top banner: liquid glass, white lockup ----------
   Translucent so the animated Orb reads through it, with a bright inner
   hairline and a soft rim so the bar still separates from the page. */
html[data-theme="dark"] #topbar {
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(30px) saturate(1.7); -webkit-backdrop-filter: blur(30px) saturate(1.7);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 0 0 .5px rgba(255,255,255,.1), 0 12px 34px rgba(0,8,24,.5);
}
/* The banner shows the wordmark image on its own - the CSS-drawn
   "| REAL ESTATE" suffix has been removed. */
html[data-theme="dark"] #mainnav a.nav-link, html[data-theme="dark"] #mainnav span.nav-link { color: #d3dded; }
html[data-theme="dark"] #mainnav .nav-link:hover { color: #fff; background: rgba(255,255,255,.14); box-shadow: 0 0 0 .5px rgba(255,255,255,.2) inset, 0 4px 14px rgba(0,0,0,.2); }
html[data-theme="dark"] #mainnav .nav-item.active > .nav-link { color: #fff; background: rgba(255,255,255,.18); box-shadow: 0 0 0 .5px rgba(255,255,255,.28) inset, 0 0 18px rgba(255,255,255,.1); }
html[data-theme="dark"] .global-search input { background: rgba(255,255,255,.12); color: #fff; }
html[data-theme="dark"] .global-search input::placeholder { color: #a6b6cc; }
html[data-theme="dark"] .global-search input:focus { background: rgba(255,255,255,.2); color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.3); }
html[data-theme="dark"] .notif-bell { background: rgba(255,255,255,.12); color: #d3dded; }
html[data-theme="dark"] .notif-bell:hover { background: rgba(255,255,255,.22); color: #fff; }
html[data-theme="dark"] .notif-badge { box-shadow: 0 0 0 2px rgba(6,16,36,.7); }
html[data-theme="dark"] .theme-toggle { background: rgba(255,255,255,.12); color: #d3dded; }
html[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,.22); color: #fff; }
html[data-theme="dark"] .user-chip { background: rgba(255,255,255,.12); }
html[data-theme="dark"] .user-chip:hover { background: rgba(255,255,255,.2); }
html[data-theme="dark"] .user-chip .u-name { color: #fff; }
html[data-theme="dark"] .user-chip .u-role { color: #a6b6cc; }
html[data-theme="dark"] .sa-badge { box-shadow: 0 0 0 2px rgba(6,16,36,.6); }
html[data-theme="dark"] .hamburger { color: #fff; }
@media (max-width: 760px) {
  html[data-theme="dark"] #mainnav {
    background: rgba(9,26,52,.82);
    backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6);
  }
  html[data-theme="dark"] #mainnav .dropdown a { color: #d3dded; }
  html[data-theme="dark"] #mainnav .dropdown .dd-head { color: #a6b6cc; }
}

/* ---------- Liquid glass surfaces ---------- */
html[data-theme="dark"] :is(.card, .stat-card, .table-wrap, .kpi-card, .proj-card, .kb-card, .match-row, .notice, .week-grid, .cal-grid, .filter-bar, .pfilter, .checkgrid) {
  background: var(--dk-glass);
  backdrop-filter: blur(20px) saturate(1.35); -webkit-backdrop-filter: blur(20px) saturate(1.35);
  box-shadow: 0 1px 0 rgba(255,255,255,.09) inset, var(--dk-ring), 0 12px 32px rgba(0,0,0,.28);
}
html[data-theme="dark"] .stat-card:hover { box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, var(--dk-ring), 0 16px 40px rgba(0,0,0,.4); }
html[data-theme="dark"] .stat-card.gold { background: rgba(255,255,255,.1); }
html[data-theme="dark"] .notice.pinned { background: rgba(255,255,255,.11); }
html[data-theme="dark"] .kb-col { background: rgba(255,255,255,.05); }

/* Floating panels: frosted deep-navy glass so content behind stays muted */
html[data-theme="dark"] :is(.dropdown, .search-results, .notif-dd, .user-dd, .combo-list, .ms-list, .fmulti-list, .phone-input .pi-list, .thumb-zoom, .glass-dp, .chat-panel) {
  background: var(--dk-glass-strong);
  backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.09), var(--dk-ring);
  border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] .dropdown a { color: var(--text); }
html[data-theme="dark"] .modal-backdrop { background: rgba(0,8,20,.55); }
html[data-theme="dark"] .modal {
  background: rgba(10,28,55,.85);
  backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4);
  box-shadow: var(--shadow-lg), 0 0 0 .5px rgba(255,255,255,.14) inset;
}
html[data-theme="dark"] .modal-close { background: rgba(255,255,255,.1); }

/* Shared hover wash for list items and round controls */
html[data-theme="dark"] :is(.dropdown a, .search-results .sr-item, .notif-item, .user-dd .ud-item, .combo-list .co-item, .ms-list .ms-item, .fmulti-list label, .phone-input .pi-item, .phone-input .pi-cc, .checkgrid .cg-item, .metric-row, .glass-dp .dp-day, .glass-dp .dp-nav, .glass-dp .dp-btn, .ba-arrow, .modal-close):hover,
html[data-theme="dark"] .combo-list .co-item.hl { background: rgba(255,255,255,.12); }

/* ---------- Buttons ---------- */
html[data-theme="dark"] .btn {
  background: rgba(255,255,255,.09); color: var(--text);
  box-shadow: 0 0 0 .5px rgba(255,255,255,.18), 0 1px 3px rgba(0,0,0,.25);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
html[data-theme="dark"] .btn:hover { background: rgba(255,255,255,.15); box-shadow: 0 0 0 .5px rgba(255,255,255,.28), 0 4px 12px rgba(0,0,0,.3); }
html[data-theme="dark"] .btn.ghost { background: transparent; box-shadow: none; }
html[data-theme="dark"] .btn.ghost:hover { background: rgba(255,255,255,.1); }
html[data-theme="dark"] .btn.primary { background: linear-gradient(135deg, var(--dk-acc1), var(--dk-acc2)); color: #fff; box-shadow: 0 2px 12px rgba(63,127,232,.45); }
html[data-theme="dark"] .btn.primary:hover { background: linear-gradient(135deg, #4a89f0, #7db2ff); }
html[data-theme="dark"] .btn.danger { color: #ff8f8f; }
html[data-theme="dark"] .btn.danger:hover { background: rgba(255,107,107,.15); }

/* ---------- Inputs and pickers ---------- */
html[data-theme="dark"] :is(.field input, .field select, .field textarea, .filter-bar select, .filter-bar input, .pf-field select, .pf-field input, .phone-input .pi-cc, .phone-input .pi-search, .ms-box, .fmulti-btn, .glass-dp .dp-tsel, .chat-input-row input) {
  background: rgba(255,255,255,.09); color: var(--text);
}
html[data-theme="dark"] :is(.field input, .field select, .field textarea, .filter-bar select, .filter-bar input, .pf-field select, .pf-field input):focus {
  background: rgba(255,255,255,.16); color: #fff; box-shadow: 0 0 0 2.5px rgba(110,168,255,.4);
}
html[data-theme="dark"] :is(input, textarea)::placeholder { color: rgba(210,225,245,.45); }
html[data-theme="dark"] input { accent-color: var(--dk-acc2); }
html[data-theme="dark"] select option { background: #0d2547; color: var(--text); }
html[data-theme="dark"] .checkgrid { background: rgba(255,255,255,.05); }
html[data-theme="dark"] .checkgrid .cg-item:has(input:checked) { background: rgba(143,184,255,.16); color: #d7e6ff; }
html[data-theme="dark"] .pf-field .fmulti-btn, html[data-theme="dark"] .pf-field .fmulti-btn.on { background: rgba(255,255,255,.09); color: var(--text); }
html[data-theme="dark"] .pf-field .fmulti-btn:hover { background: rgba(255,255,255,.15); }
html[data-theme="dark"] .pf-field .fmulti-btn:focus { box-shadow: 0 0 0 2px rgba(110,168,255,.4); }
html[data-theme="dark"] .chiprow .cr-chip, html[data-theme="dark"] .tl-chip { background: rgba(255,255,255,.09); color: var(--muted); }
html[data-theme="dark"] .chiprow .cr-chip:hover, html[data-theme="dark"] .tl-chip:hover { background: rgba(255,255,255,.15); }

/* ---------- Accent re-points: rules that used --navy as a background ---------- */
html[data-theme="dark"] :is(.sr-badge, .tl-chip.on, .chiprow .cr-chip.on, .fmulti-btn.on, .ms-chip, .tsched-cell.today, .cal-cell.today .cd, .chat-toggle, .chat-header, .chat-msg.user, .chat-input-row button, .glass-dp .dp-day.sel, .glass-dp .dp-btn.dp-done) {
  background: linear-gradient(135deg, var(--dk-acc1), var(--dk-acc2)); color: #fff;
}
html[data-theme="dark"] .glass-dp .dp-btn.dp-done:hover, html[data-theme="dark"] .glass-dp .dp-day.sel:hover { background: linear-gradient(135deg, #4a89f0, #7db2ff); }
html[data-theme="dark"] .tsched-cell:hover { background: rgba(255,255,255,.13); }
html[data-theme="dark"] .tsched-cell { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .tsched-cell.empty { background: transparent; }
html[data-theme="dark"] .tsched-cell.today { background: linear-gradient(135deg, var(--dk-acc1), var(--dk-acc2)); }
html[data-theme="dark"] .iconbtn:hover { background: var(--dk-acc1); color: #fff; }
html[data-theme="dark"] .crm-pin-body, html[data-theme="dark"] .crm-pin-tail { background: #001b3d; }
html[data-theme="dark"] .avatar { color: #0a1628; }
html[data-theme="dark"] .handover-badge { color: #0a1628; }
html[data-theme="dark"] a { color: #8ab6ff; }
html[data-theme="dark"] #loginOverlay .btn-access { color: #0a1628; }
html[data-theme="dark"] .locmap .leaflet-control-zoom a { color: #0a1628 !important; }

/* ---------- Tabs ---------- */
html[data-theme="dark"] .tabs { background: rgba(255,255,255,.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
html[data-theme="dark"] .tabs .tab:hover { color: #fff; }
html[data-theme="dark"] .tabs .tab.active { color: #fff; background: rgba(255,255,255,.16); box-shadow: 0 1px 4px rgba(0,0,0,.35), inset 0 0 0 .5px rgba(255,255,255,.25); }
html[data-theme="dark"] .tab-count { background: rgba(255,255,255,.14); color: #dbe7f5; }

/* ---------- Tables / calendar / kanban ---------- */
html[data-theme="dark"] table.data tbody tr:nth-child(even) td { background: rgba(255,255,255,.03); }
html[data-theme="dark"] table.data tr:hover td { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .cal-cell { background: transparent; }
html[data-theme="dark"] .cal-cell.other { background: rgba(0,0,0,.16); }
html[data-theme="dark"] .cal-event.workloc { background: rgba(255,255,255,.14); color: #dce7f5; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
html[data-theme="dark"] .wk-event.workloc { color: #dce7f5; }

/* ---------- Pills / badges ---------- */
html[data-theme="dark"] .pill.navy { background: rgba(143,184,255,.18); color: #b9d2ff; }
html[data-theme="dark"] .pill.green { background: rgba(52,199,123,.18); color: #8ce7b4; }
html[data-theme="dark"] .pill.orange { background: rgba(255,178,66,.18); color: #ffd29a; }
html[data-theme="dark"] .pill.red { background: rgba(255,107,107,.18); color: #ffabab; }
html[data-theme="dark"] .pill.gold { background: rgba(255,255,255,.13); color: #dde3ed; }
html[data-theme="dark"] .pill.grey { background: rgba(255,255,255,.1); color: #b9c4d4; }
html[data-theme="dark"] .perf-badge.ok { background: rgba(52,199,123,.16); color: #6fdba2; }
html[data-theme="dark"] .perf-badge.miss { background: rgba(255,107,107,.16); color: #ff9d9d; }
html[data-theme="dark"] .perf-badge.prog { background: rgba(59,167,220,.17); color: #7cc8ff; }
html[data-theme="dark"] .perf-track-label { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.55); }

/* ---------- Charts, tracks and misc fills ---------- */
html[data-theme="dark"] :is(.bar-row .bar-track, .lb-track, .perf-track, .ba-htrack, .sbar-col, .incent-ico, .coords-box, .icon-btn, .iconbtn, .ba-arrow, .glass-dp .dp-nav, .glass-dp .dp-btn) { background: rgba(255,255,255,.09); }
html[data-theme="dark"] :is(.lb-bar, .bar-fill, .funnel-step) { background: linear-gradient(90deg, var(--dk-acc1), var(--dk-acc2)); }
html[data-theme="dark"] .ba-bar.comm { background: linear-gradient(180deg, var(--dk-acc2), var(--dk-acc1)); }
html[data-theme="dark"] .bar-fill.gold { background: linear-gradient(90deg, #c8d4e8, #e8eef8); color: #0a1628; }
html[data-theme="dark"] .ba-bar.vendor, html[data-theme="dark"] .ba-swatch.vendor, html[data-theme="dark"] .ba-hfill.vendor { background: #6592c9; }
html[data-theme="dark"] .kpi-accent { background: var(--dk-acc2); }
html[data-theme="dark"] .ba-dot { background: rgba(255,255,255,.25); }
html[data-theme="dark"] .tgt-donut::before, html[data-theme="dark"] .donut-lg::before { background: #0e2650; }
html[data-theme="dark"] .tl-item::before { border-color: #0e2650; }

/* ---------- Dashboard widgets / op cards ---------- */
html[data-theme="dark"] .dwidget.dw-white { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18); color: var(--text); }
html[data-theme="dark"] .dwidget.dw-white .dw-title, html[data-theme="dark"] .dwidget.dw-white .dw-hero { color: #53d6d6; }
/* Communications card graph toggle - the light-mode teal disappears on the
   dark card, so the icon goes white */
html[data-theme="dark"] .dwidget.dw-white .dw-graph-btn { background: rgba(255,255,255,.14); color: #fff; }
html[data-theme="dark"] .dwidget.dw-white .dw-graph-btn:hover { background: rgba(255,255,255,.26); color: #fff; }
html[data-theme="dark"] .dwidget.dw-white .dw-row, html[data-theme="dark"] .dwidget.dw-white .dw-foot { border-top-color: rgba(255,255,255,.14); }
html[data-theme="dark"] .dwidget.dw-white .dw-foot { color: var(--muted); }
html[data-theme="dark"] .dwidget.dw-white .dw-dot.down { background: #35d0d0; box-shadow: 0 0 0 2.5px rgba(53,208,208,.2); }
html[data-theme="dark"] .opcard { color: #e9eff8; box-shadow: none; }
html[data-theme="dark"] .opcard:hover { box-shadow: 0 8px 22px rgba(0,0,0,.35); }
html[data-theme="dark"] .opcard .op-label { color: var(--muted); }
html[data-theme="dark"] .opcard.op-blue { background: rgba(143,184,255,.14); border: 1px solid rgba(143,184,255,.35); }
html[data-theme="dark"] .opcard.op-blue .op-val { color: #b9d2ff; }
html[data-theme="dark"] .opcard.op-yellow, html[data-theme="dark"] .opcard.op-orange { background: rgba(255,178,66,.13); border: 1px solid rgba(255,178,66,.35); }
html[data-theme="dark"] .opcard.op-yellow .op-val, html[data-theme="dark"] .opcard.op-orange .op-val { color: #ffd29a; }
html[data-theme="dark"] .opcard.op-green, html[data-theme="dark"] .opcard.op-teal { background: rgba(52,199,123,.13); border: 1px solid rgba(52,199,123,.35); }
html[data-theme="dark"] .opcard.op-green .op-val, html[data-theme="dark"] .opcard.op-teal .op-val { color: #8ce7b4; }
html[data-theme="dark"] .opcard.op-pink, html[data-theme="dark"] .opcard.op-red { background: rgba(255,107,107,.13); border: 1px solid rgba(255,107,107,.35); }
html[data-theme="dark"] .opcard.op-pink .op-val, html[data-theme="dark"] .opcard.op-red .op-val { color: #ffabab; }

/* New components: rounded dropdown, HR accordion, flip-card graph */
html[data-theme="dark"] .dd-btn { background: rgba(255,255,255,.09); color: var(--text); }
html[data-theme="dark"] .dd-btn:hover { background: rgba(255,255,255,.15); }
html[data-theme="dark"] .dd-panel {
  background: var(--dk-glass-strong);
  backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.09), var(--dk-ring);
}
html[data-theme="dark"] .dd-opt:hover { background: rgba(255,255,255,.12); }
html[data-theme="dark"] .hrb-head:hover { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .dwg-target { background: #ffd166; }
html[data-theme="dark"] .ptoggle { background: rgba(255,255,255,.07); box-shadow: 0 0 0 .5px rgba(255,255,255,.18); }
html[data-theme="dark"] .ptoggle button + button { border-left-color: rgba(255,255,255,.18); }
html[data-theme="dark"] .ptoggle .pt-acc { color: #6fdba2; }
html[data-theme="dark"] .ptoggle .pt-rej { color: #ff9d9d; }
html[data-theme="dark"] .ptoggle .pt-up, html[data-theme="dark"] .ptoggle .pt-down { color: #9db9ff; }
html[data-theme="dark"] .ptoggle .pt-up:hover, html[data-theme="dark"] .ptoggle .pt-down:hover { background: var(--dk-acc1); }
html[data-theme="dark"] .action-pill { background: rgba(255,255,255,.12); box-shadow: 0 0 0 .5px rgba(255,255,255,.18), 0 4px 14px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.18); }
html[data-theme="dark"] .ap-btn { color: var(--text); }
html[data-theme="dark"] .ap-btn:hover { background: rgba(255,255,255,.16); }
html[data-theme="dark"] .ap-btn + .ap-btn { border-left-color: rgba(255,255,255,.28); }
html[data-theme="dark"] .tip { border-bottom-color: rgba(255,255,255,.3); }
html[data-theme="dark"] .tip::after { background: rgba(233,239,248,.96); color: #0a1628; }
/* Chart figures and gridlines: the light-mode navy ink is unreadable on dark */
html[data-theme="dark"] .svg-val { fill: #fff; }
html[data-theme="dark"] .svg-grid, html[data-theme="dark"] .svg-track { stroke: rgba(255,255,255,.14); }

/* ---------- Chat widget ---------- */
html[data-theme="dark"] .chat-msg.bot { background: rgba(255,255,255,.1); }
html[data-theme="dark"] .chat-input-row { background: rgba(255,255,255,.05); }

/* ============================================================
   Analytics - Broker Comparison (cards + radar). Deliberately dark
   (deep navy #0B1437) in BOTH themes, matching the reference design.
   ============================================================ */
.bc-panel { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; background: #0B1437; border-radius: 20px; padding: 18px; margin-bottom: 16px; color: #e8eef7; box-shadow: 0 18px 44px rgba(4,10,35,.45), inset 0 1px 0 rgba(255,255,255,.06); color-scheme: dark; scroll-margin-top: 74px; }
.bc-head { flex-basis: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bc-head h3 { margin: 0; font-size: 13px; color: #cfe0f5; text-transform: uppercase; letter-spacing: .8px; font-weight: 700; }
.bc-sub { font-size: 11px; color: #7c8db0; }
.bc-close { border: none; background: rgba(255,255,255,.09); color: #cfe0f5; padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--sans); transition: background .15s; }
.bc-close:hover { background: rgba(255,255,255,.16); }
.bc-card { flex: 1 1 258px; min-width: 246px; display: flex; flex-direction: column; gap: 10px; background: #121e4e; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 14px; }
.bc-select { align-self: flex-start; max-width: 100%; border: none; outline: none; background: rgba(255,255,255,.08); color: #cfe0f5; font-family: var(--sans); font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.bc-select option { background: #121e4e; color: #e8eef7; }
.bc-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bc-name { font-size: 14.5px; font-weight: 700; color: #fff; }
.bc-role { font-size: 11px; color: #8fa2c4; }
.bc-sabadge { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; background: rgba(97,87,255,.26); color: #c9c4ff; font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.bc-total { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); }
.bc-total-val { font-size: 28px; font-weight: 800; letter-spacing: -.6px; color: #fff; line-height: 1.05; }
.bc-total-lbl { font-size: 10px; color: #8fa2c4; text-transform: uppercase; letter-spacing: .6px; margin-top: 2px; }
.bc-rows { display: flex; flex-direction: column; gap: 6px; }
.bc-row { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 10px; background: rgba(255,255,255,.04); font-size: 12.5px; color: #dbe4f2; cursor: pointer; transition: background .15s; }
.bc-row:hover { background: rgba(255,255,255,.1); }
.bc-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--bc-color, #4c8dff) 16%, transparent); color: var(--bc-color, #9db9ff); flex-shrink: 0; }
.bc-row-val { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.bc-row-val b { font-size: 13px; color: #fff; }
.bc-comm { border-radius: 12px; padding: 11px 12px; background: rgba(47,210,125,.08); border: 1px solid rgba(47,210,125,.22); }
.bc-comm-head { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #8fe6b6; }
.bc-comm-head .bc-ico { background: rgba(47,210,125,.16); color: #7ff0b2; }
.bc-comm-head .bc-tag { margin-left: auto; }
.bc-comm-val { font-size: 21px; font-weight: 800; color: #7ff0b2; margin-top: 6px; letter-spacing: -.4px; }
.bc-comm-split { font-size: 11px; color: #8fa2c4; margin-top: 2px; }
.bc-resp { cursor: default; }
.bc-tag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 750; letter-spacing: .3px; white-space: nowrap; }
.bc-new { background: rgba(76,141,255,.24); color: #8ab6ff; }
.bc-up { background: rgba(47,210,125,.2); color: #5fe3a1; }
.bc-down { background: rgba(255,107,107,.2); color: #ff9d9d; }
.bc-flat { background: rgba(255,255,255,.1); color: #93a3c0; }
/* Radar chart */
.bc-chart { flex: 1.25 1 340px; min-width: 300px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 2px 0; }
.bc-legend { display: flex; gap: 18px; justify-content: center; font-size: 12px; font-weight: 650; color: #dbe4f2; flex-wrap: wrap; }
.bc-legend .bc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.bc-radar { width: 100%; max-width: 430px; height: auto; }
.bc-ring { fill: none; stroke: rgba(255,255,255,.08); }
.bc-spoke { stroke: rgba(255,255,255,.12); stroke-width: 1; }
.bc-axis { fill: #93a3c0; font-size: 10.5px; font-family: var(--sans); font-weight: 600; cursor: pointer; }
.bc-axis:hover { fill: #dbe4f2; }
.bc-poly { stroke-width: 2; stroke-linejoin: round; }
.bc-spoke-focus { stroke: #8ab6ff; stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(138,182,255,.95)); animation: bcGlow 1.8s ease-in-out infinite; }
.bc-axis-focus { fill: #fff; font-weight: 800; font-size: 11.5px; filter: drop-shadow(0 0 8px rgba(138,182,255,.9)); }
.bc-pulse { animation: bcPulse 1.5s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes bcPulse { 0% { opacity: .9; transform: scale(.55); } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes bcGlow { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.bc-focus-cap { font-size: 12.5px; font-weight: 650; color: #dbe4f2; text-align: center; min-height: 18px; }
.bc-focus-cap.bc-hint { color: #7c8db0; font-weight: 500; font-size: 11.5px; }
@media (max-width: 1100px) { .bc-chart { flex-basis: 100%; order: 3; } }
/* In dark mode the panel goes glassy so the animated background shows through */
html[data-theme="dark"] .bc-panel { background: rgba(11,20,55,.7); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); box-shadow: 0 18px 44px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 .5px rgba(255,255,255,.1); }
html[data-theme="dark"] .bc-card { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .bc-select option { background: #0d2547; }

/* ============================================================
   Motion system - collapsibles, scroll-entrances, reduced motion
   ============================================================ */

/* Animated collapsible: grid-rows 0fr -> 1fr gives a smooth height tween
   without measuring content. Markup: .clps > .clps-inner > content */
.clps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.4,.08,.2,1); }
.clps.open { grid-template-rows: 1fr; }
.clps-inner { overflow: hidden; min-height: 0; }

/* Dashboard flip-card graphs start empty and fill when the card is flipped
   (JS sets the width with a staggered eased transition) */
.dwg-fill { width: 0; }

/* Broker Comparison - entrance when it lazy-mounts on scroll */
.bc-enter { animation: bcEnter .65s cubic-bezier(.22,.8,.35,1) both; }
@keyframes bcEnter { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.bc-enter .bc-poly { transform-origin: 200px 186px; animation: bcPolyIn .9s cubic-bezier(.22,.8,.35,1) .25s both; }
@keyframes bcPolyIn { from { opacity: 0; transform: scale(.45); } to { opacity: 1; transform: scale(1); } }

/* Skeleton shown in the comparison slot before it loads on scroll */
.bc-skel { min-height: 210px; flex-direction: column; align-items: stretch; justify-content: center; gap: 14px; }
.bc-skel-bar { width: 38%; height: 14px; border-radius: 999px; }
.bc-skel-grid { display: flex; gap: 14px; }
.bc-skel-card { flex: 1; height: 122px; border-radius: 14px; }
.bc-skel-radar { flex: 1.2; height: 122px; border-radius: 14px; }
.bc-skel-bar, .bc-skel-card, .bc-skel-radar { background: linear-gradient(100deg, rgba(255,255,255,.05) 40%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 60%); background-size: 200% 100%; animation: bcShimmer 1.6s linear infinite; }
@keyframes bcShimmer { to { background-position: -200% 0; } }
.bc-skel-note { font-size: 11px; color: #7c8db0; text-align: center; }

/* Analytics broker accordion - summary header + collapsible metric rows */
.ana-acc-head { cursor: pointer; border-radius: 12px; transition: background .15s; user-select: none; }
.ana-acc-head:hover { background: rgba(10,22,40,.04); }
html[data-theme="dark"] .ana-acc-head:hover { background: rgba(255,255,255,.06); }
.ana-acc-sum { display: flex; gap: 16px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.ana-sum-item { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.ana-sum-item small { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.ana-sum-item b { font-size: 13px; }
@media (max-width: 760px) { .ana-acc-sum { display: none; } }

/* Accessibility: collapse every animation/transition to a single frame */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto !important; }
}

/* ---------- Printing from dark mode stays readable ---------- */
@media print {
  html[data-theme="dark"] { --text: #1c1c26; --muted: #6e6e78; --navy: #0a1628; --line: #e5e5ea; --card: #ffffff; }
  html[data-theme="dark"] body::before, html[data-theme="dark"] body::after { display: none; }
}

/* ---------- Right-hand drawer (Add user, and future side panels) ----------
   Uses the same tokens as modals, so it inherits dark mode for free. */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(10,22,40,.34); backdrop-filter: blur(3px); z-index: 1200; opacity: 0; transition: opacity .22s ease; }
.drawer-backdrop.open { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: var(--card); box-shadow: var(--shadow-lg); z-index: 1201; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .26s cubic-bezier(.32,.72,0,1); }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 14px; border-bottom: .5px solid var(--line); }
.drawer-head h2 { font-size: 17px; font-weight: 700; color: var(--navy); letter-spacing: -.2px; }
.drawer-close { background: none; border: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.drawer-close:hover { color: var(--text); }
.drawer-body { padding: 18px 22px; overflow-y: auto; flex: 1; }
.drawer-foot { padding: 14px 22px 20px; border-top: .5px solid var(--line); display: flex; gap: 10px; }
.drawer-foot .btn { flex: 1; justify-content: center; }
.drawer-note { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 16px; }
.drawer-msg { font-size: 12.5px; border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 14px; display: none; line-height: 1.45; }
.drawer-msg.err { display: block; background: rgba(214,69,69,.1); color: var(--red); }
.drawer-msg.ok { display: block; background: rgba(52,167,101,.12); color: var(--green); }
html[data-theme="dark"] .drawer { background: var(--card); }
html[data-theme="dark"] .drawer-backdrop { background: rgba(0,0,0,.5); }

/* ---------- Bulk owner CSV import ---------- */
/* An auto left margin absorbs the header's free space, so the action sits
   beside the close button instead of being centred by space-between. */
.modal-head .head-action { margin-left: auto; margin-right: 10px; }
.csv-drop { border: 2px dashed rgba(10,22,40,.18); border-radius: var(--radius-sm); padding: 34px 20px; text-align: center; color: var(--muted); transition: border-color .15s, background .15s; margin-bottom: 14px; }
.csv-drop.over { border-color: var(--navy); background: rgba(10,22,40,.04); }
.csv-drop-icon { font-size: 26px; margin-bottom: 6px; }
.csv-drop-sub { font-size: 11.5px; margin: 6px 0; }
.csv-summary p { font-size: 13px; margin-bottom: 8px; }
.csv-note { font-size: 11.5px; color: var(--muted); }
.csv-dupe { display: block; font-size: 12.5px; margin: 8px 0; cursor: pointer; }
.csv-sample { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12px; }
.csv-sample th { text-align: left; color: var(--muted); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid rgba(10,22,40,.1); }
.csv-sample td { padding: 4px 8px; border-bottom: 1px solid rgba(10,22,40,.05); }
html[data-theme="dark"] .csv-drop { border-color: rgba(255,255,255,.2); }
html[data-theme="dark"] .csv-drop.over { border-color: var(--text); background: rgba(255,255,255,.05); }