/* ============================================================================
 * bwc-list — the Listings table (views/properties/index.php)
 *
 * Purpose-built and self-contained ON PURPOSE.
 *
 * This table previously used Bitrix's genuine main.ui.grid.css together with
 * its real .main-grid-* markup. That stylesheet is written for the
 * main.ui.grid PHP/JS component, which an external marketplace app cannot run.
 * Everything that component does at runtime — assigning every column an
 * explicit width, positioning the "ear" scroll buttons, the sticky header —
 * has to be re-supplied by hand, and each of those gaps caused its own round
 * of visible breakage (rows ballooning to 234px, thumbnails at full size,
 * columns shearing; see the plan file's history). Rather than keep patching a
 * stylesheet whose runtime assumptions we can't satisfy, this file owns the
 * list outright and depends on no JS to lay itself out.
 *
 * The LOOK is still Bitrix's, taken from its real specs/design tokens:
 * head cells 14px weight-400 #535c69 (NOT uppercase) on #fff with an #edeef0
 * underline; body 14px #535c69 with #eef2f4 row separators; hover #f6f8f9;
 * Helvetica Neue via --ui-font-family-primary.
 *
 * LAYOUT: `table-layout: fixed` + an explicit <colgroup> is the same technique
 * main.ui.grid's JS applies at runtime, just declared up front. Note that
 * `table-layout: fixed` WITHOUT declared widths is the exact trap that
 * previously split the container evenly across 13 columns; the <colgroup> in
 * the markup is therefore load-bearing, not decoration. `min-width` keeps the
 * columns legible and lets the box scroll sideways instead of crushing them.
 * ========================================================================= */

/* The scroll box. Height is capped by sizeGridBox() in views/footer.php so the
   horizontal scrollbar stays on screen: this app's iframe renders at full
   content height inside Bitrix's slider, so an uncapped list puts its own
   scrollbar hundreds of px below the fold where it can never be reached.
   The max-height here is only a pre-JS fallback. */
.bwc-list-box {
	background: #fff;
	border: 1px solid #e6e8ea;
	border-radius: var(--ui-border-radius-2xs, 4px);
	overflow: auto;
	max-height: 60vh;
	/* Do NOT add `scroll-behavior: smooth` here. It turns even a plain
	   `scrollLeft = x` assignment into an animation, and animations are a
	   silent no-op wherever the page isn't being painted — which makes the ear
	   buttons do nothing at all. Measured: with it, 0px moved; without it, the
	   full amount. An instant jump that always works beats a glide that
	   sometimes doesn't. */
}

.bwc-list {
	table-layout: fixed;
	width: 100%;
	/* Sum of the fixed columns (1208px) + a still-usable Details column. Below
	   this the box scrolls sideways rather than squeezing the columns. Keep it
	   UNDER a real slider's inner width (~1495px at a 1600px slider) or the
	   table overruns by a few px and draws a horizontal scrollbar for nothing;
	   above that width `width:100%` takes over and Details absorbs the slack. */
	min-width: 1440px;
	/* separate (not collapse) so the sticky header keeps its bottom border —
	   collapsed borders belong to the table, not the cell, and detach on scroll. */
	border-collapse: separate;
	border-spacing: 0;
	font-family: var(--ui-font-family-primary, "Helvetica Neue", Arial, sans-serif);
	font-size: 14px;
	color: #535c69;
	background: #fff;
}

/* ---- column widths (see LAYOUT note above) — fixed total: 1208px ----
   Type and Portals are 116px because their content MEASURED 89px + 24px cell
   padding. Don't shrink them on looks alone: at 84/96px the bathroom count and
   the 4th portal icon were silently clipped (the cell still reported its full
   width — only scrollWidth vs clientWidth reveals it). */
.bwc-c-check   { width: 40px; }
.bwc-c-act     { width: 44px; }
.bwc-c-ref     { width: 96px; }
.bwc-c-details { /* no width: absorbs whatever is left over */ }
.bwc-c-type    { width: 116px; }
.bwc-c-size    { width: 96px; }
.bwc-c-price   { width: 140px; }
.bwc-c-status  { width: 92px; }
.bwc-c-loc     { width: 140px; }
.bwc-c-agent   { width: 116px; }
.bwc-c-owner   { width: 116px; }
.bwc-c-portals { width: 116px; }
.bwc-c-created { width: 96px; }

/* ---- header ---- */
.bwc-list thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	height: 44px;
	padding: 0 12px;
	background: #fff;
	border-bottom: 1px solid #edeef0;
	font-size: 14px;
	font-weight: 400;
	color: #535c69;
	text-align: left;
	white-space: nowrap;
	vertical-align: middle;
}

.bwc-list th.bwc-sortable {
	cursor: pointer;
	user-select: none;
}

.bwc-list th.bwc-sortable:hover,
.bwc-list th.bwc-sort-active {
	color: var(--ui-color-primary, #2fc6f6);
}

/* The direction caret only shows on the sorted column (or on hover as an
   affordance), so the header row doesn't read as a row of arrows. */
.bwc-sort-icon {
	margin-left: 4px;
	font-size: 9px;
	opacity: 0;
}

.bwc-list th.bwc-sortable:hover .bwc-sort-icon { opacity: .45; }
.bwc-list th.bwc-sort-active .bwc-sort-icon    { opacity: 1; }

/* ---- resize grip + reorder feedback ---- */
/* The header cells are already `position: sticky`, which is a positioned
   ancestor, so the grip anchors to the th without needing position:relative. */
.bwc-resizer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 7px;
	cursor: col-resize;
	user-select: none;
}

.bwc-resizer:hover { background: var(--ui-color-primary, #2fc6f6); opacity: .5; }

/* While dragging, the pointer leaves the 7px grip constantly — force the
   cursor and kill text selection document-wide for the duration. */
body.bwc-resizing { cursor: col-resize !important; user-select: none; }

.bwc-list th.bwc-dragging { opacity: .4; }

.bwc-list th.bwc-drop-target {
	box-shadow: inset 2px 0 0 var(--ui-color-primary, #2fc6f6);
}

/* Only the reorderable headers advertise the grab cursor; the frozen
   checkbox/actions columns aren't draggable. */
.bwc-list thead th[draggable="true"] { cursor: grab; }
.bwc-list thead th[draggable="true"]:active { cursor: grabbing; }

/* ---- body ---- */
.bwc-list tbody td {
	padding: 8px 12px;
	border-bottom: 1px solid #eef2f4;
	vertical-align: middle;
	/* NO `overflow: hidden` here. It looks like the natural way to enforce the
	   column width, but it isn't needed — table-layout:fixed + the <colgroup>
	   already fix every width, and the text is clipped by .bwc-t on the inner
	   element. What it DID do was clip the row's action menu (a Bootstrap
	   dropdown rendered as a child of this 44px cell) out of existence: the menu
	   opened, had a size, and painted nowhere. */
}

.bwc-list tbody tr:hover td { background: #f6f8f9; }

/* ---- frozen checkbox + Actions columns ----
 * Without this, scrolling right to reach Location/Agent/Created takes the row's
 * ⋮ menu off screen with it, so the actions are unreachable exactly when the
 * table is wide enough to need scrolling.
 *
 * These need an opaque background or the scrolled cells slide visibly under
 * them. `left` on the second column must equal the first column's width (40px).
 * The row-hover rule above still wins over these backgrounds on specificity
 * (0,2,3 vs 0,2,1), so frozen cells keep highlighting with their row.
 */
.bwc-list th:nth-child(1),
.bwc-list td:nth-child(1) {
	position: sticky;
	left: 0;
	z-index: 1;
	background: #fff;
}

.bwc-list th:nth-child(2),
.bwc-list td:nth-child(2) {
	position: sticky;
	left: 40px;
	z-index: 1;
	background: #fff;
}

/* The header's frozen cells stick on BOTH axes, so they must outrank both the
   sticky header (z-index 2) and the frozen body cells (1). */
.bwc-list thead th:nth-child(1),
.bwc-list thead th:nth-child(2) {
	z-index: 3;
}

/* While a row's action menu is open, lift THAT CELL above the header.
 *
 * This is not cosmetic. Freezing the Actions column makes the cell
 * `position: sticky` WITH a z-index, which makes it a stacking context — so the
 * menu's own `z-index: 1000` is scoped inside the cell and is measured against
 * the header as if it were the cell's z-index of 1. The header (2) therefore
 * paints straight over any menu that flips upward. Raising the cell is what
 * actually raises the menu; setting a bigger z-index on the menu cannot work.
 * Toggled by initRowMenus() on Bootstrap's show/hide.bs.dropdown.
 */
.bwc-list tbody td.bwc-menu-open { z-index: 10; }

/* Marks where the frozen pair ends — only once the table is actually scrolled,
   which is why it's on the cell rather than a container. */
.bwc-list th:nth-child(2)::after,
.bwc-list td:nth-child(2)::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 1px;
	background: #edeef0;
}

/* Single-line + ellipsis. Every text cell uses this: an untruncated 60-char
   description is what dictated column widths and wrapped rows to 110px+. */
.bwc-t {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Two-line cell rhythm: a primary value and a muted secondary under it.
   Kept tight (13px + 11px) so a row stays ~56px with a 40px thumbnail. */
.bwc-v  { font-size: 13px; color: #535c69; line-height: 1.35; }
.bwc-vs { font-size: 11px; color: #a8adb4; line-height: 1.35; margin-top: 1px; }

/* ---- the Details cell (thumbnail + title + description) ---- */
.bwc-media {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0; /* required, or the flex child refuses to shrink and ellipsis never kicks in */
}

.bwc-thumb {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: var(--ui-border-radius-2xs, 4px);
	object-fit: cover;
	background: #f1f3f5;
}

.bwc-media-text { min-width: 0; flex: 1 1 auto; }

.bwc-title {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ui-color-primary, #2fc6f6);
	text-decoration: none;
}

.bwc-title:hover {
	color: var(--ui-color-primary, #2fc6f6);
	text-decoration: underline;
}

/* ---- small pieces ---- */
.bwc-facts {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	white-space: nowrap;
}

.bwc-facts i { margin-right: 3px; color: var(--ui-color-accent-light-blue, #559be6); }

.bwc-portals { display: flex; align-items: center; gap: 4px; }

.bwc-portals img {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
}

.bwc-muted { color: #a8adb4; }

/* ---- grid "ears" (Bitrix's edge scroll buttons) ----
 * Sizes/opacity from Bitrix's own .main-grid-ear (50x160, opacity .6, .8 on
 * hover). Bitrix's rule carries NO `top` because its grid JS positions these;
 * this list owns its box, so they're simply centred here. `display:none` until
 * .show, so they never sit over the data when there's nothing to scroll.
 */
.bwc-list-shell { position: relative; }

.bwc-ear {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 90px;
	padding: 0;
	border: 1px solid #dfe0e3;
	border-radius: 4px;
	background: #fff;
	color: #535c69;
	cursor: pointer;
	opacity: .6;
	transition: opacity 200ms ease;
}

.bwc-ear.show { display: flex; }
.bwc-ear:hover { opacity: .95; }

.bwc-ear-left  { left: 4px; }
.bwc-ear-right { right: 4px; }

/* ---- action panel ----
 * Bitrix's .main-grid-panel-wrap is `border-top: 2px solid #eef2f4`; its
 * counter is padding-left 19px / min-width 120px.
 */
.bwc-panel {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	border-top: 2px solid #eef2f4;
	font-size: 13px;
	color: #535c69;
}

.bwc-panel-forall {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 0 4px;
	cursor: pointer;
	user-select: none;
}

.bwc-panel-counter {
	margin-left: auto;
	padding-left: 19px;
	min-width: 120px;
	text-align: right;
	white-space: nowrap;
}

/* ---- Bulk Actions flyout submenus ----
 * The flat menu ran ~15 items deep and overflowed the slider. Grouping it into
 * flyouts keeps the top level short. Bootstrap 5 has no submenu support, so
 * the mechanics live here + in index-buttons.php.
 */
.bwc-has-sub { position: relative; }

.bwc-has-sub > .bwc-sub-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
}

.bwc-sub-caret {
	font-size: 10px;
	opacity: .55;
}

.bwc-has-sub.show > .bwc-sub-toggle { background: #f5f5f6; color: #3b434f; }

.bwc-submenu {
	display: none;
	position: absolute;
	top: 0;
	left: 100%;
	margin: 0;
	/* Beat the parent menu so the flyout can overlap it when flipped left. */
	z-index: 1;
}

.bwc-has-sub.show > .bwc-submenu { display: block; }

/* Flipped when there's no room on the right (the Bulk Actions button lives at
   the right edge of the toolbar, so this is the normal case, not the edge case). */
.bwc-has-sub.bwc-sub-left > .bwc-submenu {
	left: auto;
	right: 100%;
}

/* Column-chooser rows: a whole-row click target for each checkbox. */
.bwc-col-opt {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	cursor: pointer;
}

.bwc-empty {
	padding: 40px 12px;
	text-align: center;
	color: #a8adb4;
}

/* The row action button — a quiet ⋮ that only gains weight on hover, matching
   how Bitrix's own row menus sit in the grid. */
.bwc-act-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: var(--ui-border-radius-2xs, 4px);
	background: transparent;
	color: #828b95;
	cursor: pointer;
}

.bwc-act-btn:hover { background: #e8eafb; color: #535c69; }

/* ============================================================================
 * .bwc-list--plain — the simple lists (agents, developers, bayut/pf-locations)
 *
 * Same Bitrix look, none of the 13-column machinery. Everything above is tuned
 * for Listings, and two of its rules are actively wrong on a 3-6 column table:
 *
 *   - `min-width: 1440px` is the sum of Listings' fixed columns. On Developers
 *     (3 columns) it would force ~1150px of empty table and a horizontal
 *     scrollbar over nothing.
 *   - the frozen pair is addressed by :nth-child(1)/(2) because on Listings
 *     those ARE the checkbox and the action menu. On Developers they're ID and
 *     Name — freezing them is meaningless, and there's nothing to scroll anyway.
 *
 * These overrides rely on SOURCE ORDER, not specificity: each pairs with an
 * identically-specific rule above ((0,1,0) and (0,2,1)), so this block must
 * stay at the END of the file. Scoping the originals to a Listings-only class
 * instead would mean editing the working Listings markup — which is how this
 * grid has shipped broken before.
 * ========================================================================= */
.bwc-list--plain { min-width: 0; }

/* Un-freeze the body's first two cells outright. */
.bwc-list--plain tbody td:nth-child(1),
.bwc-list--plain tbody td:nth-child(2) {
	position: static;
	background: transparent;
}

/* The HEADER keeps position:sticky — it still sticks to the top of the scroll
   box. Only the horizontal component is dropped, via `left: auto`. Do NOT set
   `position: static` here: at (0,2,1) it would out-specify `.bwc-list thead th`
   (0,1,2) and silently kill the sticky header for these two columns only. */
.bwc-list--plain thead th:nth-child(1),
.bwc-list--plain thead th:nth-child(2) {
	left: auto;
	z-index: 2; /* back in line with the rest of the header */
}

/* The divider marking where the frozen pair ends has nothing to mark. */
.bwc-list--plain th:nth-child(2)::after,
.bwc-list--plain td:nth-child(2)::after { content: none; }

/* Right-aligned trailing action column (Delete), which these lists use instead
   of Listings' frozen burger menu. */
.bwc-list--plain .bwc-cell-end { text-align: right; }

/* ---- column widths for the plain lists ----
   Same contract as Listings' .bwc-c-*: `table-layout: fixed` needs a declared
   width or the column collapses, so every <col> gets one EXCEPT the single
   column meant to absorb the slack (the name/location). */
.bwc-c-id      { width: 80px; }
.bwc-c-rowact  { width: 110px; }
.bwc-c-email   { width: 260px; }
.bwc-c-mobile  { width: 150px; }
.bwc-c-licence { width: 140px; }

/* The agent name cell: a round photo next to the name, so it reads as the same
   component as Listings' .bwc-media thumbnail row rather than a second idiom. */
.bwc-avatar {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	background: #f1f3f5;
}