/* ============================================================
   OBProperty — condo + unit picker (master-detail popover).
   Self-scoped under .obprop-* so it drops onto any page.
   Pairs with js/ob-property.js.
   ============================================================ */
.obprop-anchor { position: relative; display: block; width: 100%; }
/* Headless: the anchor wraps the caller's own button, so it must not claim the full row. */
.obprop-anchor.obprop-headless { display: inline-flex; width: auto; }

/* ---------- trigger ---------- */
.obprop-trigger {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px;
  border-radius: 12px; cursor: pointer; border: 1px solid var(--ob-line, #E6E9EE);
  background: var(--ob-card, #fff); font-family: inherit; text-align: left; transition: all .12s;
}
.obprop-trigger:hover { border-color: var(--acc, #0F9E8E); }
.obprop-trigger.open { border-color: var(--acc, #0F9E8E); box-shadow: 0 0 0 3px var(--acc-soft, #E4F5F1); }
.obprop-trigger .ti {
  width: 34px; height: 34px; border-radius: 10px; flex: none; display: inline-flex;
  align-items: center; justify-content: center; font-size: 15px;
  background: var(--ob-line-soft, #F0F2F5); color: var(--ob-faint, #9AA3AF);
}
.obprop-trigger .ti.one, .obprop-trigger .ti.many { background: var(--acc, #0F9E8E); color: #fff; }
.obprop-trigger .ti.all { background: var(--ob-warning, #B7791F); color: #fff; }
.obprop-trigger .tt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.obprop-trigger .tt b { font-size: 13.5px; font-weight: 650; color: var(--ob-ink, #101720); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obprop-trigger .tt span { font-size: 11px; color: var(--ob-muted, #6A7482); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obprop-trigger .tt .ph { font-size: 13px; color: var(--ob-faint, #9AA3AF); }
.obprop-trigger.whole .tt b { color: var(--ob-warning, #B7791F); }
.obprop-trigger .cv { margin-left: auto; color: var(--ob-faint, #9AA3AF); font-size: 12px; flex: none; }

/* ---------- popover ---------- */
/* .up / .rt are set by the control at open time when the popover wouldn't fit below / to the right
   of its anchor. Without them a trigger low on the page opens Apply off the bottom of the screen. */
.obprop-pop.up { top: auto; bottom: calc(100% + 7px); }
.obprop-pop.rt { left: auto; right: 0; }
.obprop-pop {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 2147482000;
  width: min(560px, 92vw); background: var(--ob-card, #fff);
  border: 1px solid var(--ob-line, #E6E9EE); border-radius: 15px; overflow: hidden;
  box-shadow: 0 18px 44px -12px rgba(17,19,34,.26), 0 5px 14px -6px rgba(17,19,34,.10);
}
.obprop-panes { display: grid; grid-template-columns: 196px minmax(0, 1fr); min-height: 292px; }
.obprop-pane { min-width: 0; display: flex; flex-direction: column; }
.obprop-pane.left { border-right: 1px solid var(--ob-line-soft, #F0F2F5); background: #FCFCFD; }
.obprop-hd {
  padding: 11px 13px 9px; font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ob-faint, #9AA3AF);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.obprop-srch { position: relative; padding: 0 11px 9px; }
.obprop-srch .bi { position: absolute; left: 21px; top: 9px; color: var(--ob-faint, #9AA3AF); font-size: 12px; }
.obprop-srch input {
  width: 100%; height: 34px; padding: 0 10px 0 29px; border: 1px solid var(--ob-line, #E6E9EE);
  border-radius: 9px; font-family: inherit; font-size: 12.5px; outline: none;
  color: var(--ob-ink, #101720); background: var(--ob-card, #fff);
}
.obprop-srch input:focus { border-color: var(--acc, #0F9E8E); box-shadow: 0 0 0 3px var(--acc-soft, #E4F5F1); }

/* left: buildings */
.obprop-clist { overflow-y: auto; flex: 1; padding: 0 7px 9px; display: flex; flex-direction: column; gap: 2px; }
.obprop-clist .c {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; cursor: pointer;
  border: none; background: none; font-family: inherit; font-size: 12.5px;
  color: var(--ob-slate, #3A4453); text-align: left; width: 100%; transition: all .1s; position: relative;
}
.obprop-clist .c:hover { background: var(--ob-line-soft, #F0F2F5); }
.obprop-clist .c .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.obprop-clist .c .ct { font-family: var(--mono, monospace); font-size: 10px; color: var(--ob-faint, #9AA3AF); flex: none; }
.obprop-clist .c.on { background: var(--acc-soft, #E4F5F1); color: var(--acc-deep, #0B7A6C); font-weight: 700; }
.obprop-clist .c.on::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--acc, #0F9E8E);
}
.obprop-clist .c.on .ct { color: var(--acc-deep, #0B7A6C); }
.obprop-clist .c .sel {
  font-family: var(--mono, monospace); font-size: 9.5px; font-weight: 700; color: #fff;
  background: var(--acc, #0F9E8E); border-radius: 999px; padding: 1px 5px; flex: none;
}
.obprop-clist .c.whole .sel { background: var(--ob-warning, #B7791F); }

/* right: units */
.obprop-ubar { display: flex; align-items: center; gap: 8px; padding: 0 13px 9px; }
.obprop-ubar .n { font-size: 11.5px; color: var(--ob-muted, #6A7482); font-family: var(--mono, monospace); }
.obprop-ubar .lnk {
  margin-left: auto; border: none; background: none; font-family: inherit; font-size: 11.5px;
  font-weight: 650; color: var(--acc-deep, #0B7A6C); cursor: pointer; padding: 3px 6px; border-radius: 7px;
}
.obprop-ubar .lnk:hover { background: var(--acc-soft, #E4F5F1); }

/* 3 across — unit numbers are short, one per row wasted the width */
.obprop-ulist {
  flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px; padding: 0 13px 12px; align-content: start;
}
.obprop-ulist .u {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--ob-line, #E6E9EE); background: var(--ob-card, #fff); font-family: inherit;
  font-size: 13px; color: var(--ob-slate, #3A4453); text-align: left; width: 100%; min-width: 0; transition: all .1s;
}
.obprop-ulist .u:hover { border-color: var(--acc, #0F9E8E); background: var(--acc-soft, #E4F5F1); }
.obprop-ulist .u.on { background: var(--acc-soft, #E4F5F1); border-color: var(--acc, #0F9E8E); color: var(--acc-deep, #0B7A6C); font-weight: 650; }
.obprop-ulist .u .no { font-family: var(--mono, monospace); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Checkbox visible before the first click — otherwise people assume unit 2 replaces unit 1. */
.obprop-ulist .u .bx {
  width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--ob-line, #E6E9EE); flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; background: #fff;
}
.obprop-ulist .u.on .bx { background: var(--acc, #0F9E8E); border-color: var(--acc, #0F9E8E); }
/* "All units" is a different KIND of choice, not the first item in a list. */
.obprop-ulist .u.all { grid-column: 1 / -1; border-style: dashed; }
.obprop-ulist .u.all .ic { color: var(--ob-warning, #B7791F); }
.obprop-ulist .u.all .tag {
  margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; opacity: .75;
}
.obprop-ulist .u.all.on { background: #FBF1DE; border-color: var(--ob-warning, #B7791F); border-style: solid; color: var(--ob-warning, #B7791F); }
.obprop-ulist .u.all.on .bx { background: var(--ob-warning, #B7791F); border-color: var(--ob-warning, #B7791F); }

.obprop-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 13px 12px; }
.obprop-chips .chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; border-radius: 999px;
  background: var(--acc-soft, #E4F5F1); border: 1px solid var(--acc, #0F9E8E); color: var(--acc-deep, #0B7A6C);
  font-size: 11.5px; font-weight: 650; font-family: var(--mono, monospace);
}
.obprop-chips .chip button { border: none; background: none; cursor: pointer; color: inherit; font-size: 12px; padding: 0 1px; line-height: 1; }
.obprop-chips .chip button:hover { color: var(--ob-danger, #C8472F); }

.obprop-empty { font-size: 12.5px; color: var(--ob-faint, #9AA3AF); padding: 12px 4px; text-align: center; }
.obprop-empty.pad { padding: 60px 20px; }
.obprop-empty.span { grid-column: 1 / -1; padding: 20px 4px; }

.obprop-foot {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-top: 1px solid var(--ob-line-soft, #F0F2F5); background: #FCFCFD;
}
.obprop-foot .sofar {
  font-size: 11.5px; color: var(--ob-muted, #6A7482); margin-left: auto;
  font-family: var(--mono, monospace); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.obprop-foot .ghost {
  border: 1px solid var(--ob-line, #E6E9EE); background: none; border-radius: 9px; padding: 7px 13px;
  cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ob-muted, #6A7482); flex: none;
}
.obprop-foot .ghost:hover { border-color: var(--ob-danger, #C8472F); color: var(--ob-danger, #C8472F); }
.obprop-foot .apply {
  border: none; background: var(--acc, #0F9E8E); color: #fff; border-radius: 9px; padding: 8px 17px;
  cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; flex: none;
}
.obprop-foot .apply:hover { filter: brightness(.95); }

.obprop-back { display: none; }
/* Phone: one pane at a time with a back link — two 90px columns would make both unusable. */
@media (max-width: 620px) {
  .obprop-panes { grid-template-columns: minmax(0, 1fr); }
  .obprop-pane.left { border-right: none; border-bottom: 1px solid var(--ob-line-soft, #F0F2F5); }
  .obprop-panes.picked .obprop-pane.left { display: none; }
  .obprop-panes:not(.picked) .obprop-pane.right { display: none; }
  .obprop-ulist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .obprop-back {
    display: inline-flex; align-items: center; gap: 6px; border: none; background: none;
    font-family: inherit; font-size: 12px; font-weight: 650; color: var(--acc-deep, #0B7A6C);
    cursor: pointer; padding: 11px 13px 4px;
  }
}