/* Hawaii Real Estate theme for the CRM (loaded last). Same palette and type as the website:
   navy #1e3a8a, red #b91c1c, Poppins headings, Inter text. Only colours, type and finish change;
   layout and data are untouched. Light is the default, dark is a deep navy. */

html[data-theme="light"]{
  --c-bg:#f5f7fb;--c-surface:#ffffff;--c-surface-2:#f1f4f9;--c-raised:#ffffff;
  --c-border:rgba(15,31,77,.10);--c-border-strong:rgba(15,31,77,.18);
  --c-text:#0b1530;--c-muted:#5b6475;--c-faint:#8b93a3;
  --c-accent:#1e3a8a;--c-accent-soft:rgba(30,58,138,.08);--c-accent-text:#1e3a8a;
  --c-danger:#b91c1c;
  --shadow:0 1px 2px rgba(15,31,77,.05),0 8px 24px rgba(15,31,77,.07);
  --hre-red:#b91c1c;--hre-navy:#1e3a8a;--hre-logo:#1e3a8a;
}
:root:not([data-theme="light"]){
  --c-bg:#0a1124;--c-surface:#0f1830;--c-surface-2:#14203d;--c-raised:#18264a;
  --c-border:rgba(148,170,220,.13);--c-border-strong:rgba(148,170,220,.24);
  --c-text:#e9eefb;--c-muted:#97a3bf;--c-faint:#66728f;
  --c-accent:#4c6fe0;--c-accent-soft:rgba(76,111,224,.16);--c-accent-text:#a9bcff;
  --c-danger:#f05252;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.25);
  --hre-red:#f05252;--hre-navy:#4c6fe0;--hre-logo:#ffffff;
}

/* type: Inter for text, Poppins for headings and numbers that act as headings */
body.crmPremium{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;text-rendering:optimizeLegibility}
body.crmPremium :is(h1,h2,h3,.crmPageHead h1,.mainHeader h1,.kpiValue,.crmStage b,.v7Brand){font-family:Poppins,Inter,system-ui,sans-serif!important}
body.crmPremium :is(h1,.mainHeader h1,.crmPageHead h1){font-weight:700!important;letter-spacing:-.015em!important}

/* No logo anywhere in the CRM (it is a private tool); the website keeps its own. */

/* login card */
body.crmPremium #loginView{background:var(--c-surface)!important;border:1px solid var(--c-border)!important;box-shadow:var(--shadow)!important;border-radius:20px!important}
body.crmPremium #loginView h1{font-size:20px!important;text-align:center;margin:0 0 4px!important;color:var(--c-text)!important}
body.crmPremium #loginView .sub{text-align:center;color:var(--c-muted)!important;margin-bottom:18px!important}

/* sidebar: navy active item with the website's red marker */
body.crmPremium #v7Topbar{background:var(--c-surface)!important;border-color:var(--c-border)!important}
body.crmPremium #v7Topbar .v7Nav button{transition:background .15s ease,color .15s ease!important}
body.crmPremium #v7Topbar .v7Nav button.active{background:var(--c-accent-soft)!important;color:var(--c-accent-text)!important;box-shadow:inset 3px 0 0 var(--hre-red)!important}
body.crmPremium #v7Topbar .v7Nav button:not(.active):hover{background:var(--c-surface-2)!important}

/* buttons: primary = navy like the website, hover a shade darker */
body.crmPremium :is(.crmBtnPrimary,.primaryBtn,button.crmBtn.crmBtnPrimary){background:var(--c-accent)!important;border-color:var(--c-accent)!important;color:#fff!important}
html[data-theme="light"] body.crmPremium :is(.crmBtnPrimary,.primaryBtn):hover{background:#172e6e!important;border-color:#172e6e!important}
:root:not([data-theme="light"]) body.crmPremium :is(.crmBtnPrimary,.primaryBtn):hover{background:#3d5ed0!important;border-color:#3d5ed0!important}
body.crmPremium :is(.crmBtn,.darkBtn,.primaryBtn,.callBtn,.profileBtn,.copyBtn,button){transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .1s ease}
body.crmPremium :is(.crmBtn,.darkBtn,.primaryBtn):active{transform:translateY(1px)}
body.crmPremium :is(input,select,textarea):focus-visible{outline:none!important;border-color:var(--c-accent)!important;box-shadow:0 0 0 3px var(--c-accent-soft)!important}
body.crmPremium :is(button,a):focus-visible{outline:2px solid var(--c-accent)!important;outline-offset:2px}
body.crmPremium .crmBtnDanger{color:var(--c-danger)!important}

/* cards and tables: a touch more air and the website's soft navy shadow */
body.crmPremium :is(.crmCard,.card,.kpiCard,.dashboardCards>div,.pbCard,.crmSideGroup){box-shadow:var(--shadow)!important;border-color:var(--c-border)!important}
body.crmPremium :is(#ownersTable,#leadsView .leadsTable) tbody tr{transition:background-color .12s ease}
body.crmPremium :is(#ownersTable,#leadsView .leadsTable) thead th{color:var(--c-muted)!important;font-weight:600!important;letter-spacing:.04em!important}
html[data-theme="light"] body.crmPremium :is(#ownersTable,#leadsView .leadsTable) thead th{background:#f7f9fc!important}

/* smooth page changes, respecting reduced-motion settings */
@media (prefers-reduced-motion:no-preference){
  body.crmPremium :is(#appView,#leadsView,#dashboardView,#crmCalendarView,#crmBreakdownView):not(.hidden){animation:hreIn .18s ease-out}
  @keyframes hreIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  html{scroll-behavior:smooth}
}
body.crmPremium ::selection{background:rgba(30,58,138,.18)}

/* scrollbars: thin and quiet instead of the old black bar */
body.crmPremium :is(.tablebox,.pbPreview,.crmMenu,.pbSavedList){scrollbar-width:thin;scrollbar-color:var(--c-border-strong) transparent}
body.crmPremium :is(.tablebox,.pbPreview)::-webkit-scrollbar{width:10px;height:10px;background:transparent}
body.crmPremium :is(.tablebox,.pbPreview)::-webkit-scrollbar-thumb{background:var(--c-border-strong);border-radius:10px;border:3px solid var(--c-surface)}
body.crmPremium :is(.tablebox,.pbPreview)::-webkit-scrollbar-track{background:transparent}

/* BR and Size columns */
body.crmPremium #ownersTable :is(td.owner-col-beds,td.owner-col-size,td.owner-col-lastprice){font-variant-numeric:tabular-nums;font-weight:600}
body.crmPremium #ownersTable td.owner-col-beds{text-align:center!important}
body.crmPremium #ownersTable th.owner-col-beds{text-align:center!important}
body.crmPremium #ownersTable .crmUD small{display:block;font-size:11px;font-weight:500;color:var(--c-muted);margin-top:1px}
body.crmPremium .crmRecordCard .crmUD{font-weight:500;color:var(--c-muted)}

/* compact owners table: community under the cluster, action buttons may wrap to two lines */
body.crmPremium #ownersTable .crmSubLoc{display:block;font-size:11px;font-weight:500;color:var(--c-muted);margin-top:1px}
body.crmPremium #ownersTable .crmOwnerActions{flex-wrap:wrap!important;row-gap:4px!important}
body.crmPremium #ownersTable td.owner-col-status .statusSelect{width:100%!important;min-width:0!important}
body.crmPremium #appView #ownersTable td{padding:10px 8px!important}
body.crmPremium #appView #ownersTable th{padding-left:8px!important;padding-right:8px!important}
body.crmPremium #appView #ownersTable :is(th,td).owner-col-actions{width:172px!important;min-width:172px!important;max-width:172px!important}

/* Cluster Data page */
#crmClusterDataView{padding:22px 28px 40px}
#crmClusterDataView .cdTop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 16px}
#crmClusterDataView .cdTop h1{margin:0}
#crmClusterDataView .cdSub{margin:4px 0 0;font-size:12.5px;color:var(--c-muted)}
#crmClusterDataView .cdPick{display:flex;gap:8px;flex-wrap:wrap}
#crmClusterDataView .cdPick select{height:40px;min-width:200px;margin:0;border-radius:10px;font-size:14px}
#crmClusterDataView .cdEmpty{padding:40px 16px;text-align:center;border:1px dashed var(--c-border-strong);border-radius:14px;color:var(--c-muted)}
#crmClusterDataView .cdCards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 14px}
#crmClusterDataView .cdCard{background:var(--c-surface);border:1px solid var(--c-border);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
#crmClusterDataView .cdCard span{display:block;font-size:12px;color:var(--c-muted);font-weight:600}
#crmClusterDataView .cdCard strong{display:block;font-family:Poppins,Inter,sans-serif;font-size:20px;margin:4px 0 2px;color:var(--c-text)}
#crmClusterDataView .cdCard small{font-size:12px;color:var(--c-muted)}
#crmClusterDataView .crmCard{padding:14px 16px;margin:0 0 14px;border-radius:14px}
#crmClusterDataView .cdTableHead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 10px}
#crmClusterDataView .cdTableHead h2{margin:0;font-size:17px}
#crmClusterDataView .cdTableHead h2 small{font-size:12.5px;color:var(--c-muted);font-weight:500;margin-left:6px}
#crmClusterDataView .cdTableHead input{height:38px;width:280px;max-width:100%;margin:0;border-radius:10px}
#crmClusterDataView .cdTools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#crmClusterDataView .cdTableWrap{overflow:auto;max-height:66vh;border:1px solid var(--c-border);border-radius:12px}
#crmClusterDataView .cdTable{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;font-variant-numeric:tabular-nums}
#crmClusterDataView .cdTable th{position:sticky;top:0;z-index:1;background:var(--c-surface-2);text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--c-muted);padding:10px;white-space:nowrap;cursor:pointer;user-select:none}
#crmClusterDataView .cdTable th[data-dir="asc"] i::after{content:" ▲";font-size:9px}
#crmClusterDataView .cdTable th[data-dir="desc"] i::after{content:" ▼";font-size:9px}
#crmClusterDataView .cdDldTable th{cursor:default}
#crmClusterDataView .cdTable td{padding:9px 10px;border-top:1px solid var(--c-border);vertical-align:middle;color:var(--c-text)}
#crmClusterDataView .cdTable td small{display:block;font-size:11px;color:var(--c-muted)}
#crmClusterDataView .cdTable .cdNum{text-align:right}
#crmClusterDataView .cdTable tbody tr[data-owner]:not([data-owner=""]){cursor:pointer}
#crmClusterDataView .cdTable tbody tr:hover td{background:var(--c-accent-soft)}
#crmClusterDataView .cdStatus{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;border:1px solid transparent;margin:1px 0;white-space:nowrap}
@media (max-width:900px){#crmClusterDataView{padding:14px 12px 40px}#crmClusterDataView .cdCards{grid-template-columns:repeat(2,minmax(0,1fr))}#crmClusterDataView .cdPick select{min-width:0;flex:1}}

/* one row per unit: "+N co-owners" under the owner name, and its pop-up list */
body.crmPremium #ownersTable .crmCoOwners{display:inline-block;margin:3px 0 0;padding:1px 8px;border-radius:999px;border:1px solid var(--c-border-strong);background:var(--c-surface-2);color:var(--c-accent-text);font-size:11px;font-weight:600;line-height:1.6;cursor:pointer;min-height:0;height:auto}
body.crmPremium #ownersTable .crmCoOwners[hidden]{display:none}
.crmCoPop{position:absolute;z-index:10060;width:min(340px,calc(100vw - 24px));background:var(--c-surface,#fff);color:var(--c-text,#0f172a);border:1px solid var(--c-border,#e5e7eb);border-radius:14px;box-shadow:0 18px 40px rgba(15,23,42,.2);padding:10px}
.crmCoPop header{display:flex;justify-content:space-between;align-items:center;margin:0 0 6px;font-size:13px}
.crmCoPop header button{border:0;background:none;font-size:18px;cursor:pointer;color:var(--c-muted)}
.crmCoPop ul{list-style:none;margin:0;padding:0;max-height:300px;overflow:auto}
.crmCoPop li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 4px;border-top:1px solid var(--c-border)}
.crmCoPop li strong{display:block;font-size:13px}
.crmCoPop li span{display:block;font-size:12px;color:var(--c-muted)}
.crmCoPop li .crmBtn{margin:0;flex:none}
.crmAdvField:has(#allOwnerRecords){flex-direction:row-reverse!important;justify-content:flex-end;align-items:center;gap:8px}