/* DXB UI layer — shared design tokens + overrides for the APEX components every page uses.
   Loaded LAST from (site)/layout.tsx. Page sheets hoist into <head> after this, so every
   override wins on SPECIFICITY (`body ` / `html body ` prefix), never on source order.
   Additive only: no layout properties (width/height/margin/position) are changed on shared
   containers, so no layout shift and no snapshot-parity regressions in geometry. */

:root {
  /* colour — DXB blue + black kept; greys are AA on white (text 4.5:1, large 3:1) */
  --dxb-accent: #0246c1;          /* 8.6:1 on white */
  --dxb-accent-hover: #02389c;
  --dxb-accent-soft: #eef3fd;
  --dxb-ink: #14171f;             /* 17:1 */
  --dxb-ink-2: #3b4250;           /* 10:1 */
  --dxb-muted: #5b6472;           /* 5.9:1 */
  --dxb-line: #e6e8ec;
  --dxb-line-strong: #cfd4dc;
  --dxb-surface: #ffffff;
  --dxb-surface-2: #f7f8fa;
  --dxb-up: #0a7a3d;              /* 5.4:1 on white */
  --dxb-up-bg: #e7f6ee;
  --dxb-down: #b42318;            /* 6.5:1 on white */
  --dxb-down-bg: #fdecea;
  /* type scale (px) */
  --dxb-fs-xs: 11px; --dxb-fs-sm: 13px; --dxb-fs-md: 14px; --dxb-fs-lg: 18px; --dxb-fs-xl: 24px;
  /* spacing — 8px grid */
  --dxb-s1: 4px; --dxb-s2: 8px; --dxb-s3: 12px; --dxb-s4: 16px; --dxb-s5: 24px; --dxb-s6: 32px;
  /* radii + shadows */
  --dxb-r-sm: 8px; --dxb-r-md: 12px; --dxb-r-lg: 16px; --dxb-r-pill: 999px;
  --dxb-sh-1: 0 1px 2px rgba(16,24,40,.06);
  --dxb-sh-2: 0 4px 12px rgba(16,24,40,.08);
  --dxb-sh-3: 0 12px 32px rgba(16,24,40,.14);
  /* motion */
  --dxb-ease-out: cubic-bezier(.22, 1, .36, 1);
  --dxb-t-fast: 120ms; --dxb-t-base: 180ms; --dxb-t-slow: 260ms;
}

/* ---------- focus: one consistent, visible ring ---------- */
html body :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--dxb-accent);
  outline-offset: 2px;
  border-radius: inherit;
}
html body .t-Header :is(a, button):focus-visible { outline-offset: 1px; }

/* ---------- header + nav ---------- */
body #t_Header { border-bottom: 1px solid var(--dxb-line); }
body .t-NavigationBar-item > .t-Button--navBar {
  transition: background-color var(--dxb-t-fast) ease, color var(--dxb-t-fast) ease;
}
body .t-NavigationBar-item > .t-Button--navBar:hover,
body .t-NavigationBar-item > .t-Button--navBar[aria-expanded="true"] {
  background-color: var(--dxb-accent-soft);
  color: var(--dxb-accent);
}
body .t-NavigationBar-item > .t-Button--navBar:active { background-color: #dfe8fb; }
body .t-NavigationBar-item > .t-Button--navBar .icon-down-arrow { transition: transform var(--dxb-t-base) var(--dxb-ease-out); }
body .t-NavigationBar-item > .t-Button--navBar[aria-expanded="true"] .icon-down-arrow { transform: rotate(180deg); }

/* ---------- dropdown / mega-menu panels ---------- */
body .t-NavigationBar-menu.a-Menu {
  border-color: var(--dxb-line);
  border-radius: var(--dxb-r-md);
  box-shadow: var(--dxb-sh-3);
  padding: var(--dxb-s2);
  transform-origin: top left;
}
body .t-NavigationBar-menu.a-Menu li a {
  color: var(--dxb-ink-2);
  transition: background-color var(--dxb-t-fast) ease, color var(--dxb-t-fast) ease;
}
body .t-NavigationBar-menu.a-Menu li a:hover,
body .t-NavigationBar-menu.a-Menu li a:focus-visible,
body .t-NavigationBar-menu.a-Menu li[data-current="true"] a {
  background: var(--dxb-accent-soft);
  color: var(--dxb-accent);
}
body .t-NavigationBar-menu.a-Menu li a:active { background: #dfe8fb; }

/* ---------- buttons ---------- */
body .t-Button { transition: background-color var(--dxb-t-fast) ease, border-color var(--dxb-t-fast) ease, color var(--dxb-t-fast) ease, box-shadow var(--dxb-t-base) ease, transform var(--dxb-t-fast) var(--dxb-ease-out); }
body .t-Button:not(.t-Button--navBar):not(.t-Button--header):active:not(:disabled) { transform: scale(.97); }
/* "History / View" row buttons: secondary style */
/* page sheets set .detailBtn with !important, so this one must be !important too (higher specificity wins) */
body .t-Report .t-Button.detailBtn {
  background: var(--dxb-surface) !important;
  color: var(--dxb-accent) !important;
  border: 1px solid var(--dxb-line-strong) !important;
  border-radius: var(--dxb-r-sm);
  box-shadow: none !important;
  font-weight: 600;
}
body .t-Report .t-Button.detailBtn:hover { background: var(--dxb-accent-soft) !important; border-color: var(--dxb-accent) !important; color: var(--dxb-accent-hover) !important; }
/* toolbar pills (Beds / Compare / Most Sold / Trends): quiet outline, dark text */
body .tool-pills .pill-btn,
body .tool-pills .pill-btn.dropdown-toggle {
  background: var(--dxb-surface) !important;
  color: var(--dxb-ink);
  border: 1px solid var(--dxb-line-strong);
  box-shadow: none;
  transition: background-color var(--dxb-t-fast) ease, border-color var(--dxb-t-fast) ease, transform var(--dxb-t-fast) var(--dxb-ease-out);
}
body .tool-pills .pill-btn:hover { background: var(--dxb-accent-soft) !important; border-color: var(--dxb-accent); color: var(--dxb-accent); }
body .tool-pills .pill-btn:active { transform: scale(.97); }
body .tool-pills .pill-btn svg { stroke: currentColor; }

/* ---------- search / filter bar ---------- */
body .searchForm .search-choose-btns,
body .searchForm .more-filters {
  transition: border-color var(--dxb-t-fast) ease, background-color var(--dxb-t-fast) ease, box-shadow var(--dxb-t-fast) ease;
}
body .searchForm .search-choose-btns:hover,
body .searchForm .more-filters:hover { border-color: var(--dxb-accent); background-color: var(--dxb-accent-soft); }
body .searchForm .search-choose-btns.active,
body .searchForm .more-filters.active { border-color: var(--dxb-accent); box-shadow: 0 0 0 3px rgba(2,70,193,.14); }
body .searchForm.search-stuck { box-shadow: 0 1px 0 var(--dxb-line), var(--dxb-sh-2); }

/* ---------- KPI cards (.t-BadgeList) + change chips ---------- */
body .t-BadgeList-item .t-BadgeList-wrap { transition: box-shadow var(--dxb-t-base) ease, border-color var(--dxb-t-base) ease; }
body .t-BadgeList-item .t-BadgeList-wrap:hover { box-shadow: var(--dxb-sh-2); }
body .t-BadgeList-value .label { color: var(--dxb-muted); font-size: var(--dxb-fs-sm); letter-spacing: .01em; }
body .t-BadgeList-value .color-class {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--dxb-r-pill);
  font-size: var(--dxb-fs-sm);
  font-weight: 600;
  background: var(--dxb-surface-2);
}
body .t-BadgeList-value .color-class[data-value^="-"] { color: var(--dxb-down); background: var(--dxb-down-bg); }

/* ---------- tables (.t-Report) ---------- */
body .t-Report .t-Report-colHead {
  font-size: var(--dxb-fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dxb-muted);
}
body .t-Report .t-Report-colHead p { font-size: var(--dxb-fs-xs); font-weight: 500; letter-spacing: .02em; text-transform: none; }
body .t-Report .t-Report-cell { border-color: var(--dxb-line); }
body .t-Report .t-Report-report tbody tr { transition: background-color var(--dxb-t-fast) ease; }
body .t-Report .t-Report-report tbody tr:hover { background: #f8faff; }
/* soft status tags (Offplan / Ready) */
body .t-Report .bg-offplan {
  display: inline-block;
  padding: 1px 8px;
  margin-right: 4px;
  border-radius: var(--dxb-r-pill);
  background: var(--dxb-accent-soft);
  color: var(--dxb-accent);
  font-size: var(--dxb-fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
body .t-Report .datePill { font-weight: 600; color: var(--dxb-ink); }
body .t-Report .bold-title { color: var(--dxb-ink); }
body .t-Report a:hover .bold-title { color: var(--dxb-accent); }

/* ---------- cards (.t-Cards) + chip lists ---------- */
body .t-Cards .t-Cards-item .t-Card {
  border-radius: var(--dxb-r-md);
  transition: box-shadow var(--dxb-t-base) ease, transform var(--dxb-t-base) var(--dxb-ease-out), border-color var(--dxb-t-base) ease;
}
body .t-Cards .t-Cards-item:hover .t-Card { box-shadow: var(--dxb-sh-2); transform: translateY(-2px); }
body .t-MediaList-itemWrap { transition: background-color var(--dxb-t-fast) ease, box-shadow var(--dxb-t-base) ease, transform var(--dxb-t-fast) var(--dxb-ease-out); }
body .popular-searches .t-MediaList-item:hover .t-MediaList-itemWrap { background-color: var(--dxb-accent-soft); box-shadow: var(--dxb-sh-1); }
body .popular-searches .t-MediaList-item:active .t-MediaList-itemWrap { transform: scale(.985); }

/* ---------- form fields ---------- */
body .t-Form-inputContainer :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"]), select, textarea) {
  border-radius: var(--dxb-r-sm);
  border-color: var(--dxb-line-strong);
  transition: border-color var(--dxb-t-fast) ease, box-shadow var(--dxb-t-fast) ease;
}
body .t-Form-inputContainer :is(input, select, textarea):hover { border-color: var(--dxb-muted); }
body .t-Form-inputContainer :is(input, select, textarea):focus { border-color: var(--dxb-accent); box-shadow: 0 0 0 3px rgba(2,70,193,.14); }

/* ---------- dialogs ---------- */
body .ui-dialog { border-radius: var(--dxb-r-lg); box-shadow: var(--dxb-sh-3); overflow: hidden; }
body .ui-widget-overlay { background: rgba(10,14,22,.5); }

/* ---------- tabs ---------- */
body :is(.t-Tabs, .a-Tabs, [role="tablist"]) [role="tab"] { transition: color var(--dxb-t-fast) ease, background-color var(--dxb-t-fast) ease, border-color var(--dxb-t-fast) ease; }

/* ---------- footer ---------- */
body .t-Footer a { transition: color var(--dxb-t-fast) ease, opacity var(--dxb-t-fast) ease; }
body .t-Footer a:hover { color: var(--dxb-accent); }

/* ---------- motion (transform/opacity only => no layout shift) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes dxb-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes dxb-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes dxb-page-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes dxb-reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  /* menus toggle inline display:none -> block, which restarts the animation on every open */
  body .a-Menu[style*="display: block"] { animation: dxb-menu-in var(--dxb-t-base) var(--dxb-ease-out); }
  body .ui-dialog:not([style*="display: none"]) { animation: dxb-dialog-in var(--dxb-t-slow) var(--dxb-ease-out); }
  /* route change: NavigationFrame un-hides the page (display none -> block) when the next route is ready */
  body .t-Body-contentInner > .dxb-page:not([hidden]) { animation: dxb-page-in var(--dxb-t-slow) var(--dxb-ease-out); }

  /* scroll-reveal for below-the-fold groups (Chromium/Safari 26; ignored elsewhere) */
  @supports (animation-timeline: view()) {
    body .popular-searches .t-MediaList-item,
    body .t-Footer .t-Cards-item,
    body .t-Footer .t-MediaList-item {
      animation: dxb-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}