/* page layer: rental / luxury / prices / agreed-sales pages (owned by the rental workstream).
   Same language as home: white 18px cards, 1px --dxb-line, soft shadow, pill controls. Prefix `html body` to win on specificity. */

/* chart + table regions = white cards, with a gap between stacked cards */
html body .dxb-page .t-Region.js-apex-region.container-max {
  background: var(--dxb-surface); border: 1px solid var(--dxb-line); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(9,9,11,.04), 0 8px 24px -12px rgba(9,9,11,.08);
  margin-top: 0; margin-bottom: 24px; overflow: hidden;
}
html body .dxb-page .t-Region.js-apex-region.container-max > .t-Region-bodyWrap { padding: 8px 8px 4px; }
html body .dxb-page .t-Region.js-apex-region.container-max .sub-heading { margin-top: 8px; }
html body .dxb-page .t-Region.js-apex-region.container-max :is(small.data-basis, small.data-partial-note) { text-align: center; }

/* luxury sales: KPI tiles centred, flat cards (no hover lift), table in a card, pill CTA */
html body .lux-thresholds { padding: 0; --line: var(--dxb-line); --ink: var(--dxb-ink); --teal: var(--dxb-ink); }
html body .lux-tier-grid { gap: 16px; margin-bottom: 24px; }
html body .lux-tier-card {
  text-align: center; border: 1px solid var(--dxb-line); border-radius: 18px; padding: 20px 16px;
  box-shadow: 0 1px 2px rgba(9,9,11,.04), 0 8px 24px -12px rgba(9,9,11,.08); transform: none; transition: none;
}
html body .lux-tier-card:hover { transform: none; border-color: var(--dxb-line); }
html body .lux-tier-dot { top: 16px; right: 16px; }
html body .lux-tier-label { font-weight: 600; letter-spacing: .06em; margin-bottom: 8px; text-transform: uppercase; }
html body .lux-tier-value { font-size: 32px; letter-spacing: -.02em; }
html body .lux-tier-pctl { margin-top: 4px; }
html body .lux-head { margin-bottom: 16px; }
html body .lux-table-wrap { border: 1px solid var(--dxb-line); border-radius: 18px; box-shadow: 0 1px 2px rgba(9,9,11,.04), 0 8px 24px -12px rgba(9,9,11,.08); }
html body .lux-table thead th { background: #fafafa; padding: 14px 20px; position: static; }
html body .lux-row td { padding: 16px 20px; }
html body .lux-row:hover td { background: #fafafa; }
html body .lux-num { color: var(--dxb-ink); font-variant-numeric: tabular-nums; }
html body .lux-cat-toggle { border-color: var(--dxb-line-strong); }
html body .lux-cat-toggle :is(a, button) { min-height: 36px; display: inline-flex; align-items: center; }
html body .lux-cat-toggle :is(a, button).active { background: var(--dxb-ink); color: #fff; }
html body .btn { border-radius: 999px; padding: 12px 22px; font-weight: 700; }
html body .btn-primary { background: var(--dxb-ink); color: #fff; }
html body .btn-primary:hover { background: var(--dxb-ink-2); gap: 8px; }
html body .btn:focus-visible { outline: 2px solid var(--dxb-ink); outline-offset: 2px; border-radius: 999px; }

/* rental-yields index: one white card, area names as pill links */
html body .container-max > ul.t-MediaList--cols {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; list-style: none;
  margin: 16px 0 0; padding: 20px; background: var(--dxb-surface); border: 1px solid var(--dxb-line); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(9,9,11,.04), 0 8px 24px -12px rgba(9,9,11,.08);
}
html body .container-max > ul.t-MediaList--cols > li.t-MediaList-item { margin: 0; padding: 0; border: 0; background: none; width: auto; }
html body .container-max > ul.t-MediaList--cols .t-MediaList-itemWrap {
  display: flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--dxb-line); border-radius: 999px;
  background: #fff; color: var(--dxb-ink); font-weight: 500; font-size: 14px; text-decoration: none; line-height: 1.25; padding-top: 8px; padding-bottom: 8px;
}
html body .container-max > ul.t-MediaList--cols .t-MediaList-itemWrap:hover { border-color: var(--dxb-line-strong); background: #fafafa; }
html body .lux-table :is(th:last-child, td.lux-price, .lux-price) { text-align: right; font-variant-numeric: tabular-nums; }

/* one shape language: every select / input / pager link is a pill (the APEX defaults were 5-14px) */
html body .dxb-page :is(select.selectlist, select.apex-item-select, input.text_field, input.apex-item-text, .apex-item-popup-lov) { border-radius: 999px; min-height: 44px; }
html body .dxb-page .t-Report-pagination :is(.t-Report-paginationText a, .t-Report-paginationText strong, a.t-Report-paginationLink) {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px; margin: 0 2px;
  border-radius: 999px; border: 1px solid var(--dxb-line-strong); background: #fff; color: var(--dxb-ink); font-weight: 600; text-decoration: none;
}
html body .dxb-page .t-Report-pagination .t-Report-paginationText strong { background: var(--dxb-ink); border-color: var(--dxb-ink); color: #fff; }
html body .dxb-page .t-Report-pagination :is(.t-Report-paginationText a, a.t-Report-paginationLink):hover { background: #fafafa; }

/* standalone chart sections and region cards that are not .t-Region (agreed sales, rental comparison) */
html body .dxb-page section.container-max,
html body .dxb-page #R33095831798769815383 {
  background: var(--dxb-surface); border: 1px solid var(--dxb-line); border-radius: 18px; padding: 24px 24px 16px; margin-bottom: 24px;
  box-shadow: 0 1px 2px rgba(9,9,11,.04), 0 8px 24px -12px rgba(9,9,11,.08);
}
html body .dxb-page section.container-max > h2 { margin-top: 0; }
html body .dxb-page #R33095831798769815383 > .sub-heading { margin-top: 0; }
html body .dxb-page :is(section.container-max, #R33095831798769815383) :is(small.data-basis, small.data-partial-note) { display: block; text-align: center; margin-top: 8px; }