/* page layer: areas pages (owned by one workstream)
   Design system = home page: canvas #f6f6f7, white 18px cards with 1px line + soft shadow, ONE 1200px width,
   every control a full pill, primary = ink pill, secondary = white pill, flat tables inside cards.
   Pages: dubai-area-performance, area-analysis, best-areas-*, dubai-offplan-project-prices,
   invest-in-offplan-property-dubai, projects, dubai-projects-construction-progress, supply pages,
   dubai-population(-by-education), nationalities, dubai-nearby-property-prices-map.
   All rules are scoped by :has(<page marker>) so nothing leaks to other workstreams' pages. */

/* ================= 1. dubai-area-performance ================= */
html body .dxb-page .wrap:has(.pagehead) { max-width: var(--dxb-w); padding-left: 0; padding-right: 0; }
html body .dxb-page .wrap .pagehead { margin-bottom: 16px; }
html body .dxb-page .wrap .pagehead .intro { color: var(--dxb-muted); }
html body .dxb-page .wrap .filters {
  background: var(--dxb-surface); border: 1px solid var(--dxb-line); border-radius: var(--dxb-r-lg);
  box-shadow: var(--dxb-sh-1); padding: 16px 20px; gap: 16px 24px;
}
html body .dxb-page .wrap .flabel { font-size: var(--dxb-fs-xs); font-weight: 600; color: var(--dxb-muted); letter-spacing: .02em; }
html body .dxb-page .wrap .seg { border-radius: var(--dxb-r-pill); background: var(--dxb-surface-2); border-color: transparent; padding: 3px; }
html body .dxb-page .wrap .seg a { border-radius: var(--dxb-r-pill); min-height: 34px; display: inline-flex; align-items: center; padding: 0 14px; color: var(--dxb-muted); }
html body .dxb-page .wrap .seg a[aria-pressed="true"], html body .dxb-page .wrap .seg a.on { background: var(--dxb-ink); color: #fff; }
html body .dxb-page .wrap .range-hint { margin: 12px 4px; }
html body .dxb-page .wrap .summary { gap: 16px; margin: 16px 0; }
html body .dxb-page .wrap .scard {
  border-radius: var(--dxb-r-lg); border: 1px solid var(--dxb-line); box-shadow: var(--dxb-sh-1);
  text-align: center; padding: 20px;
}
html body .dxb-page .wrap .scard .k { font-size: var(--dxb-fs-sm); color: var(--dxb-muted); }
html body .dxb-page .wrap .pill { min-height: 40px; display: inline-flex; align-items: center; border-color: var(--dxb-line-strong); font-size: var(--dxb-fs-sm); font-weight: 600; padding: 0 16px; }
html body .dxb-page .wrap .pill.active { background: var(--dxb-ink); border-color: var(--dxb-ink); color: #fff; }
html body .dxb-page .wrap .acard { border-radius: var(--dxb-r-lg); border-color: var(--dxb-line); box-shadow: var(--dxb-sh-1); }
html body .dxb-page .wrap .acard:hover { transform: none; box-shadow: var(--dxb-sh-2); border-color: var(--dxb-line); }
html body .dxb-page .wrap .search input { border-radius: var(--dxb-r-pill); border-color: var(--dxb-line-strong); }
@media (max-width: 760px) {
  html body .dxb-page .wrap:has(.pagehead) { padding-left: 0; padding-right: 0; }
  html body .dxb-page .wrap .summary { grid-template-columns: 1fr; gap: 10px; }
  html body .dxb-page .wrap .scard { padding: 14px 16px; }
  html body .dxb-page .wrap .mfilter-btn, html body .dxb-page .wrap .msort { border-radius: var(--dxb-r-pill); min-height: 44px; }
  html body .dxb-page .wrap .mfilter { background: transparent; }
}

/* ================= 2. shared APEX controls on areas pages ================= */
html body .dxb-page:is(:has(#area-report), :has(.top-5-reports), :has(.projects-cards), :has(.off-listing), :has(#P143_PROJECT), :has(#projectTracker)) {
  & :is(select.selectlist, .apex-item-select, input.popup_lov, .apex-item-text, .apex-item-popup-lov, .apex-item-select) {
    border-radius: var(--dxb-r-pill); min-height: 44px; border: 1px solid var(--dxb-line-strong); background-color: var(--dxb-surface);
    padding-left: 18px; box-shadow: none;
  }
  & .apex-item-group--popup-lov { position: relative; }
  & .a-Button--popupLOV { border-radius: var(--dxb-r-pill); background: transparent; border: 0; }
  & .t-Form-label { font-size: var(--dxb-fs-xs); font-weight: 600; color: var(--dxb-muted); }
  & .radio_group.apex-item-group--rc {
    display: inline-flex; background: var(--dxb-surface-2); border-radius: var(--dxb-r-pill); padding: 3px; overflow: visible; max-width: 100%;
  }
  & .radio_group .apex-item-grid-row { display: inline-flex; gap: 2px; }
  & .radio_group .apex-item-option { display: block; }
  & .radio_group .u-radio, & .radio_group label.u-radio {
    border-radius: var(--dxb-r-pill) !important; min-height: 38px; display: inline-flex; align-items: center; padding: 0 16px;
    background: transparent; color: var(--dxb-muted); font-weight: 600; font-size: var(--dxb-fs-md); border: 0; box-shadow: none;
  }
  & .radio_group input:checked + label.u-radio, & .radio_group .is-selected label { background: var(--dxb-ink) !important; color: #fff !important; }
}

/* ================= 3. area-analysis ================= */
html body .dxb-page:has(#area-report) {
  & .units-bg { background: transparent; box-shadow: none; border: 0; padding: 0; }
  & #area-report > .container { background: var(--dxb-surface); border: 1px solid var(--dxb-line); border-radius: var(--dxb-r-lg); box-shadow: var(--dxb-sh-1); padding: 16px 20px 0; margin-bottom: 16px; }
  & #area-report .t-Form-fieldContainer { margin-bottom: 12px; }
  & #area-report_cards { gap: 16px; }
  & #area-report_cards .t-Card-wrap { border-radius: var(--dxb-r-lg); border: 1px solid var(--dxb-line); box-shadow: var(--dxb-sh-1); background: var(--dxb-surface); }
  & #area-report_cards .t-Card-wrap:hover { transform: none; box-shadow: var(--dxb-sh-2); }
  & .t-Report-pagination, & .t-Report-paginationText { color: var(--dxb-muted); font-size: var(--dxb-fs-sm); }
  & .t-Report-pagination a, & .t-Report-paginationLink { border-radius: var(--dxb-r-pill); }
}

/* ================= 4. best-areas ranking tables ================= */
html body .dxb-page:has(.top-5-reports) {
  & #filters { background: var(--dxb-surface) !important; border: 1px solid var(--dxb-line); border-radius: var(--dxb-r-lg); box-shadow: var(--dxb-sh-1); padding: 8px 12px; margin-bottom: 24px; }
  & #filters .row { align-items: center; gap: 12px 0; }
  & #filters .t-Form-fieldContainer { margin: 4px 0; }
  & .top-5-reports { background: var(--dxb-surface); border: 1px solid var(--dxb-line); border-radius: var(--dxb-r-lg); box-shadow: var(--dxb-sh-1); margin-bottom: 24px; overflow: hidden; }
  & .top-5-reports .t-Region-body { padding: 24px 24px 20px; }
  & .top-5-reports .sub-heading { font-size: 24px; line-height: 1.2; margin: 0 0 4px; }
  & .top-5-reports .t-Report, & .top-5-reports .t-Report-wrap, & .top-5-reports .t-Report-tableWrap { background: transparent; box-shadow: none; border: 0; border-radius: 0; }
  & .top-5-reports .t-Report-colHead { background: var(--dxb-surface-2) !important; font-size: var(--dxb-fs-xs) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--dxb-muted); padding: 12px 16px; }
  & .top-5-reports .t-Report-colHead:first-child { border-top-left-radius: var(--dxb-r-md); border-bottom-left-radius: var(--dxb-r-md); }
  & .top-5-reports .t-Report-colHead:last-child { border-top-right-radius: var(--dxb-r-md); border-bottom-right-radius: var(--dxb-r-md); }
  & .top-5-reports .t-Report-cell { padding: 14px 16px; font-size: 15px !important; border-color: var(--dxb-line); }
  & .top-5-reports thead, & .top-5-reports thead th { position: static !important; }
  & .refresh-me { background: var(--dxb-surface); border: 1px solid var(--dxb-line); border-radius: var(--dxb-r-lg); box-shadow: var(--dxb-sh-1); padding: 24px; margin-bottom: 24px; }
}

/* ================= 5. offplan lists (prices + invest) ================= */
html body .dxb-page:is(:has(.projects-cards), :has(.off-listing)) {
  & .intro-bg { max-width: none; }
  & .projects-cards .card-container { gap: 16px; }
  & .projects-cards .card-container > * { border-radius: var(--dxb-r-lg); box-shadow: var(--dxb-sh-1); border: 1px solid var(--dxb-line); overflow: hidden; }
  & .projects-cards :is(a.btn, .btn, button, .t-Button):not(.dropdown-toggle) {
    background: var(--dxb-ink) !important; color: #fff !important; border: 1px solid var(--dxb-ink) !important; border-radius: var(--dxb-r-pill) !important; font-weight: 700; box-shadow: none !important;
  }
  & .off-listing .t-Region, & .off-listing .container-max { background: transparent; }
}