/* Northline Commercial — broker portal styles */
:root {
    --navy: #173F35;
    --navy-900: #0D2822;
    --accent: #C45F36;
    --accent-600: #9E4527;
    --steel: #6E9185;
    --sand: #A8C3B8;
    --ink: #202824;
    --muted: #66716d;
    --line: #dce3de;
    --bg: #f3f4f0;
    --white: #fff;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow-sm: 0 4px 14px rgba(20,54,46,.06);
    --shadow: 0 14px 38px rgba(20,54,46,.12);
    --font: 'Manrope', system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0 0 .3em; letter-spacing: 0; }
.muted { color: var(--muted); }
.ic { vertical-align: middle; }
.link { color: var(--accent); font-weight: 600; font-size: .9rem; }
.link:hover { text-decoration: underline; }

.img-fallback { background: linear-gradient(135deg, var(--navy), var(--accent-600)); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: .5rem; font-family: inherit; font-weight: 600; font-size: .9rem; padding: .65rem 1.1rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: .16s; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 18px rgba(196,95,54,.3); }
.btn-primary:hover { background: var(--accent-600); }
.btn-light { background: #fff; border-color: var(--line); }
.btn-light:hover { border-color: var(--navy); }
.btn-block { width: 100%; justify-content: center; }
.btn-lg { padding: .85rem 1.4rem; font-size: 1rem; }
.btn-sm { padding: .45rem .8rem; font-size: .82rem; }

.alert { padding: .75rem 1rem; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; margin-bottom: 1.2rem; }
.alert.ok { background: #e7f7ee; color: #138a52; }
.alert.err { background: #fdecec; color: #c0392b; }
.alert.warn { background: #fff4e0; color: #b9770a; }

/* ---------- login ---------- */
.login-body { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; background: var(--navy-900); padding: 2rem 1rem; overflow-x: hidden; overflow-y: auto; }
.login-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--navy-900); }
.login-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: 0; pointer-events: none; }
.login-bg::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(120deg, rgba(13,40,34,.94) 0%, rgba(13,40,34,.62) 62%, rgba(196,95,54,.22) 100%);
}
.login-card { position: relative; z-index: 10; background: #fff; border-radius: 12px; padding: 2.4rem; width: min(420px, 92vw); box-shadow: var(--shadow); }
.login-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.5rem; color: var(--navy); }
.login-brand img { display: block; width: auto; max-width: 230px; }
.login-brand svg { background: var(--navy); color: #fff; padding: 8px; border-radius: 10px; box-sizing: content-box; }
.login-brand strong { display: block; letter-spacing: .04em; }
.login-brand small { font-size: .6rem; letter-spacing: .2em; color: var(--muted); }
.login-card h1 { font-size: 1.6rem; }
.login-card form { margin-top: 1.2rem; }
.login-card label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--muted); margin: .8rem 0 .35rem; }
.login-card input { width: 100%; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: inherit; font-size: .95rem; outline: none; background: #fbfcfd; }
.login-card input:focus { border-color: var(--navy); background: #fff; }
.login-card .btn { margin-top: 1.3rem; }
.login-hint { margin-top: 1.4rem; padding: .9rem 1rem; background: var(--bg); border-radius: var(--radius-sm); font-size: .82rem; display: flex; flex-direction: column; gap: .2rem; }
.login-hint strong { color: var(--ink); }
.login-hint code { background: #fff; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); }
.login-back { display: inline-block; margin-top: 1.1rem; color: var(--muted); font-size: .85rem; }
.login-back:hover { color: var(--accent); }

/* ---------- shell ---------- */
.admin-body { display: flex; min-height: 100vh; }
.admin-sidebar { width: 248px; background: var(--navy-900); color: rgba(255,255,255,.75); padding: 1.4rem 1rem; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; flex: none; transition: width .28s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1); }
.admin-brand { display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem .7rem; color: #fff; white-space: nowrap; overflow: hidden; }
.admin-brand svg { background: rgba(255,255,255,.12); padding: 7px; border-radius: 9px; box-sizing: content-box; }
.admin-brand .logo-badge { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #fff; flex: none; padding: 6px; }
.admin-brand .logo-badge img { width: 100%; height: 100%; object-fit: contain; }
.admin-brand-text { display: flex; flex-direction: column; min-width: 0; transition: opacity .18s ease; }
.admin-brand strong { display: block; font-size: .92rem; letter-spacing: .04em; }
.admin-brand small { font-size: .56rem; letter-spacing: .18em; color: rgba(255,255,255,.5); }
.sidebar-collapse { display: none; align-self: flex-end; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); cursor: pointer; margin: 0 0 .8rem; transition: background .15s ease; }
.sidebar-collapse:hover { background: rgba(255,255,255,.16); color: #fff; }
.sidebar-collapse svg { transition: transform .28s ease; }
.admin-nav { display: flex; flex-direction: column; gap: .2rem; }
.admin-nav a { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .92rem; color: rgba(255,255,255,.7); white-space: nowrap; position: relative; }
.admin-nav a .nav-label { transition: opacity .18s ease; min-width: 0; overflow: hidden; }
.admin-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-nav a.on { background: var(--accent); color: #fff; box-shadow: 0 8px 18px rgba(196,95,54,.3); }
.admin-nav a svg { flex: none; }
.admin-nav-foot { margin-top: auto; display: flex; flex-direction: column; gap: .2rem; border-top: 1px solid rgba(255,255,255,.1); padding-top: .8rem; }
.admin-nav-foot a { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-radius: var(--radius-sm); font-size: .88rem; color: rgba(255,255,255,.6); white-space: nowrap; }
.admin-nav-foot a svg { flex: none; }
.admin-nav-foot a:hover { color: #fff; background: rgba(255,255,255,.06); }
/* PWA install CTA in the sidebar foot — themed accent button, not a raw <button>. */
.pwa-install { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .6rem .8rem; margin-bottom: .35rem; font-family: inherit; font-size: .88rem; font-weight: 600; color: #fff; text-align: left; cursor: pointer; background: linear-gradient(135deg, var(--accent), #984326); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-sm); box-shadow: 0 8px 18px rgba(196,95,54,.3); transition: filter .15s ease, transform .1s ease; }
.pwa-install:hover { filter: brightness(1.08); color: #fff; }
.pwa-install:active { transform: translateY(1px); }
.pwa-install svg { flex: none; }
.admin-body.nav-collapsed .pwa-install { justify-content: center; padding-left: .6rem; padding-right: .6rem; }
.admin-body.nav-collapsed .pwa-install .nav-label { opacity: 0; width: 0; pointer-events: none; }

/* Desktop collapsed (icon-rail) state */
.admin-body.nav-collapsed .admin-sidebar { width: 74px; padding-left: .7rem; padding-right: .7rem; }
.admin-body.nav-collapsed .admin-brand-text,
.admin-body.nav-collapsed .admin-nav a .nav-label,
.admin-body.nav-collapsed .admin-nav-foot a .nav-label { opacity: 0; width: 0; pointer-events: none; }
.admin-body.nav-collapsed .admin-brand { justify-content: center; padding-left: 0; padding-right: 0; }
.admin-body.nav-collapsed .admin-nav a,
.admin-body.nav-collapsed .admin-nav-foot a { justify-content: center; padding-left: .6rem; padding-right: .6rem; }
.admin-body.nav-collapsed .sidebar-collapse { align-self: center; margin-bottom: 1rem; }
.admin-body.nav-collapsed .sidebar-collapse svg { transform: rotate(180deg); }
.admin-body.nav-collapsed .nav-badge { position: absolute; top: 4px; right: 6px; }
/* Tooltip on hover when collapsed */
.admin-body.nav-collapsed .admin-nav a::after,
.admin-body.nav-collapsed .admin-nav-foot a::after { content: attr(data-label); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--navy-900); color: #fff; padding: .35rem .6rem; border-radius: 6px; font-size: .78rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 60; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.admin-body.nav-collapsed .admin-nav a:hover::after,
.admin-body.nav-collapsed .admin-nav-foot a:hover::after { opacity: 1; }
@media (min-width: 721px) { .sidebar-collapse { display: flex; } }

/* Mobile off-canvas drawer + burger + backdrop */
.sidebar-backdrop { position: fixed; inset: 0; background: rgba(11,22,40,.55); z-index: 70; opacity: 0; transition: opacity .25s ease; }
.sidebar-backdrop.show { opacity: 1; }
.sidebar-burger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; flex: none; }
.sidebar-burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem 2rem; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.admin-top-title { min-width: 0; }
.admin-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; font-weight: 700; color: var(--muted); margin: 0; }
.admin-top h1 { font-size: 1.5rem; margin: 0; }
.admin-user { display: flex; align-items: center; gap: .8rem; }
.admin-user-meta { text-align: right; }
.admin-user-meta strong { display: block; font-size: .92rem; }
.admin-user-meta small { color: var(--muted); font-size: .8rem; }
.admin-user img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.admin-content { padding: 1.8rem 2rem; }

/* profile banner */
.profile-banner { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.6rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.4rem; box-shadow: var(--shadow-sm); }
.profile-banner strong { font-size: 1.15rem; }
.profile-contact { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: .5rem; font-size: .88rem; color: var(--ink); }
.profile-contact span { display: inline-flex; align-items: center; gap: .35rem; }
.profile-actions { display: flex; gap: .6rem; }

/* stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-bottom: 1.4rem; }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; box-shadow: var(--shadow-sm); position: relative; }
.stat-ic { position: absolute; top: 1.2rem; right: 1.2rem; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; }
.stat-ic.blue { background: #e8f0fe; color: #2563eb; }
.stat-ic.green { background: #e6f7ee; color: #16a34a; }
.stat-ic.violet { background: #efe9fe; color: #7c3aed; }
.stat-ic.amber { background: #fef3e2; color: #d97706; }
.stat-card small { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.stat-card strong { display: block; font-size: 1.9rem; margin-top: .3rem; letter-spacing: -.02em; }

/* panels */
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.6rem; box-shadow: var(--shadow-sm); margin-bottom: 1.4rem; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; }
.panel-head h3 { font-size: 1.08rem; display: flex; align-items: center; gap: .5rem; }
.panel-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.4rem; }

/* bar chart */
.bar-chart { display: flex; flex-direction: column; gap: .9rem; }
.bar-row { display: grid; grid-template-columns: 90px 1fr 32px; align-items: center; gap: .8rem; }
.bar-label { font-size: .88rem; font-weight: 600; }
.bar-track { background: var(--bg); border-radius: 999px; height: 12px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--navy), var(--accent)); transition: width .6s ease; }
.bar-val { text-align: right; font-weight: 700; font-size: .9rem; }

/* donut */
.donut-wrap { display: flex; align-items: center; gap: 1.5rem; }
.donut { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.donut-hole { width: 96px; height: 96px; background: #fff; border-radius: 50%; display: grid; place-items: center; text-align: center; }
.donut-hole strong { font-size: 1.6rem; }
.donut-hole small { color: var(--muted); font-size: .75rem; }
.legend { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; font-size: .85rem; }
.legend li { display: flex; align-items: center; gap: .5rem; }
.legend b { margin-left: auto; }
.dot { width: 10px; height: 10px; border-radius: 50%; }

/* tables */
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.data-table td { padding: .8rem .7rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
/* Sortable column headers (wired up by admin.js) */
.th-sortable { cursor: pointer; user-select: none; position: relative; white-space: nowrap; padding-right: 1.4rem !important; }
.th-sortable:hover { color: var(--navy); }
.th-sortable::after { content: '↕'; position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); font-size: .78rem; opacity: .35; }
.th-sortable[aria-sort="ascending"]::after { content: '↑'; opacity: 1; color: var(--accent); }
.th-sortable[aria-sort="descending"]::after { content: '↓'; opacity: 1; color: var(--accent); }
.th-sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Horizontal scroll wrapper for wide tables on small screens (added by admin.js) */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.cell-title { display: flex; align-items: center; gap: .7rem; }
.cell-thumb { width: 52px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; }
.cell-title strong { display: block; font-size: .92rem; }
.pill { background: var(--bg); border-radius: 6px; padding: .2rem .55rem; font-size: .8rem; font-weight: 600; }
.status-pill { border-radius: 999px; padding: .25rem .7rem; font-size: .78rem; font-weight: 700; }
.status-pill.s-available { background: #e6f7ee; color: #16a34a; }
.status-pill.s-under_offer { background: #fef3e2; color: #d97706; }
.status-pill.s-let, .status-pill.s-sold { background: #eef1f6; color: #64748b; }
/* Inline status chips reused from the public theme (.u-status) */
.u-status { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700; background: #eef1f6; color: #64748b; }
.u-status.s-available { background: #e6f7ee; color: #16a34a; }
.u-status.s-under_offer { background: #fef3e2; color: #d97706; }
.u-status.s-let, .u-status.s-sold, .u-status.s-inactive { background: #eef1f6; color: #64748b; }
.blog-deny-note { color: #c0392b; display: inline-flex; align-items: center; gap: .25rem; }
.row-actions { display: flex; gap: .4rem; align-items: center; }
.row-actions form { margin: 0; }
.ico-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.ico-btn:hover { border-color: var(--navy); color: var(--navy); }
.ico-btn.danger:hover { border-color: #e11d48; color: #e11d48; }

.toolbar { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.search-inline { display: flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1rem; flex: 1; max-width: 380px; color: var(--muted); }
.search-inline input { border: 0; outline: none; font-family: inherit; font-size: .92rem; width: 100%; background: transparent; }

/* property form */
.form-head { margin-bottom: 1rem; }
.form-cols { display: grid; grid-template-columns: 1fr 340px; gap: 1.4rem; align-items: start; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fg { display: flex; flex-direction: column; gap: .35rem; }
.fg.span2 { grid-column: 1 / -1; }
.fg label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--muted); }
.fg input, .fg select, .fg textarea { padding: .65rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: inherit; font-size: .92rem; outline: none; background: #fbfcfd; resize: vertical; }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--navy); background: #fff; }
.img-preview { aspect-ratio: 16/10; border-radius: var(--radius-sm); overflow: hidden; margin: .6rem 0 1rem; background: var(--bg); }
.img-preview img { width: 100%; height: 100%; object-fit: cover; }
.check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; margin-top: .6rem; cursor: pointer; }
.form-col-side .btn { margin-top: .4rem; }

/* leads */
.leads-layout { display: grid; grid-template-columns: 330px 1fr; gap: 1.4rem; align-items: start; }
.leads-list { padding: 1.1rem; }
.lead-rows { display: flex; flex-direction: column; gap: .4rem; max-height: 70vh; overflow-y: auto; padding-right: .35rem; margin-right: -.35rem; }
.lead-rows::-webkit-scrollbar { width: 8px; }
.lead-rows::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.lead-rows::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.lead-row { padding: .85rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--line); display: flex; flex-direction: column; gap: .25rem; transition: .15s; }
.lead-row:hover { border-color: var(--navy); }
.lead-row.on { border-color: var(--accent); background: #eef4f8; }
.lead-row-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.lead-areas { color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-match { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; }
.lead-match-track { flex: 1; height: 6px; border-radius: 999px; background: #eaeef2; overflow: hidden; }
.lead-match-fill { display: block; height: 100%; border-radius: 999px; transition: width .3s; }
.lead-match-fill.m-high { background: linear-gradient(90deg, #16a34a, #22c55e); }
.lead-match-fill.m-mid  { background: linear-gradient(90deg, #d97706, #f59e0b); }
.lead-match-fill.m-low  { background: linear-gradient(90deg, #dc2626, #ef4444); }
.lead-match-pct { flex: none; min-width: 2.4rem; text-align: right; font-size: .76rem; font-weight: 700; }
.lead-match-pct.m-high { color: #16a34a; }
.lead-match-pct.m-mid  { color: #d97706; }
.lead-match-pct.m-low  { color: #dc2626; }
.lead-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem; }
.lead-head h2 { font-size: 1.4rem; }
.lead-contact { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; color: var(--ink); text-align: right; }
.lead-contact span { display: inline-flex; align-items: center; gap: .4rem; justify-content: flex-end; }
.lead-brief { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; background: var(--bg); border-radius: var(--radius-sm); padding: 1rem 1.2rem; }
.lead-brief small { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.lead-brief strong { display: block; margin-top: .2rem; }
.lead-brief .span-all { grid-column: 1 / -1; }
.count-badge { background: var(--accent); color: #fff; border-radius: 999px; padding: .05rem .55rem; font-size: .8rem; }

.match-list { display: flex; flex-direction: column; gap: .7rem; }
.match-item { display: flex; align-items: center; gap: 1rem; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.match-item .cell-thumb { width: 70px; height: 54px; }
.match-info { flex: 1; min-width: 0; }
.match-info strong { display: block; font-size: .95rem; }
.match-reasons { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.reason { background: var(--bg); border-radius: 6px; padding: .15rem .5rem; font-size: .72rem; font-weight: 600; color: var(--navy); }
.viewing-banner { display: flex; align-items: center; gap: .5rem; background: #eef4f8; border: 1px solid #d4e3ee; color: var(--navy); border-radius: var(--radius-sm); padding: .6rem .8rem; font-size: .82rem; margin: 0 0 .8rem; }
.viewing-banner svg { color: var(--accent); flex: none; }
.viewed-block { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .55rem; margin-top: .5rem; }
.viewed-block.is-viewed { padding: .45rem .55rem; background: #f3f9f5; border: 1px solid #d6ebdf; border-radius: var(--radius-sm); }
.viewed-toggle-form { margin: 0; }
.viewed-btn { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 700; border: 1px solid var(--line); background: #fff; color: var(--muted); padding: .3rem .6rem; border-radius: 999px; cursor: pointer; transition: .15s; }
.viewed-btn:hover { border-color: var(--accent); color: var(--accent); }
.viewed-btn.on { background: #16a34a; border-color: #16a34a; color: #fff; }
.viewed-btn.on:hover { background: #15803d; border-color: #15803d; color: #fff; }
.viewed-meta { font-size: .72rem; color: #16a34a; font-weight: 600; }
.viewed-comment-form { display: flex; align-items: center; gap: .35rem; flex: 1 1 100%; margin: 0; }
.viewed-comment-form input[type=text] { flex: 1; min-width: 0; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: inherit; font-size: .8rem; background: #fff; }
.viewed-comment-form input[type=text]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(46,116,163,.12); }
.match-right { display: flex; flex-direction: column; align-items: stretch; gap: .45rem; flex: none; }
.score-badge { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; min-width: 64px; height: 28px; padding: 0 .65rem; border-radius: 999px; font-weight: 800; font-size: .82rem; line-height: 1; white-space: nowrap; }
.score-badge.high { background: #e6f7ee; color: #16a34a; }
.score-badge.mid { background: #fef3e2; color: #d97706; }
.score-badge.low { background: #eef1f6; color: #64748b; }
.match-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; align-self: flex-start; margin-top: .1rem; background: var(--bg); border: 1px solid var(--line); color: var(--navy); font-weight: 600; font-size: .82rem; padding: .5rem .95rem; border-radius: 999px; cursor: pointer; transition: .15s; }
.match-toggle:hover { background: #eef1f6; border-color: var(--accent); }
.match-toggle svg { transition: transform .2s; }
.match-toggle.open svg { transform: rotate(180deg); }
.match-toggle .mt-less { display: none; }
.match-toggle.open .mt-more { display: none; }
.match-toggle.open .mt-less { display: inline; }
/* Collapsible "show more" group: animate height + fade. Collapsed by default
   (max-height:0); JS removes the [hidden] attribute and drives max-height. */
.match-more { display: flex; flex-direction: column; gap: .7rem; overflow: hidden; max-height: 0; opacity: 0; transition: max-height .35s ease, opacity .25s ease; }
.match-more.open { opacity: 1; }

@media (max-width: 1080px) {
    .panel-grid, .form-cols, .leads-layout { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    /* Sidebar becomes an off-canvas drawer toggled by the burger. */
    .admin-sidebar { position: fixed; top: 0; left: 0; z-index: 80; height: 100vh; width: 260px; transform: translateX(-100%); box-shadow: 0 20px 60px rgba(0,0,0,.4); }
    .admin-body.nav-open .admin-sidebar { transform: translateX(0); }
    .admin-body.nav-collapsed .admin-sidebar { width: 260px; padding-left: 1rem; padding-right: 1rem; }
    .admin-body.nav-collapsed .admin-brand-text,
    .admin-body.nav-collapsed .admin-nav a .nav-label,
    .admin-body.nav-collapsed .admin-nav-foot a .nav-label { opacity: 1; width: auto; }
    .admin-body.nav-collapsed .admin-nav a,
    .admin-body.nav-collapsed .admin-nav-foot a,
    .admin-body.nav-collapsed .admin-brand { justify-content: flex-start; padding-left: .8rem; padding-right: .8rem; }
    .sidebar-collapse { display: none; }
    .sidebar-burger { display: flex; }
    .admin-top { padding: 1rem 1.1rem; }
    .admin-top h1 { font-size: 1.2rem; }
    .admin-eyebrow { display: none; }
    .admin-user-meta { display: none; }
    .global-search { display: none; }
    .admin-content { padding: 1.1rem; }
    .stat-grid, .form-grid, .lead-brief { grid-template-columns: 1fr; }
    .profile-banner { flex-direction: column; align-items: flex-start; }
    .data-table { font-size: .82rem; }
}
@media (max-width: 480px) {
    .stat-grid { grid-template-columns: 1fr; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar .btn, .toolbar form { width: 100%; }
}

/* map picker */
.pick-map { height: 280px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); z-index: 0; }

/* lead status + source + actions */
.status-pill.s-new { background: #e8f0fe; color: #2563eb; }
.status-pill.s-qualified { background: #e6f7ee; color: #16a34a; }
.status-pill.s-viewing { background: #efe9fe; color: #7c3aed; }
.status-pill.s-offer { background: #fef3e2; color: #d97706; }
.status-pill.s-lease_sale { background: #e6f7ee; color: #138a52; }
.status-pill.s-invoice { background: #eef1f6; color: #475569; }
.lead-source-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 600; color: var(--muted); }
.lead-head-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.4rem; align-items: center; }
.lead-head-actions form { margin: 0; display: inline-flex; }
.lead-head-actions .btn, .lead-head-actions select { height: 38px; }
.lead-head-actions .btn { padding-top: 0; padding-bottom: 0; }
.status-form { display: flex; align-items: center; gap: .5rem; }
.status-form select { height: 38px; padding: 0 .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: inherit; font-size: .85rem; background: #fff; cursor: pointer; outline: none; transition: border-color .15s, box-shadow .15s; }
.status-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,95,54,.12); }
.assign-form { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin: 0 0 1.3rem; padding: .7rem .85rem; background: var(--bg, #f6f7f9); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.assign-form > label { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.assign-form select { padding: .5rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: inherit; font-size: .85rem; background: #fff; min-width: 16rem; outline: none; transition: border-color .15s, box-shadow .15s; }
.assign-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,95,54,.12); }
.assign-form > small { flex-basis: 100%; }
.assign-form .ss-wrap { flex: 1 1 18rem; min-width: 16rem; max-width: 32rem; }
.lead-owner-ro { background: var(--bg, #f6f7f9); color: var(--muted); cursor: default; }
.lead-meta-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; }

/* ---------- notifications bell ---------- */
.notif { position: relative; }
.notif-btn { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 12px; width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer; color: var(--navy); }
.notif-btn:hover { border-color: var(--navy); }
.notif-dot { position: absolute; top: -6px; right: -6px; background: #ef4444; color: #fff; font-size: .66rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; padding: 0 4px; }
.notif-panel { position: absolute; right: 0; top: 52px; width: 340px; max-width: 86vw; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(8,24,48,.18); z-index: 200; overflow: hidden; }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.notif-list { max-height: 60vh; overflow-y: auto; }
.notif-empty { padding: 1.4rem 1rem; color: var(--muted); display: flex; gap: .4rem; align-items: center; }
.notif-item { display: flex; gap: .7rem; padding: .8rem 1rem; border-bottom: 1px solid var(--bg); color: inherit; text-decoration: none; }
.notif-item:hover { background: var(--bg); }
.notif-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--bg); color: var(--navy); }
.notif-item.n-unassigned .notif-ic { background: #e8f0fe; color: #2563eb; }
.notif-item.n-stale .notif-ic { background: #fdecec; color: #ef4444; }
.notif-item.n-email .notif-ic { background: #e6f6ee; color: #0f9d58; }
.notif-item.n-viewing .notif-ic { background: #efe9fe; color: #7c3aed; }
.notif-text { min-width: 0; }
.notif-text strong { display: block; font-size: .86rem; }
.notif-text small { color: var(--muted); font-size: .78rem; }
.notif-foot { display: flex; align-items: center; justify-content: center; gap: .35rem; padding: .7rem 1rem; font-size: .82rem; font-weight: 600; color: var(--navy); text-decoration: none; border-top: 1px solid var(--line); background: var(--bg); }
.notif-foot:hover { background: #eef1f6; }
.notif-foot svg { stroke: currentColor; }
/* full notifications page */
.notif-group-title { display: flex; align-items: center; gap: .45rem; margin: 1.4rem 0 .6rem; font-size: .92rem; }
.notif-group-title:first-of-type { margin-top: .4rem; }
.notif-page-list { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.notif-page-list .notif-item { align-items: center; }
.notif-page-list .notif-item:last-child { border-bottom: 0; }
.notif-go { margin-left: auto; flex: none; color: var(--muted); display: grid; place-items: center; }
.notif-go svg { stroke: currentColor; }

/* ---------- lead aging + flags ---------- */
.lead-contact-strip { display: flex; align-items: center; gap: .55rem; padding: .6rem .85rem; background: var(--bg); border-radius: var(--radius-sm); font-size: .85rem; margin-bottom: 1.2rem; color: var(--ink); }
.lead-contact-strip.is-stale { background: #fdecec; color: #b91c1c; }
.flag-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; font-weight: 700; padding: .12rem .45rem; border-radius: 999px; }
.flag-chip.stale { background: #fdecec; color: #b91c1c; }
.flag-chip.unassigned { background: #e8f0fe; color: #2563eb; }
.lead-row-flags { display: flex; gap: .35rem; margin-top: .35rem; flex-wrap: wrap; }
.chk-inline { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; white-space: nowrap; }

/* ---------- manual match + sub headings ---------- */
.sub-h { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 1rem 0 .5rem; }
.manual-match-add { display: flex; gap: .5rem; margin: .6rem 0 .2rem; }
.manual-match-add select { flex: 1; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: inherit; font-size: .85rem; background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
.manual-match-add select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,95,54,.12); }
.pinned-tag { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 700; color: #16a34a; }
button.score-badge { border: 0; cursor: pointer; gap: .15rem; }

/* ---------- activity feed ---------- */
.note-add { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.note-add textarea { width: 100%; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: inherit; font-size: .9rem; resize: vertical; outline: none; transition: border-color .15s, box-shadow .15s; }
.note-add textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,95,54,.12); }
.note-add button { align-self: flex-start; }
.activity-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.act { display: flex; gap: .7rem; padding: .7rem 0; border-top: 1px solid var(--bg); }
.act:first-child { border-top: 0; }
.act-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--bg); color: var(--navy); }
.act-comment .act-ic { background: #e8f0fe; color: #2563eb; }
.act-status .act-ic { background: #efe9fe; color: #7c3aed; }
.act-contact .act-ic { background: #e6f7ee; color: #16a34a; }
.act-email .act-ic { background: #e0f2fe; color: #0284c7; }
.act-body p { margin: 0 0 .15rem; font-size: .9rem; }

/* ---------- why-match modal ---------- */
.why-modal { position: fixed; inset: 0; background: rgba(8,24,48,.5); display: grid; place-items: center; z-index: 400; }
.why-modal[hidden] { display: none; }
.why-card { background: #fff; border-radius: 16px; width: 420px; max-width: 90vw; overflow: hidden; }
.why-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.why-head button { background: none; border: 0; cursor: pointer; color: var(--muted); }
#whyBody { padding: 1rem 1.2rem 1.4rem; }
.why-lbl { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin: .6rem 0 .35rem; }
.why-lbl.ok { color: #16a34a; }
.why-lbl.gap { color: #ef4444; }
.why-list { margin: 0 0 .4rem; padding-left: 1.1rem; font-size: .9rem; }
.why-list.ok li { color: #15803d; }
.why-list.gap li { color: #b91c1c; }

/* ---------- offer document modal ---------- */
.offer-modal { position: fixed; inset: 0; background: rgba(8,24,48,.55); display: grid; place-items: center; z-index: 500; padding: 1.2rem; }
.offer-modal[hidden] { display: none; }
.offer-card { background: #fff; border-radius: 16px; width: 920px; max-width: 96vw; height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(8,24,48,.4); }
.offer-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.offer-head strong { display: block; color: var(--navy); }
.offer-head small { color: var(--muted); font-size: .82rem; }
.offer-head-act { display: flex; align-items: center; gap: .5rem; flex: none; }
.offer-x { background: none; border: 0; cursor: pointer; color: var(--muted); display: inline-flex; }
.offer-frame-wrap { flex: 1; background: #e9edf2; overflow: hidden; }
.offer-frame-wrap iframe { width: 100%; height: 100%; border: 0; }
.lead-email-card { width: 760px; height: auto; max-height: 90vh; }
.lead-email-card .offer-head strong { display: inline-flex; align-items: center; gap: .4rem; }
.lead-email-body { display: flex; flex-direction: column; gap: .8rem; padding: 1.1rem; overflow: auto; }
.lem-field { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .85rem; color: var(--ink); }
.lem-field input, .lem-field textarea { font-family: var(--font); font-size: .92rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 400; color: var(--ink); }
.lem-field input:focus, .lem-field textarea:focus { outline: none; border-color: var(--accent); }
.lem-field input[readonly] { background: var(--bg); color: var(--muted); }
.lem-field textarea { min-height: 260px; resize: vertical; line-height: 1.5; }
.brochure-card { width: 560px; height: auto; max-height: 88vh; }
.brochure-pick { padding: .6rem 1.1rem 1.1rem; overflow: auto; }
.bpick-all { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .85rem; color: var(--navy); padding: .6rem 0; border-bottom: 1px solid var(--line); margin-bottom: .4rem; }
.bpick-item { display: flex; align-items: center; gap: .7rem; padding: .6rem .2rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.bpick-item:last-child { border-bottom: 0; }
.bpick-item input { flex: none; width: 17px; height: 17px; }
.bpick-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bpick-info strong { font-size: .9rem; color: var(--ink); }
.bpick-score { flex: none; font-size: .78rem; font-weight: 700; color: var(--accent); }

/* ---------- report tables + tabs ---------- */
.report-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.report-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: .55rem .6rem; border-bottom: 1px solid var(--line); }
.report-table td { padding: .65rem .6rem; border-bottom: 1px solid var(--bg); vertical-align: middle; }
.report-table .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .35rem; }
.mini-track { display: inline-block; width: 80px; height: 6px; background: var(--bg); border-radius: 999px; overflow: hidden; vertical-align: middle; margin-right: .4rem; }
.mini-fill { height: 100%; background: var(--accent); }
.tab-row { display: flex; gap: .3rem; }
.tab { padding: .5rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.tab.on { background: var(--navy); color: #fff; }
.mode-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; color: var(--navy); }
.vw-status { padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: .8rem; font-weight: 600; background: #fff; }
.meet-link { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; color: var(--accent); }
.row-actions { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.row-actions form { display: inline-flex; gap: .35rem; align-items: center; margin: 0; }
.btn.danger { color: #b91c1c; }

/* Stack wide portal tables (blog, leave, reports…) into readable cards on
   phones so rows aren't squished and the action buttons never scroll off-screen. */
@media (max-width: 640px) {
    .report-table thead { display: none; }
    .report-table, .report-table tbody, .report-table tr, .report-table td { display: block; width: 100%; }
    .report-table tr { border: 1px solid var(--line); border-radius: 12px; padding: .85rem 1rem; margin-bottom: .8rem; background: var(--bg); }
    .report-table tr:last-child { margin-bottom: 0; }
    .report-table td { padding: .3rem 0; border: 0; }
    .report-table td::before { content: attr(data-label); display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 800; margin-bottom: .1rem; }
    .report-table td:first-child { padding-top: 0; }
    .report-table td:first-child::before { display: none; }
    .report-table td:empty { display: none; }
    .report-table td.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .55rem; padding-top: .7rem; border-top: 1px solid var(--line); }
    .report-table td.row-actions::before { display: none; }
}

/* ---------- admin form (blog etc.) ---------- */
.admin-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.admin-form label { display: flex; flex-direction: column; gap: .35rem; font-size: .82rem; font-weight: 600; color: var(--navy); }
.admin-form label.span-all { grid-column: 1 / -1; }
.admin-form input, .admin-form textarea, .admin-form select { padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: inherit; font-size: .9rem; font-weight: 400; background: #fbfcfd; outline: none; transition: border-color .15s, box-shadow .15s; }
.admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(196,95,54,.12); }
.form-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.2rem; }

/* Keep field controls aligned to the bottom of each grid row so inputs stay on
   the same line even when a neighbouring label wraps to two lines
   (e.g. "Reset password (leave blank to keep current)"). */
.admin-form label > input,
.admin-form label > select,
.admin-form label > textarea { margin-top: auto; }

@media (max-width: 720px) {
    /* Never force two columns on small screens — full-width fields so inputs
       and their containers never overflow the viewport. */
    .admin-form .form-grid { grid-template-columns: 1fr; }
    .form-actions { flex-direction: column-reverse; align-items: stretch; }
    .form-actions .btn { width: 100%; justify-content: center; }
}


/* ---- Broker management ---- */
.broker-cell{display:flex;align-items:center;gap:.65rem}
.broker-cell img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#dfe5ee}
.perf-score{display:flex;align-items:center;gap:.4rem}
.perf-score .mini-track{width:64px;margin-right:0}
.perf-score span{font-weight:800;color:var(--navy,#173F35);font-size:.9rem;min-width:1.6rem}
.broker-perf td{vertical-align:middle}
.role-chip{font-size:.72rem;font-weight:700;padding:.25rem .6rem;border-radius:999px}
.role-chip.role-director,.role-chip.role-admin{background:#eae2f7;color:#6b3fc0}
.role-chip.role-agent{background:#e8eef4;color:#3a5a78}
.admin-user-photo{display:inline-block;border-radius:50%;overflow:hidden;line-height:0}
.admin-user-photo img{display:block;transition:.15s}
.admin-user-photo:hover img{filter:brightness(.92)}

/* ---- Feature picker ---- */
.feature-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.4rem .9rem;padding:.85rem;border:1px solid var(--line,#e6e9ef);border-radius:10px;background:#fafbfc}
.feat-opt{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:500;cursor:pointer;color:#33414f}
.feat-opt input{accent-color:#C45F36;width:16px;height:16px}
.feat-opt span{user-select:none}

/* ---- Leads filter toolbar ---- */
.leads-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.lead-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; flex: 1; }
.lf-search { display: flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .55rem .85rem; color: var(--muted); min-width: 230px; flex: 1 1 240px; max-width: 340px; }
.lf-search input { border: 0; outline: none; font-family: inherit; font-size: .9rem; width: 100%; background: transparent; color: var(--ink, #1a2230); }
.lf-select { appearance: none; -webkit-appearance: none; font-family: inherit; font-size: .86rem; font-weight: 600; color: #33414f; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B8FAB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right .7rem center; border: 1px solid var(--line); border-radius: 10px; padding: .58rem 2rem .58rem .8rem; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.lf-select:hover { border-color: var(--steel, #6E9185); }
.lf-select:focus { outline: none; border-color: var(--accent, #C45F36); box-shadow: 0 0 0 3px rgba(196,95,54,.12); }
.lf-toggle { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 600; color: #5a6675; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .55rem .8rem; cursor: pointer; white-space: nowrap; user-select: none; transition: .15s; }
.lf-toggle input { display: none; }
.lf-toggle.on { background: #fdeee8; border-color: #f3c4ad; color: #b5521f; }
.lf-clear { display: inline-flex; align-items: center; gap: .3rem; font-size: .84rem; font-weight: 600; color: var(--muted); padding: .55rem .55rem; border-radius: 10px; }
.lf-clear:hover { color: #b5521f; }
.lf-apply { display: inline-flex; align-items: center; gap: .35rem; font-family: inherit; font-size: .84rem; font-weight: 700; color: #fff; background: var(--navy, #173F35); border: 0; border-radius: 10px; padding: .58rem 1rem; cursor: pointer; transition: .15s; }
.lf-apply:hover { background: var(--accent, #C45F36); }
.fg-hint{display:block;margin-top:.35rem;color:var(--muted);font-size:.78rem;line-height:1.35}
.lead-sort { display: inline-flex; align-items: center; gap: .45rem; }
.lead-sort .ls-label { font-size: .8rem; font-weight: 600; color: var(--muted); }
.ls-select { appearance: none; -webkit-appearance: none; font-family: inherit; font-size: .82rem; font-weight: 600; color: #33414f; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B8FAB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right .55rem center; border: 1px solid var(--line); border-radius: 9px; padding: .42rem 1.7rem .42rem .65rem; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ls-select:hover { border-color: var(--steel, #6E9185); }
.ls-select:focus { outline: none; border-color: var(--accent, #C45F36); box-shadow: 0 0 0 3px rgba(196,95,54,.12); }
.ls-dir { font-weight: 700; }

/* ---- Nav badge + visibility pills ---- */
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: auto; background: #e11d48; color: #fff; border-radius: 999px; font-size: .68rem; font-weight: 800; }
.admin-nav a { display: flex; align-items: center; gap: .6rem; }
.live-pill { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 700; padding: .22rem .6rem; border-radius: 999px; }
.live-pill.live { background: #e6f7ee; color: #16a34a; }
.live-pill.draft { background: #fef3e2; color: #d97706; }

/* ---- Listing requests ---- */
.lr-intro { margin-bottom: 1.1rem; }
.count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: .5rem; background: var(--navy, #173F35); color: #fff; border-radius: 999px; font-size: .72rem; font-weight: 800; vertical-align: middle; }
.lr-empty { display: flex; align-items: center; gap: .4rem; padding: .6rem 0; }
.lr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.lr-card { border: 1px solid var(--line); border-radius: var(--radius, 16px); padding: 1.1rem; background: #fff; display: flex; flex-direction: column; gap: .75rem; }
.lr-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.lr-card-top strong { display: block; font-size: 1rem; }
.lr-card-top small { display: block; }
.pill-rent { background: #efe9fe; color: #7c3aed; }
.pill-sale { background: #e8f0fe; color: #2563eb; }
.lr-meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .85rem; color: #475569; }
.lr-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.lr-desc { font-size: .88rem; color: #475569; background: var(--bg, #f6f7f9); border-radius: 10px; padding: .6rem .75rem; margin: 0; line-height: 1.45; }
.lr-insights { display: flex; flex-wrap: wrap; gap: .5rem; }
.lr-ins { display: flex; flex-direction: column; gap: .05rem; padding: .4rem .65rem; border-radius: 10px; background: #f1f6fa; border: 1px solid #e2ecf3; min-width: 0; }
.lr-ins small { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #64748b); font-weight: 700; }
.lr-ins strong { font-size: .9rem; color: var(--ink, #0f172a); }
.lr-ins-delta { justify-content: center; align-items: center; }
.lr-ins-delta.over { background: #fdecec; border-color: #f7d4d0; }
.lr-ins-delta.over strong { color: #c0392b; }
.lr-ins-delta.under { background: #e7f7ee; border-color: #cdebd9; }
.lr-ins-delta.under strong { color: #138a52; }
.lr-ins-delta.on { background: #eef2f7; border-color: #e2e8f0; }
.lr-ins-delta.on strong { color: #36506b; }
.lr-contact { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; font-size: .84rem; margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--line); }
.lr-contact a { display: inline-flex; align-items: center; gap: .35rem; color: var(--accent, #C45F36); font-weight: 600; }
.lr-when { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; }
.lr-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .15rem; }
.lr-actions form { margin: 0; flex: 1 1 auto; }
.lr-actions .btn { width: 100%; justify-content: center; }
.lr-actions .btn.danger { color: #b91c1c; }

/* Searchable property combobox (Add Unit) */
.combo { position: relative; }
.combo-input { width: 100%; }
.combo-clear {
    position: absolute; top: 50%; right: .55rem; transform: translateY(-50%);
    border: 0; background: transparent; color: var(--muted); font-size: 1.2rem;
    line-height: 1; cursor: pointer; padding: .1rem .25rem;
}
.combo-clear:hover { color: var(--ink); }
.combo-list {
    position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
    max-height: 260px; overflow-y: auto; background: var(--white);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: var(--shadow); padding: .3rem;
}
.combo-opt {
    padding: .5rem .6rem; border-radius: 8px; cursor: pointer;
    font-size: .9rem; line-height: 1.3;
}
.combo-opt small { color: var(--muted); }
.combo-opt:hover { background: var(--bg); }
.combo-opt.is-standalone { color: var(--muted); font-style: italic; border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: .2rem; }
.combo-empty { padding: .55rem .6rem; color: var(--muted); font-size: .85rem; }

/* Email page */
.email-app { display: grid; grid-template-columns: 230px 1fr; gap: 1.1rem; align-items: start; }
.email-folders { display: flex; flex-direction: column; gap: .7rem; position: sticky; top: 1rem; }
.email-compose-btn { justify-content: center; }
.email-account { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .8rem; padding: 0 .2rem; overflow: hidden; }
.email-account small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email-folder-nav { display: flex; flex-direction: column; gap: .2rem; background: var(--card, #fff); border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem; }
.email-folder { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: var(--radius-sm); color: var(--ink); font-weight: 500; font-size: .92rem; }
.email-folder:hover { background: var(--bg); }
.email-folder.on { background: var(--accent); color: #fff; }
.email-folder.on svg { color: #fff; }
.email-folder svg { color: var(--muted); flex: none; }
.email-folder-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: auto; background: #e11d48; color: #fff; border-radius: 999px; font-size: .68rem; font-weight: 800; }

.email-main { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.email-bar { display: flex; gap: .7rem; align-items: center; }
.email-search { position: relative; flex: 1; display: flex; align-items: center; }
.email-search svg { position: absolute; left: .8rem; color: var(--muted); pointer-events: none; }
.email-search input { width: 100%; padding: .62rem .9rem .62rem 2.4rem; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font); font-size: .92rem; background: var(--card, #fff); }
.email-search input:focus { outline: none; border-color: var(--accent); }
.email-search-clear { position: absolute; right: .9rem; color: var(--muted); font-size: 1.3rem; line-height: 1; text-decoration: none; }

.email-list-panel { padding: 0; overflow: hidden; }
.email-list-panel .empty { padding: 2.5rem 10px; text-align: center; color: var(--muted); }
.email-list-panel .empty h3 { color: var(--ink); margin: .6rem 0 .35rem; }
.email-list-panel .empty p { margin: 0; }
.email-list { list-style: none; margin: 0; padding: 0; }
.email-row + .email-row { border-top: 1px solid var(--line); }
.email-row a { display: grid; grid-template-columns: 230px 1fr auto; gap: 1.4rem; align-items: center; padding: 1.1rem 1.35rem; color: var(--ink); line-height: 1.45; }
.email-row a:hover { background: var(--bg); }
.email-row.unread a { background: #f0f6fc; }
.email-row.unread .email-from, .email-row.unread .email-subject { font-weight: 700; }
.email-from { color: var(--accent); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-date { color: var(--muted); font-size: .82rem; white-space: nowrap; }

/* Reading ribbon + thread */
.email-ribbon { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; background: var(--card, #fff); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .6rem; }
.email-ribbon-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 .3rem; }
.email-more { position: relative; margin-left: auto; }
.email-more-menu { position: absolute; right: 0; top: calc(100% + .35rem); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(0,0,0,.12); min-width: 170px; padding: .35rem; z-index: 30; display: flex; flex-direction: column; }
.email-more-menu[hidden] { display: none; }
.email-more-menu a, .email-more-menu button { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border-radius: var(--radius-sm); color: var(--ink); background: none; border: 0; font: inherit; text-align: left; cursor: pointer; width: 100%; }
.email-more-menu a:hover, .email-more-menu button:hover { background: var(--bg); }

.email-thread-subject { margin: .2rem 0 0; }
.email-thread-jump { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; }
.email-thread-jump a { color: var(--accent); padding: .15rem .5rem; border: 1px solid var(--line); border-radius: 999px; }
.email-thread { display: flex; flex-direction: column; gap: .8rem; }
.email-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card, #fff); overflow: hidden; }
.email-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; cursor: pointer; }
.email-card-who strong { display: block; line-height: 1.2; }
.email-card-who small { color: var(--muted); font-size: .82rem; }
.email-card-when { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .82rem; white-space: nowrap; }
.email-card-folder { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: .05rem .5rem; font-size: .72rem; }
.email-card-meta { display: none; flex-direction: column; gap: .15rem; padding: 0 1rem .6rem; font-size: .82rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.email-card-meta strong { color: var(--ink); font-weight: 600; }
.email-card-body { display: none; padding: 1rem; }
.email-card.open .email-card-meta, .email-card.open .email-card-body { display: flex; }
.email-card.open .email-card-body { display: block; }
.email-html { width: 100%; min-height: 360px; border: 0; background: #fff; }
.email-text { white-space: pre-wrap; word-wrap: break-word; font-family: var(--font); font-size: .95rem; line-height: 1.55; margin: 0; }

.email-attachments { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1rem 1rem; }
.email-card:not(.open) .email-attachments { display: none; }
.email-att { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font-size: .85rem; }
.email-att:hover { border-color: var(--accent); }
.email-att-name { font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-att-size { color: var(--muted); font-size: .78rem; }

/* Compose */
.email-compose { margin: 0; }
.email-reply-history { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: .7rem; }
.email-reply-history .email-thread-jump { font-size: .82rem; color: var(--muted); }
.email-form { display: flex; flex-direction: column; gap: .8rem; }
.email-form label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; font-size: .9rem; color: var(--ink); }
.email-form input, .email-form textarea { font-family: var(--font); font-size: .95rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); outline: none; transition: border-color .15s, box-shadow .15s; }
.email-form input:focus, .email-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,95,54,.12); }
.email-form textarea { resize: vertical; }
.email-form-actions { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; }
.email-msg-field { display: flex; flex-direction: column; gap: .35rem; }
.email-msg-label { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: .9rem; color: var(--ink); }
.email-attach { flex-direction: row !important; align-items: center; gap: .6rem !important; font-weight: 600 !important; font-size: .88rem !important; color: var(--ink) !important; flex-wrap: wrap; }
.email-attach input { border: 0 !important; padding: 0 !important; font-size: .85rem; color: var(--muted); cursor: pointer; }
.email-attach input::file-selector-button { font-family: var(--font); font-weight: 600; font-size: .85rem; color: var(--accent); background: linear-gradient(135deg, #eef4ff, #f7f0ff); border: 1px solid var(--accent); border-radius: 999px; padding: .42rem .95rem; margin-right: .7rem; cursor: pointer; transition: background .15s ease, color .15s ease; }
.email-attach input::file-selector-button:hover { background: var(--accent); color: #fff; }
.email-attach input::-webkit-file-upload-button { font-family: var(--font); font-weight: 600; font-size: .85rem; color: var(--accent); background: linear-gradient(135deg, #eef4ff, #f7f0ff); border: 1px solid var(--accent); border-radius: 999px; padding: .42rem .95rem; margin-right: .7rem; cursor: pointer; }

.btn-ai { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--accent); background: linear-gradient(135deg, #eef4ff, #f7f0ff); color: var(--accent); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.btn-ai:hover { background: var(--accent); color: #fff; }
.btn-ai:disabled { opacity: .6; cursor: progress; }
.ai-panel { border: 1px solid #d9c9f5; background: #faf7ff; border-radius: var(--radius-sm); padding: .8rem .9rem; display: flex; flex-direction: column; gap: .6rem; font-size: .9rem; }
.ai-panel[hidden] { display: none; }
.ai-panel h4 { margin: 0; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: #6b4fb0; display: flex; align-items: center; gap: .4rem; }
.ai-summary { margin: 0; line-height: 1.5; color: var(--ink); }
.ai-suggestions { display: flex; flex-direction: column; gap: .5rem; }
.ai-suggestion { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-sm); padding: .6rem .7rem; cursor: pointer; font: inherit; font-size: .88rem; line-height: 1.45; color: var(--ink); }
.ai-suggestion:hover { border-color: var(--accent); background: #f6f9ff; }
.ai-error { color: var(--danger, #b42318); margin: 0; }
.ai-loading { color: #6b4fb0; margin: 0; }

.form-note { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .88rem; margin: 0 0 .9rem; }
@media (max-width: 820px) {
    .email-app { grid-template-columns: 1fr; }
    .email-folders { position: static; flex-direction: column; }
    .email-folder-nav { flex-direction: row; flex-wrap: wrap; }
    .email-folder { flex: 1 1 auto; }
}
@media (max-width: 700px) {
    .email-row a { grid-template-columns: 1fr; gap: .2rem; }
    .email-date { font-size: .78rem; }
}
@media print {
    .admin-sidebar, .admin-top, .email-folders, .email-bar, .email-ribbon, .email-thread-jump { display: none !important; }
    .email-app { grid-template-columns: 1fr; }
    .email-card-meta, .email-card-body, .email-attachments { display: block !important; }
}

/* Calendar */
.cal-page { display: flex; flex-direction: column; }
.cal-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cal-nav { display: flex; align-items: center; gap: .5rem; }
.cal-title { margin: 0 .4rem; font-size: 1.25rem; min-width: 9.5rem; text-align: center; }
.cal-grid-wrap { padding: 0; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.cal-grid-wrap::-webkit-scrollbar { height: 10px; }
.cal-grid-wrap::-webkit-scrollbar-track { background: var(--bg); border-radius: 0 0 var(--radius) var(--radius); }
.cal-grid-wrap::-webkit-scrollbar-thumb { background: #cfd8e3; border-radius: 999px; border: 2px solid var(--bg); }
.cal-grid-wrap::-webkit-scrollbar-thumb:hover { background: #b4c0cf; }
.cal-grid-wrap { scrollbar-width: thin; scrollbar-color: #cfd8e3 var(--bg); }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(132px, 1fr)); min-width: 924px; background: var(--bg); border-bottom: 1px solid var(--line); }
.cal-weekdays span { padding: .6rem .7rem; font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-align: left; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(132px, 1fr)); min-width: 924px; }
.cal-cell { min-height: 116px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .35rem .4rem .5rem; display: flex; flex-direction: column; gap: .3rem; background: #fff; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.out { background: #fafbfc; }
.cal-cell.out .cal-daynum { color: var(--muted); opacity: .6; }
.cal-cell.today { background: #f0f6fc; }
.cal-cell-head { display: flex; align-items: center; justify-content: space-between; }
.cal-daynum { font-size: .85rem; font-weight: 700; color: var(--ink); width: 1.7rem; height: 1.7rem; display: grid; place-items: center; }
.cal-cell.today .cal-daynum { background: var(--accent); color: #fff; border-radius: 999px; }
.cal-add { color: var(--muted); opacity: 0; transition: opacity .12s ease; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 6px; }
.cal-cell:hover .cal-add { opacity: 1; }
.cal-add:hover { background: var(--bg); color: var(--accent); }
.cal-events { display: flex; flex-direction: column; gap: .22rem; overflow: hidden; }
.cal-event { display: flex; align-items: baseline; gap: .35rem; padding: .2rem .4rem; border-radius: 6px; background: #e8f0fe; color: #1f3d5c; font-size: .78rem; line-height: 1.25; overflow: hidden; border-left: 3px solid var(--accent); }
.cal-event:hover { background: #d8e6fb; }
.cal-event.has-lead { background: #eaf7ef; color: #185c39; border-left-color: #1f9d57; }
.cal-event.has-lead:hover { background: #dcf0e5; }
.cal-event-time { font-weight: 700; flex: none; }
.cal-event-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Calendar event modal */
.cal-modal { position: fixed; inset: 0; background: rgba(8,24,48,.45); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 1rem; z-index: 300; overflow-y: auto; }
.cal-modal-card { background: #fff; border-radius: var(--radius); width: 100%; max-width: 480px; box-shadow: 0 24px 60px rgba(8,24,48,.3); overflow: visible; }
/* On desktop, give the New-event dialog 15% more width (480px -> 552px). */
@media (min-width: 721px) { .cal-modal-card { max-width: 552px; } }
.cal-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.3rem; border-bottom: 1px solid var(--line); }
.cal-modal-head h3 { margin: 0; display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; }
.cal-modal-close { font-size: 1.6rem; line-height: 1; color: var(--muted); text-decoration: none; }
.cal-modal-close:hover { color: var(--ink); }
.cal-form { display: flex; flex-direction: column; gap: 1rem; padding: 1.3rem; }
.cal-form label { display: flex; flex-direction: column; gap: .4rem; font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.cal-form label .muted { text-transform: none; letter-spacing: 0; font-weight: 500; }
.cal-form input, .cal-form select, .cal-form textarea, .cal-form .ss-input { font-family: var(--font); font-size: .92rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink); padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.cal-form input:focus, .cal-form select:focus, .cal-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,95,54,.12); }
.cal-form textarea { resize: vertical; }
.cal-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.cal-form-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding-top: .4rem; border-top: 1px solid var(--bg); margin-top: .2rem; }
.cal-form-spacer { flex: 1; }
.cal-form .ss-menu { z-index: 320; }
.cal-del { color: var(--danger, #c0392b) !important; border-color: #f0c8c8 !important; }
.cal-del:hover { background: #fdecec !important; }

/* Contacts */
.contacts-page { display: flex; flex-direction: column; gap: 1rem; }
.contacts-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.contacts-search { display: flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem; flex: 1 1 320px; max-width: 460px; color: var(--muted); }
.contacts-search input { border: 0; outline: none; font: inherit; font-size: .92rem; flex: 1; background: transparent; }
.contacts-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.contacts-grid:has(.contact-form-panel) { grid-template-columns: minmax(0, 1fr) 360px; }
.contacts-grid:has(.contact-form-panel) .contacts-list-wrap { min-width: 0; }
.contacts-list-wrap { padding: 0; overflow: hidden; }
.contacts-table { width: 100%; border-collapse: collapse; }
.contacts-table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
.contacts-table td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); font-size: .9rem; vertical-align: middle; }
.contacts-table tr:last-child td { border-bottom: 0; }
.contacts-table tr.on { background: #f0f6fc; }
.contacts-table td strong { display: block; }
.contacts-table td small { display: block; font-size: .78rem; }
.rel-badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; background: #eef2f7; color: #36506b; font-size: .76rem; font-weight: 700; }
.contacts-act { white-space: nowrap; text-align: right; }
.contact-form-panel h2 { margin: 0 0 .9rem; font-size: 1.05rem; }
.contact-form { display: flex; flex-direction: column; gap: .7rem; }
.contact-form label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .85rem; color: var(--ink); }
.contact-form input, .contact-form select, .contact-form textarea { font-family: var(--font); font-size: .92rem; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent); }
.contact-form textarea { resize: vertical; }
.contact-form-act { display: flex; align-items: center; gap: .6rem; padding-top: .3rem; }
@media (max-width: 820px) {
    .contacts-grid { grid-template-columns: 1fr; }
}

/* Email To/Cc autosuggest */
.email-suggest-field { position: relative; display: block; width: 100%; }
.email-suggest-field input { width: 100%; box-sizing: border-box; }
.email-suggest-list { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 12px 30px rgba(8,24,48,.14); max-height: 240px; overflow-y: auto; display: none; }
.email-suggest-list.on { display: block; }
.email-suggest-item { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .7rem; cursor: pointer; font-size: .88rem; border-bottom: 1px solid var(--bg); }
.email-suggest-item:last-child { border-bottom: 0; }
.email-suggest-item.active, .email-suggest-item:hover { background: #f0f6fc; }
.email-suggest-item .es-name { font-weight: 600; color: var(--ink); }
.email-suggest-item .es-email { color: var(--muted); font-size: .82rem; }
.email-suggest-item .es-tag { flex: none; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #36506b; background: #eef2f7; border-radius: 999px; padding: .12rem .5rem; }

@media (max-width: 700px) {
    .cal-cell { min-height: 84px; }
    .cal-add { opacity: 1; }
    .cal-form-row { grid-template-columns: 1fr; }
}

/* ===================================================================== */
/* Loading overlay                                                       */
/* ===================================================================== */
.loading-overlay { position: fixed; inset: 0; z-index: 4000; background: rgba(243,245,248,.78); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity .25s ease; }
.loading-overlay.is-hidden { opacity: 0; pointer-events: none; visibility: hidden; }
.loading-spinner { width: 46px; height: 46px; border-radius: 50%; border: 4px solid #d4dce6; border-top-color: var(--accent); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================================================================== */
/* Toasts                                                                */
/* ===================================================================== */
.toast-stack { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 4500; display: flex; flex-direction: column; gap: .6rem; max-width: min(360px, 90vw); }
.toast { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: var(--radius-sm); background: #fff; box-shadow: 0 14px 36px rgba(8,24,48,.18); font-size: .9rem; font-weight: 600; color: var(--ink); border-left: 4px solid var(--accent); transform: translateY(12px); opacity: 0; transition: transform .22s ease, opacity .22s ease; }
.toast.in { transform: translateY(0); opacity: 1; }
.toast.out { transform: translateY(12px); opacity: 0; }
.toast-ok { border-left-color: #1f9d57; }
.toast-err { border-left-color: #c0392b; }
.toast-info { border-left-color: var(--accent); }
.toast-msg { flex: 1; }
.toast-x { background: none; border: 0; font-size: 1.2rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 .1rem; }
.toast-x:hover { color: var(--ink); }

/* ===================================================================== */
/* Generic empty state                                                   */
/* ===================================================================== */
.empty { padding: 3rem 1.2rem; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.empty svg { color: #c2cbd8; margin-bottom: .4rem; }
.empty h3 { color: var(--ink); margin: .2rem 0 .15rem; }
.empty p { margin: 0 0 .6rem; max-width: 30rem; }

/* ===================================================================== */
/* Global search (top bar)                                               */
/* ===================================================================== */
.global-search { position: relative; flex: 1; max-width: 460px; margin: 0 1.4rem; }
.global-search-ic { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--muted); display: grid; place-items: center; }
.global-search input { width: 100%; padding: .6rem .9rem .6rem 2.3rem; border: 1px solid var(--line); border-radius: 999px; font-family: inherit; font-size: .9rem; background: var(--bg); outline: none; }
.global-search input:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,95,54,.12); }
.global-search-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 16px 40px rgba(8,24,48,.16); overflow: hidden; max-height: 70vh; overflow-y: auto; z-index: 60; }
.gs-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border-bottom: 1px solid var(--bg); }
.gs-item:hover { background: #f0f6fc; }
.gs-type { flex: none; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #36506b; background: #eef2f7; border-radius: 999px; padding: .15rem .5rem; min-width: 4.6rem; text-align: center; }
.gs-text { display: flex; flex-direction: column; overflow: hidden; }
.gs-text strong { font-size: .9rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-text small { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-all { display: block; text-align: center; padding: .55rem; font-weight: 700; font-size: .82rem; color: var(--accent); background: var(--bg); }
.gs-all:hover { background: #e9eef4; }
.gs-empty { padding: 1rem; text-align: center; color: var(--muted); font-size: .88rem; }

/* Full search results page */
.search-group-title { margin: 1.2rem 0 .5rem; font-size: .95rem; }
.search-results { display: flex; flex-direction: column; gap: .4rem; }
.search-result { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.search-result:hover { border-color: var(--accent); background: #f6f9fc; }
.search-result-ic { flex: none; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 8px; background: var(--bg); color: var(--accent); }
.search-result-text { display: flex; flex-direction: column; }
.search-result-text strong { color: var(--ink); }

/* ===================================================================== */
/* Calendar — view switch, week/day, drag                                */
/* ===================================================================== */
.cal-view-switch { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.cal-view-switch a { padding: .35rem .9rem; border-radius: 999px; font-size: .84rem; font-weight: 700; color: var(--muted); }
.cal-view-switch a.on { background: #fff; color: var(--accent); box-shadow: 0 2px 6px rgba(8,24,48,.1); }
.cal-event[draggable="true"] { cursor: grab; }
.cal-event.dragging { opacity: .45; }
.cal-cell.drop-target, .cal-weekcol.drop-target, .cal-day.drop-target { outline: 2px dashed var(--accent); outline-offset: -3px; background: #eaf2fb; }
.cal-event.has-prop { border-left-color: #b4690e; }

/* Week view */
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); min-width: 1050px; min-height: 60vh; }
.cal-weekcol { border-right: 1px solid var(--line); padding: 0 0 .6rem; display: flex; flex-direction: column; }
.cal-weekcol:nth-child(7n) { border-right: 0; }
.cal-weekcol.today { background: #f0f6fc; }
.cal-weekcol-head { display: flex; align-items: center; gap: .4rem; padding: .55rem .6rem; border-bottom: 1px solid var(--line); position: relative; }
.cal-weekcol-head span { font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.cal-weekcol-head strong { font-size: 1rem; color: var(--ink); }
.cal-weekcol.today .cal-weekcol-head strong { background: var(--accent); color: #fff; border-radius: 999px; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; }
.cal-weekcol-head .cal-add { margin-left: auto; opacity: 0; }
.cal-weekcol:hover .cal-add { opacity: 1; }
.cal-weekcol .cal-events { padding: .45rem .5rem; gap: .3rem; }
.cal-week-empty { color: #c2cbd8; text-align: center; margin: .4rem 0; }

/* Day view */
.cal-day { padding: 1rem 1.2rem; min-height: 50vh; }
.cal-day-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.cal-day-item { display: flex; gap: 1rem; padding: .8rem 1rem; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); background: #fff; }
.cal-day-item.has-lead { border-left-color: #1f9d57; }
.cal-day-time { flex: none; text-align: center; font-weight: 800; color: var(--accent); font-size: 1rem; line-height: 1.15; }
.cal-day-time small { font-weight: 600; color: var(--muted); font-size: .78rem; }
.cal-day-body { display: flex; flex-direction: column; gap: .15rem; }
.cal-day-body strong { color: var(--ink); }
.cal-day-body small { color: var(--muted); font-size: .82rem; display: inline-flex; align-items: center; gap: .3rem; }

/* ===================================================================== */
/* Dashboard agenda widget                                               */
/* ===================================================================== */
.agenda-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.agenda-item { display: flex; gap: .9rem; align-items: flex-start; padding: .7rem .2rem; border-bottom: 1px solid var(--line); }
.agenda-item:last-child { border-bottom: 0; }
.agenda-time { flex: none; text-align: center; min-width: 3.2rem; }
.agenda-time strong { display: block; color: var(--accent); font-size: .95rem; }
.agenda-time small { color: var(--muted); font-size: .74rem; }
.agenda-body { display: flex; flex-direction: column; gap: .1rem; }
.agenda-body strong { color: var(--ink); font-size: .92rem; }
.agenda-body small { color: var(--muted); font-size: .8rem; display: inline-flex; align-items: center; gap: .3rem; }
.agenda-daytag { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #36506b; background: #eef2f7; border-radius: 999px; padding: .1rem .5rem; align-self: flex-start; margin-left: auto; }
.agenda-daytag.today { background: #e7f7ee; color: #138a52; }

/* ===================================================================== */
/* Audit log & documents                                                 */
/* ===================================================================== */
.audit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.audit-item { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem .2rem; border-bottom: 1px solid var(--line); }
.audit-item:last-child { border-bottom: 0; }
.audit-ic { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 8px; background: var(--bg); color: var(--accent); }
.audit-body { display: flex; flex-direction: column; gap: .1rem; }
.audit-body strong { color: var(--ink); font-size: .9rem; font-weight: 600; }
.audit-meta { color: var(--muted); font-size: .78rem; }
.audit-action { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: .1rem .45rem; border-radius: 999px; background: #eef2f7; color: #36506b; }

.doc-list { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.doc-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.doc-ic { flex: none; color: var(--accent); }
.doc-info { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.doc-info strong { font-size: .88rem; color: var(--ink); }
.doc-info small { color: var(--muted); font-size: .76rem; }
.doc-actions { display: flex; gap: .4rem; flex: none; }
.doc-upload { display: flex; gap: .55rem; flex-wrap: wrap; align-items: stretch; margin-top: .7rem; }
.doc-upload .doc-name { flex: 1 1 220px; min-width: 180px; padding: .55rem .75rem; font: inherit; font-size: .85rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color .15s, box-shadow .15s; }
.doc-upload .doc-name:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,95,54,.12); }
.doc-file-btn { display: inline-flex; align-items: center; gap: .4rem; flex: none; padding: .55rem .9rem; font-size: .85rem; font-weight: 600; color: var(--accent); background: #f1f6fa; border: 1px dashed #b8cdda; border-radius: var(--radius-sm); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.doc-file-btn:hover { background: #e6f0f6; border-color: var(--accent); }
.doc-file-btn input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.doc-file-btn.is-busy { opacity: .6; pointer-events: none; }

/* Document preview modal */
.doc-modal { position: fixed; inset: 0; z-index: 3500; display: flex; align-items: center; justify-content: center; padding: 2rem; background: rgba(13,33,74,.55); backdrop-filter: blur(2px); }
.doc-modal[hidden] { display: none; }
.doc-modal-card { background: #fff; border-radius: var(--radius); width: min(960px, 100%); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(13,33,74,.35); }
.doc-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.doc-modal-meta { display: flex; flex-direction: column; overflow: hidden; }
.doc-modal-meta strong { font-size: .95rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-modal-meta small { font-size: .76rem; }
.doc-modal-act { display: flex; align-items: center; gap: .5rem; flex: none; }
.doc-modal-x { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--bg); color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.doc-modal-x:hover { background: #fdecec; color: #c0392b; }
.doc-modal-body { flex: 1; min-height: 0; overflow: auto; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.doc-modal-body img { max-width: 100%; max-height: 78vh; border-radius: var(--radius-sm); box-shadow: 0 6px 20px rgba(13,33,74,.18); }
.doc-modal-body iframe { width: 100%; height: 78vh; border: 0; background: #fff; border-radius: var(--radius-sm); }

/* ===================================================================== */
/* Saved search (public) + report bits                                   */
/* ===================================================================== */
.savesearch-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.2rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1.2rem; }
.trend-table td .spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 26px; }
.trend-table .spark span { width: 7px; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px; opacity: .85; }
.idle-pill { font-weight: 700; font-size: .8rem; padding: .12rem .5rem; border-radius: 999px; background: #fdf0e5; color: #b4690e; }
.idle-pill.hot { background: #fdecec; color: #c0392b; }

/* ===================================================================== */
/* SweetAlert2 — branded dialogs                                          */
/* ===================================================================== */
.swal2-container { z-index: 6000; }
.nlc-swal { border-radius: var(--radius); padding: 1.6rem 1.6rem 1.4rem; font-family: var(--font); box-shadow: 0 24px 60px rgba(13,33,74,.35); }
.nlc-swal .swal2-title { font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.nlc-swal .swal2-html-container { font-size: .95rem; color: var(--muted); }
.nlc-swal .swal2-actions { gap: .6rem; margin-top: 1.3rem; }
.nlc-swal-confirm, .nlc-swal-cancel { font: 600 .9rem var(--font); padding: .6rem 1.2rem; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.nlc-swal-confirm { background: var(--accent); color: #fff; }
.nlc-swal-confirm:hover { background: var(--accent-600); }
.nlc-swal-confirm.danger { background: #c0392b; }
.nlc-swal-confirm.danger:hover { background: #a83224; }
.nlc-swal-cancel { background: #fff; color: var(--ink); border-color: var(--line); }
.nlc-swal-cancel:hover { border-color: var(--muted); }

/* ===================================================================== */
/* Leave management                                                      */
/* ===================================================================== */
.leave-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.1rem; margin-bottom: 1.1rem; }
.leave-form .form-actions { margin-top: .9rem; }
.leave-subhead { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: .8rem 0 .4rem; }
.leave-subhead:first-child { margin-top: 0; }
.leave-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.leave-people li { display: flex; align-items: center; gap: .7rem; }
.leave-people img { width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover; flex: none; background: var(--bg); }
.leave-people img.img-fallback { background: linear-gradient(135deg, #d8e2ec, #b9cadb); }
.lp-meta { display: flex; flex-direction: column; line-height: 1.25; }
.lp-meta strong { font-size: .9rem; color: var(--ink); }
.lp-meta small { font-size: .78rem; color: var(--muted); }

@media (max-width: 880px) {
    .leave-grid { grid-template-columns: 1fr; }
}

/* ===================================================================== */
/* Most-clicked listings                                                 */
/* ===================================================================== */
.clicks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.clicks-row { display: flex; align-items: center; gap: .9rem; padding: .65rem .2rem; border-bottom: 1px solid var(--line); }
.clicks-row:last-child { border-bottom: 0; }
.clicks-rank { flex: none; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: var(--bg); color: var(--accent); font-weight: 800; font-size: .82rem; }
.clicks-main { flex: 1; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.clicks-main strong { font-size: .9rem; color: var(--ink); }
.clicks-bar { height: 6px; border-radius: 999px; background: var(--bg); overflow: hidden; margin-top: .25rem; }
.clicks-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #3b82f6); }
.clicks-count { flex: none; text-align: right; min-width: 3rem; }
.clicks-count strong { display: block; font-size: 1rem; color: var(--ink); }
.clicks-count small { color: var(--muted); font-size: .72rem; }
.clicks-cell { display: flex; align-items: center; gap: .5rem; }
.clicks-cell .mini-track { flex: 1; min-width: 60px; }

/* ===================================================================== */
/* Searchable select (combobox)                                          */
/* ===================================================================== */
.ss-wrap { position: relative; }
.manual-match-add .ss-wrap { flex: 1; min-width: 0; }
.ss-input { width: 100%; padding: .55rem .75rem; font: inherit; font-size: .88rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color .15s, box-shadow .15s; }
.ss-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,95,54,.12); }
.ss-menu { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; max-height: 240px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 12px 30px rgba(15,23,42,.14); padding: .25rem; }
.ss-item { padding: .5rem .6rem; border-radius: 8px; font-size: .86rem; color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-item:hover, .ss-item.is-active { background: #eef4f8; }
.ss-item.is-current { color: var(--accent); font-weight: 600; }

/* SweetAlert time input used by the reschedule dialog */
.nlc-swal-input { margin-top: .4rem !important; }

/* Calendar chip “just moved” pulse during optimistic reschedule */
.cal-event.just-moved { box-shadow: 0 0 0 2px var(--accent); opacity: .85; transition: box-shadow .2s, opacity .2s; }

/* ===================================================================== */
/* Calendar sync (Google / Outlook + .ics feed)                          */
/* ===================================================================== */
.cal-sync { margin-top: 1.2rem; padding: 0; overflow: hidden; }
.cal-sync details { width: 100%; }
.cal-sync-summary { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: 1rem 1.3rem; cursor: pointer; list-style: none; user-select: none; }
.cal-sync-summary::-webkit-details-marker { display: none; }
.cal-sync-summary:hover { background: #f6f9fb; }
.cal-sync-summary .muted { font-weight: 500; font-size: .85rem; }
.cal-sync[open] .cal-sync-summary, .cal-sync details[open] .cal-sync-summary { border-bottom: 1px solid var(--line); }
.cal-sync-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 1.1rem; }
.sync-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sync-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem; display: flex; flex-direction: column; gap: .8rem; background: #fbfdfe; }
.sync-card.is-on { border-color: #b9e3c8; background: #f4fbf6; }
.sync-card-head { display: flex; align-items: flex-start; gap: .7rem; }
.sync-logo { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.1rem; }
.sync-logo.sync-google { background: linear-gradient(135deg, #4285f4, #ea4335); }
.sync-logo.sync-outlook { background: linear-gradient(135deg, #0a6ed1, #28a8ea); }
.sync-card-head strong { display: block; font-size: .95rem; }
.sync-state { display: block; font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.sync-state.ok { color: #1c7a44; display: inline-flex; align-items: center; gap: .3rem; }
.sync-when { display: block; font-size: .74rem; color: var(--muted); margin-top: .15rem; }
.sync-form { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; }
.sync-form input[type="email"] { flex: 1; min-width: 140px; padding: .5rem .6rem; font: inherit; font-size: .85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.btn-sm { padding: .42rem .8rem; font-size: .82rem; }
.sync-feed { border-top: 1px dashed var(--line); padding-top: 1rem; }
.sync-feed h4 { margin: 0 0 .35rem; display: flex; align-items: center; gap: .4rem; font-size: .95rem; }
.sync-feed p.muted { margin: 0 0 .7rem; font-size: .84rem; }
.sync-feed-row { display: flex; align-items: center; gap: .5rem; }
.sync-feed-row input { flex: 1; padding: .55rem .65rem; font: inherit; font-size: .82rem; color: var(--ink); background: #f6f9fb; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.sync-feed-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .7rem; }
@media (max-width: 720px) {
    .sync-cards { grid-template-columns: 1fr; }
    .cal-sync-summary { padding: .9rem 1rem; }
    .cal-sync-body { padding: 1rem; }
}

/* ===================================================================== */
/* Lead requirement weighting sliders                                    */
/* ===================================================================== */
.weights-intro { margin: 0 0 1rem; font-size: .86rem; color: var(--muted); line-height: 1.5; }
.weights-grid { display: grid; gap: 1.1rem; }
.weight-row { display: flex; flex-direction: column; gap: .35rem; }
.weight-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.weight-head label { font-weight: 600; font-size: .9rem; color: var(--ink); }
.weight-head label small { display: block; font-weight: 500; font-size: .76rem; color: var(--muted); margin-top: .1rem; }
.weight-val { flex: none; min-width: 2rem; text-align: center; padding: .15rem .5rem; border-radius: 999px; background: #eef4f8; color: var(--accent); font-weight: 700; font-size: .9rem; }
.weight-row.is-max .weight-val { background: #fde8e8; color: #c0392b; }
.weight-row.is-off .weight-val { background: #eef0f2; color: var(--muted); }
.weight-range { width: 100%; accent-color: var(--accent); cursor: pointer; }
.weight-row.is-max .weight-range { accent-color: #c0392b; }
.weight-scale { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); }


/* ===================================================================== */
/* Leads kanban board                                                    */
/* ===================================================================== */
.kanban-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.reports-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.kanban-tabs { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .25rem; gap: .2rem; }
.kanban-tabs .seg { padding: .45rem 1rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.kanban-tabs .seg.on { background: var(--navy); color: #fff; }
.kanban-tools { display: flex; gap: .6rem; flex-wrap: wrap; }

.kanban-board { display: flex; gap: 1rem; align-items: stretch; overflow-x: auto; padding-bottom: 1rem; margin: 0 -2rem; padding-left: 2rem; padding-right: 2rem; }
.kanban-board::-webkit-scrollbar { height: 10px; }
.kanban-board::-webkit-scrollbar-thumb { background: #cdd6e2; border-radius: 999px; }

.kanban-col { flex: 0 0 290px; width: 290px; background: #eef1f6; border-radius: var(--radius); display: flex; flex-direction: column; min-height: 340px; max-height: calc(100vh - 200px); }
.kanban-col-head { position: sticky; top: 0; z-index: 2; padding: .85rem .9rem; border-radius: var(--radius) var(--radius) 0 0; background: var(--col-color, var(--navy)); color: #fff; display: flex; flex-direction: column; gap: .25rem; }
.kanban-col-title { display: flex; align-items: center; gap: .45rem; font-size: .92rem; }
.kanban-col-title strong { flex: 1; font-weight: 700; }
.kanban-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.85); }
.kanban-count { background: rgba(255,255,255,.22); border-radius: 999px; min-width: 1.5rem; text-align: center; padding: .05rem .45rem; font-size: .78rem; font-weight: 700; }
.kanban-col-total { font-size: .82rem; font-weight: 700; opacity: .95; }

.kanban-cards { flex: 1; overflow-y: auto; padding: .7rem; display: flex; flex-direction: column; gap: .6rem; min-height: 60px; }
.kanban-cards.drag-over { background: #e2ebf4; outline: 2px dashed var(--accent); outline-offset: -4px; border-radius: 0 0 var(--radius) var(--radius); }

.kanban-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); cursor: grab; transition: box-shadow .15s, transform .15s, opacity .15s; }
.kanban-card:hover { box-shadow: var(--shadow); }
.kanban-card.dragging { opacity: .55; transform: rotate(1.5deg); cursor: grabbing; }
.kanban-card-link { display: block; padding: .75rem .8rem; color: inherit; }
.kanban-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem; }
.kanban-card-top strong { font-size: .9rem; line-height: 1.25; }
.kanban-chip { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; }
.kanban-chip.unassigned { background: #fff3e0; color: #d97706; }
.kanban-company { display: block; font-size: .78rem; color: var(--accent); font-weight: 600; margin-top: .1rem; }
.kanban-facts { margin: .55rem 0 0; display: flex; flex-direction: column; gap: .2rem; }
.kanban-facts > div { display: flex; justify-content: space-between; gap: .6rem; font-size: .78rem; }
.kanban-facts dt { color: var(--muted); margin: 0; }
.kanban-facts dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; }
.kanban-flag { display: inline-flex; align-items: center; gap: .25rem; margin-top: .5rem; font-size: .7rem; font-weight: 700; padding: .15rem .45rem; border-radius: 6px; }
.kanban-flag.stale { background: #fef3e2; color: #d97706; }

@media (max-width: 700px) {
    .kanban-board { margin: 0 -1.1rem; padding-left: 1.1rem; padding-right: 1.1rem; }
    .kanban-col { flex-basis: 80vw; width: 80vw; }
}


/* ===================================================================== */
/* Listing photo picker (upload / camera / old media)                    */
/* ===================================================================== */
.media-picker { display: flex; flex-direction: column; gap: .9rem; }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.media-empty { grid-column: 1 / -1; margin: 0; padding: 1rem; text-align: center; font-size: .82rem; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius-sm); background: #fafbfc; }
.media-thumb { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: #eef1f6; cursor: grab; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-thumb.broken img { display: none; }
.media-thumb.broken::after { content: 'Image unavailable'; position: absolute; inset: 0; display: grid; place-items: center; font-size: .7rem; color: var(--muted); }
.media-thumb.dragging { opacity: .5; }
.media-main-badge { position: absolute; left: .35rem; top: .35rem; display: none; align-items: center; gap: .2rem; background: var(--navy); color: #fff; font-size: .65rem; font-weight: 700; padding: .15rem .4rem; border-radius: 6px; }
.media-thumb.is-main .media-main-badge { display: inline-flex; }
.media-remove { position: absolute; right: .3rem; top: .3rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: none; background: rgba(23,63,53,.72); color: #fff; display: grid; place-items: center; cursor: pointer; line-height: 1; transition: background .15s; }
.media-remove:hover { background: #c0392b; }

.media-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.media-act { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .7rem .4rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; cursor: pointer; transition: .15s; text-align: center; }
.media-act:hover { border-color: var(--accent); background: #f6fafc; color: var(--accent); }
.media-act svg { color: var(--accent); }
.media-act span { font-size: .82rem; font-weight: 700; }
.media-act small { font-size: .66rem; color: var(--muted); }
.media-act:hover small { color: var(--accent); }

.media-uploading { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--muted); }
.media-spinner { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: media-spin .7s linear infinite; }
@keyframes media-spin { to { transform: rotate(360deg); } }

.media-lib-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(23,63,53,.55); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.media-lib-overlay[hidden] { display: none; }
.media-lib-card { background: #fff; border-radius: var(--radius); width: 100%; max-width: 720px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow); }
.media-lib-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.media-lib-head strong { display: inline-flex; align-items: center; gap: .5rem; font-size: 1rem; }
.media-lib-close { border: none; background: none; cursor: pointer; color: var(--muted); padding: .25rem; border-radius: 6px; }
.media-lib-close:hover { background: var(--bg); color: var(--ink); }
.media-lib-search { padding: .8rem 1.2rem 0; }
.media-lib-search input { width: 100%; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: .88rem; }
.media-lib-grid { flex: 1; overflow-y: auto; padding: 1rem 1.2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; align-content: start; }
.media-lib-loading { grid-column: 1 / -1; text-align: center; padding: 2rem 0; }
.media-lib-item { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: #eef1f6; }
.media-lib-item img { width: 100%; height: 100%; object-fit: cover; }
.media-lib-item.picked { border-color: var(--accent); }
.media-lib-item.picked::after { content: '✓'; position: absolute; right: .3rem; top: .15rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 700; }
.media-lib-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.2rem; border-top: 1px solid var(--line); }
body.media-lib-open { overflow: hidden; }

@media (max-width: 540px) {
    .media-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===================================================================== */
/* Comprehensive mobile polish                                           */
/* ===================================================================== */
@media (max-width: 820px) {
    /* Leads filter bar — stack neatly instead of wrapping chaotically. */
    .leads-toolbar { flex-direction: column; align-items: stretch; gap: .65rem; }
    .lead-filters { gap: .5rem; }
    .lf-search { flex: 1 1 100%; max-width: none; min-width: 0; }
    .lf-select { flex: 1 1 calc(50% - .25rem); min-width: 0; }
    .lf-toggle { flex: 1 1 100%; justify-content: center; }
    .lf-apply, .lf-clear { flex: 1 1 auto; justify-content: center; }
    .leads-toolbar > .btn { flex: 1 1 calc(50% - .35rem); justify-content: center; }
    .lead-sort { width: 100%; }
    .lead-sort .ls-select { width: 100%; }
}

@media (max-width: 720px) {
    .admin-content { padding: 1rem; }
    .panel { padding: 1.1rem 1.05rem; }
    .panel-head { flex-wrap: wrap; gap: .5rem; }

    /* Lead detail header + actions stack and fill the width. */
    .lead-head { flex-direction: column; align-items: stretch; gap: .7rem; }
    .lead-head-actions { gap: .5rem; }
    .lead-head-actions .status-form { flex: 1 1 100%; }
    .lead-head-actions .status-form select { width: 100%; }
    .lead-head-actions > form, .lead-head-actions > .btn { flex: 1 1 calc(50% - .35rem); }
    .lead-head-actions .btn { width: 100%; justify-content: center; }

    /* Auto-matched listing cards: let the meta wrap, keep the score + view on the right. */
    .match-item { gap: .7rem; padding: .7rem; }
    .match-item .cell-thumb { width: 56px; height: 44px; }
    .match-right { flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
    .match-right .btn { flex: none; }

    /* Calendar event modal — single column date fields, contained inputs. */
    .cal-form-row { grid-template-columns: 1fr; }
    .cal-modal { padding: 4vh .8rem; }
    .cal-form { padding: 1.1rem; gap: .85rem; }
    .cal-form-actions { gap: .5rem; }
    .cal-form-actions .btn { flex: 1 1 auto; justify-content: center; }

    /* Modals breathe on small screens. */
    .offer-modal, .why-modal { padding: 1rem .8rem; }

    /* Reports + generic two-up grids collapse. */
    .reports-head { flex-direction: column; align-items: stretch; }
    .kanban-toolbar { gap: .65rem; }
    .kanban-tabs { width: 100%; justify-content: center; }
    .kanban-tools { width: 100%; }
    .kanban-tools .btn { flex: 1 1 auto; justify-content: center; }

    /* Viewing-note input stays inside its card. */
    .viewed-comment-form { flex: 1 1 100%; }
    .viewed-comment-form input[type=text] { min-width: 0; }
}

@media (max-width: 420px) {
    .lf-select { flex: 1 1 100%; }
    .lead-head-actions > form, .lead-head-actions > .btn { flex: 1 1 100%; }
    .leads-toolbar > .btn { flex: 1 1 100%; }
    .match-item { flex-wrap: wrap; }
    .match-item .match-info { flex: 1 1 100%; order: 2; }
    .match-right { flex: 1 1 100%; order: 3; justify-content: flex-start; }
}

/* ===================================================================== */
/* Dashboard stock map (all active listings)                             */
/* ===================================================================== */
.dash-map { height: 460px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); position: relative; z-index: 0; isolation: isolate; }
.nlc-pin { background: none; border: 0; }
.nlc-pin-dot { display: block; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; background: var(--accent); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); transform: rotate(-45deg); }
.map-pop { display: block; width: 200px; color: var(--navy); text-decoration: none; }
.map-pop-img { display: block; width: 100%; height: 104px; object-fit: cover; border-radius: 8px; margin-bottom: .5rem; background: #eef1f6; }
.map-pop strong { display: block; font-size: .92rem; margin-bottom: .15rem; }
.map-pop span { display: block; font-size: .78rem; color: var(--muted); }
.map-pop-price { margin-top: .35rem; font-weight: 700; color: var(--accent) !important; }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: color-mix(in srgb, var(--accent) 25%, transparent); }
/* map layer toggle (street / satellite) */
.leaflet-control-layers { border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 2px 8px rgba(20,54,46,.12); }
.leaflet-control-layers-toggle { width: 36px; height: 36px; background-size: 20px 20px; }
.leaflet-control-layers-expanded { padding: .5rem .7rem; color: var(--navy); font-weight: 600; font-size: .85rem; }
.leaflet-control-layers label { display: flex; align-items: center; gap: .4rem; margin: .15rem 0; cursor: pointer; }
.leaflet-control-layers-selector { accent-color: var(--accent); margin: 0; }
.dash-map-empty { display: grid; place-items: center; height: 460px; border-radius: var(--radius); border: 1px dashed var(--line); color: var(--muted); text-align: center; gap: .5rem; }

/* ===================================================================== */
/* Company settings (branding + theme)                                   */
/* ===================================================================== */
.brand-up { display: flex; flex-direction: column; gap: .6rem; }
.brand-up-label { font-weight: 600; font-size: .9rem; }
.brand-up-prev { display: flex; align-items: center; justify-content: center; height: 104px; padding: .8rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.brand-up-prev img { max-height: 72px; max-width: 100%; width: auto; object-fit: contain; }
.brand-up-prev--wide img { max-height: 56px; }
.brand-up input[type="file"] { width: 100%; padding: .4rem .5rem; font-size: .82rem; color: var(--muted); cursor: pointer; }
.brand-up input[type="file"]::file-selector-button { margin-right: .75rem; padding: .5rem .95rem; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font-family: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .15s ease, box-shadow .15s ease; box-shadow: 0 4px 10px rgba(196,95,54,.25); }
.brand-up input[type="file"]:hover::file-selector-button { background: var(--accent-600); box-shadow: 0 6px 14px rgba(196,95,54,.32); }
.brand-up input[type="file"]:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,95,54,.12); }
.brand-up-remove { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--muted); font-weight: 500; }

.theme-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.color-field { display: flex; flex-direction: column; gap: .45rem; font-size: .9rem; font-weight: 600; }
.color-field small { font-weight: 500; }
.color-row { display: flex; align-items: center; gap: .55rem; }
.color-row input[type="color"] { width: 46px; height: 40px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; flex: none; }
.color-row input[type="text"] { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; font-size: .85rem; }

.theme-preview { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.tp-bar { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; background: var(--p); color: #fff; font-weight: 700; font-size: .85rem; letter-spacing: .02em; }
.tp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--a); }
.tp-body { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; padding: 1rem; background: var(--white); }
.tp-btn { font: inherit; font-weight: 600; font-size: .85rem; padding: .55rem 1rem; border-radius: 999px; border: 1px solid transparent; cursor: default; }
.tp-btn-primary { background: var(--s); color: #fff; }
.tp-btn-secondary { background: transparent; color: var(--s); border-color: var(--s); }
.tp-badge { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .3rem .6rem; border-radius: 999px; background: var(--a); color: var(--p); }
.tp-link { color: var(--s); font-weight: 600; font-size: .88rem; text-decoration: underline; }

/* ===================================================================== */
/* Per-broker report (admin/agent-report.php)                            */
/* ===================================================================== */
.report-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.report-toolbar-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.broker-report-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; }
.brh-id { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.brh-photo img { width: 84px; height: 84px; border-radius: 18px; object-fit: cover; background: var(--bg); }
.brh-photo img.img-fallback { background: var(--bg); }
.brh-meta { min-width: 0; }
.brh-meta h2 { margin: .35rem 0 .1rem; font-size: 1.45rem; line-height: 1.1; }
.brh-meta > .role-chip { display: inline-block; }
.brh-contact { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: .55rem 0 0; font-size: .85rem; }
.brh-contact a, .brh-contact span { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); text-decoration: none; }
.brh-contact a:hover { color: var(--accent); }
.brh-score { display: flex; flex-direction: column; align-items: center; gap: .5rem; flex: none; }
.brh-rank { font-size: .78rem; font-weight: 600; color: var(--muted); }
.perf-ring { --v: 0; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; text-align: center; position: relative; background: conic-gradient(var(--accent) calc(var(--v) * 1%), var(--line) 0); }
.perf-ring::before { content: ""; position: absolute; inset: 8px; background: var(--white, #fff); border-radius: 50%; }
.perf-ring strong, .perf-ring small { position: relative; z-index: 1; line-height: 1; }
.perf-ring strong { font-size: 1.5rem; font-weight: 800; color: var(--navy, #173F35); }
.perf-ring small { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: .2rem; }

.pipeline-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--bg); margin-bottom: .9rem; }
.pipeline-seg { min-width: 4px; }
.pipeline-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; }
.pl-item { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; }
.pl-item.muted { opacity: .5; }
.pl-item strong { font-weight: 800; }
.pl-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }

.mini-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.mini-feed li { display: flex; align-items: flex-start; gap: .65rem; }
.mf-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--bg); color: var(--accent); }
.mini-feed strong { display: block; font-size: .88rem; }
.mini-feed small { display: block; }
.lv-approved { color: #16a34a; font-weight: 700; }
.lv-pending { color: #d97706; font-weight: 700; }
.lv-denied { color: #c0392b; font-weight: 700; }

@media print {
    .admin-sidebar, .admin-top, .no-print, .loading-overlay, .sidebar-backdrop { display: none !important; }
    .admin-main { margin: 0 !important; }
    .admin-content { padding: 0 !important; }
    body.admin-body { background: #fff !important; }
    .panel, .broker-report-hero, .stat-card { break-inside: avoid; box-shadow: none; }
    .report-table { font-size: .8rem; }
}

@media (max-width: 560px) {
    .broker-report-hero { flex-direction: column; align-items: flex-start; }
    .report-toolbar, .report-toolbar-actions { width: 100%; }
    .report-toolbar-actions .btn { flex: 1 1 auto; justify-content: center; }
}