/*
 * BLACK X responsive foundation — Phase 1
 * Shared-shell safeguards for phone, tablet, compact desktop and wide panels.
 * This file intentionally loads after the existing BLACK X CSS authorities.
 */

:root {
  --bx-responsive-gutter: clamp(0.5rem, 1.8vw, 1.25rem);
  --bx-responsive-control-min: 44px;
  --bx-responsive-table-min: 680px;
  --bx-responsive-dialog-gutter: 0.75rem;
}

html,
body {
  max-inline-size: 100%;
}

html {
  min-inline-size: 0;
  overflow-x: clip;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 0;
  min-inline-size: 0;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

/* Keep every shared-shell child shrinkable instead of forcing page overflow. */
:where(
  #main-content,
  .site-header,
  .header-inner,
  .site-footer,
  .site-sidebar,
  .container,
  .page-shell,
  .dashboard-shell,
  .page-hero-grid,
  .dashboard-header,
  .action-row,
  .crud-toolbar,
  .crud-toolbar-actions,
  .crud-card-actions,
  .crud-inline-actions,
  .header-navigation-group,
  .header-user-area,
  .bx-flip-header-shell,
  .bx-header-flip-stage,
  .bx-header-face,
  .glass-page-nav,
  .bx-glass-page-nav-fixed
) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(
  .header-inner,
  .dashboard-header,
  .action-row,
  .crud-toolbar,
  .crud-toolbar-actions,
  .crud-card-actions,
  .crud-inline-actions,
  .header-navigation-group,
  .header-user-area
) > * {
  min-inline-size: 0;
}

/* Intrinsic media must never enlarge the document viewport. */
:where(img, video, canvas, iframe, embed, object) {
  max-inline-size: 100%;
}

img,
video {
  block-size: auto;
}

:where(svg) {
  max-inline-size: 100%;
}

/* Long translated labels, IDs, paths and user data should wrap safely. */
:where(
  p,
  li,
  dd,
  dt,
  label,
  legend,
  a,
  button,
  .btn,
  .badge,
  .pill,
  th,
  td
) {
  overflow-wrap: anywhere;
}

:where(pre, code, .code-block) {
  max-inline-size: 100%;
}

pre {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Shared forms: keep controls inside the panel at every width. */
:where(form, fieldset) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

fieldset {
  margin-inline: 0;
}

:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea
) {
  max-inline-size: 100%;
  min-inline-size: 0;
}

:where(
  .crud-input,
  .property-input,
  .media-input,
  .client-input,
  .request-input,
  .deal-input,
  .crm-input,
  .route-filter-input,
  .bx-input-search,
  .bx-select-styled
) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

textarea {
  resize: vertical;
}

/* Tables: the page itself must not scroll horizontally; the data region may. */
:where(
  .bx-responsive-table-scroll,
  .crud-table-wrap,
  .route-table-wrap,
  .vault-table-wrap,
  .table-responsive,
  [class$="-table-wrap"],
  [class*=" table-wrap"]
) {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.bx-responsive-table-scroll {
  position: relative;
}

.bx-responsive-table-scroll:focus-visible {
  outline: 2px solid rgba(224, 190, 121, 0.72);
  outline-offset: 2px;
}

:where(
  .bx-responsive-table-scroll,
  .crud-table-wrap,
  .route-table-wrap,
  .vault-table-wrap,
  .table-responsive,
  [class$="-table-wrap"],
  [class*=" table-wrap"]
) > table {
  margin-inline: 0;
}

/* Native dialogs and common modal shells stay inside the visible viewport. */
:where(dialog, .modal, .modal-dialog, .dialog, [role="dialog"]) {
  max-inline-size: calc(100vw - (var(--bx-responsive-dialog-gutter) * 2));
  max-block-size: calc(100dvh - (var(--bx-responsive-dialog-gutter) * 2));
}

:where(dialog, .modal-dialog, .dialog, [role="dialog"]) {
  overflow: auto;
}

/* Header dropdowns should never escape either viewport edge. */
:where(
  .header-user-dropdown,
  .header-notification-dropdown,
  .notification-dropdown,
  .dropdown-menu
) {
  max-inline-size: min(340px, calc(100vw - (var(--bx-responsive-gutter) * 2)));
}

/* Preserve keyboard focus visibility after touch/layout changes. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  scroll-margin-block: calc(var(--header-height) + 1rem);
}

/* Compact desktop / tablet landscape: prevent rigid grids from overflowing. */
@media (max-width: 1199px) {
  :root {
    --bx-page-align-wide: 100%;
    --bx-page-align-max: 100%;
  }

  body.has-auth-sidebar :where(.container, .text-frame.container, .text-panel.container) {
    max-inline-size: 100%;
  }

  :where(
    [class*="-grid"],
    .dashboard-card-grid,
    .portal-grid,
    .route-grid,
    .stats-grid,
    .services-grid,
    .disciplines-grid
  ) > * {
    min-inline-size: 0;
  }

  :where(.action-row, .dashboard-actions, .crud-toolbar-actions, .crud-card-actions, .crud-inline-actions) {
    row-gap: 0.65rem;
  }
}

/* Phase 5 browser corrective R2: authenticated compact-desktop header containment.
 * At 992-1199px the persistent sidebar reduces the usable content width while the
 * original header still uses its centered absolute desktop flip shell. Reflow the
 * header into two rows inside the authenticated content box before it can widen body.
 */
@media (min-width: 992px) and (max-width: 1199px) {
  body.has-auth-sidebar .site-header.site-header-compact.partners-header .header-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.55rem;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  body.has-auth-sidebar .site-header.site-header-compact.partners-header .header-navigation-group {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    margin-inline: 0;
    min-inline-size: 0;
  }

  body.has-auth-sidebar .site-header.site-header-compact.partners-header .header-user-area {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin-inline: 0;
    min-inline-size: 0;
    max-inline-size: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  body.has-auth-sidebar .site-header.site-header-compact.partners-header .bx-flip-header-shell {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    transform: none;
  }

  body.has-auth-sidebar .site-header.site-header-compact.partners-header .bx-header-flip-stage,
  body.has-auth-sidebar .site-header.site-header-compact.partners-header .bx-header-face,
  body.has-auth-sidebar .site-header.site-header-compact.partners-header .bx-glass-page-nav-fixed,
  body.has-auth-sidebar .site-header.site-header-compact.partners-header .glass-page-nav {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  body.has-auth-sidebar .site-header.site-header-compact.partners-header .header-user-trigger {
    min-width: 0;
  }
}

/* Phone + tablet shared shell. */
@media (max-width: 991px) {
  :root {
    --bx-shell-padding-x: var(--bx-responsive-gutter);
    --bx-shell-padding-y: clamp(0.85rem, 2.4vw, 1.25rem);
    --bx-surface-padding: clamp(0.9rem, 2.4vw, 1.2rem);
    --bx-surface-padding-lg: clamp(1rem, 2.8vw, 1.35rem);
    --bx-grid-gap: clamp(0.7rem, 2vw, 1rem);
  }

  .container,
  body.has-auth-sidebar .container,
  body.has-auth-sidebar main[data-page-kind="overview"] .container,
  body.has-auth-sidebar main[data-page-kind="overview"] :where(.text-frame, .text-panel).container {
    width: calc(100% - (var(--bx-responsive-gutter) * 2));
    max-width: none;
    margin-inline: auto;
  }

  .site-header {
    max-inline-size: 100vw;
  }

  .site-header.site-header-compact.partners-header .header-inner,
  .site-header .header-inner {
    width: calc(100% - (var(--bx-responsive-gutter) * 2));
    max-width: none;
    margin-inline: auto;
  }

  .site-header.site-header-compact.partners-header .bx-flip-header-shell,
  .site-header .bx-flip-header-shell {
    width: 100%;
    min-width: 0;
  }

  .bx-header-flip-stage,
  .bx-header-face,
  .bx-glass-page-nav-fixed,
  .glass-page-nav {
    width: 100%;
  }

  .glass-page-link {
    min-width: 0;
    white-space: normal;
    line-height: 1.15;
    text-align: center;
  }

  .header-user-dropdown,
  .header-notification-dropdown {
    inset-inline-end: 0;
    inset-inline-start: auto;
  }

  body.sidebar-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .site-sidebar {
    width: min(360px, calc(100vw - 16px));
    max-width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    padding-bottom: max(var(--bx-space-md), env(safe-area-inset-bottom));
  }

  .sidebar-head {
    padding-top: env(safe-area-inset-top);
  }

  .sidebar-content {
    padding-bottom: max(var(--bx-space-xl), env(safe-area-inset-bottom));
  }

  .sidebar-nav a,
  .sidebar-logout-form button,
  .sidebar-close,
  .sidebar-toggle-button,
  .header-user-trigger,
  .header-notification-trigger,
  .header-language-switcher select,
  .header-language-switcher button {
    min-block-size: var(--bx-responsive-control-min);
  }

  /* Phase 5 browser corrective R4: the native language select previously
     rendered at the base 38px control height in Chromium despite the logical
     minimum. Pin its mobile/tablet used height to the responsive 44px touch
     target while preserving its existing inline width rules. */
  .header-language-switcher select {
    box-sizing: border-box;
    block-size: var(--bx-responsive-control-min);
    min-block-size: var(--bx-responsive-control-min);
    height: var(--bx-responsive-control-min);
    min-height: var(--bx-responsive-control-min);
  }

  :where(
    .btn,
    button:not(.bx-header-toggle-label),
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
  ) {
    min-block-size: var(--bx-responsive-control-min);
  }

  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select
  ) {
    min-block-size: var(--bx-responsive-control-min);
  }

  :where(
    .crud-toolbar,
    .dashboard-header,
    .property-header-row,
    .client-list-heading,
    .deal-board-heading,
    .deal-overview-heading,
    .crm-list-head
  ) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  :where(
    .action-row,
    .dashboard-actions,
    .crud-toolbar-actions,
    .crud-card-actions,
    .crud-inline-actions
  ) {
    max-inline-size: 100%;
  }

  :where(
    [class*="form-grid"],
    [class*="filter-grid"],
    [class*="fields-grid"]
  ) {
    min-inline-size: 0;
  }

  /* Wide operational tables remain usable via a local scroll region. */
  :where(
    .route-table,
    .vault-table,
    .platform-matrix-table,
    .permission-table,
    .access-matrix-table
  ) {
    width: max(100%, var(--bx-responsive-table-min));
  }
}

/* Tablet portrait and large phones. */
@media (max-width: 767px) {
  :root {
    --bx-responsive-gutter: clamp(0.55rem, 3vw, 0.9rem);
    --bx-responsive-table-min: 620px;
  }

  .site-header.site-header-compact.partners-header .header-inner,
  .site-header .header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 0.55rem;
    padding-inline: clamp(0.5rem, 2.8vw, 0.85rem);
  }

  .site-header .header-navigation-group {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .site-header .header-user-area {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    max-width: 100%;
    flex-wrap: nowrap;
  }

  .site-header .bx-flip-header-shell {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0;
  }

  .header-language-switcher select {
    max-inline-size: clamp(74px, 24vw, 110px);
    padding-inline: 0.45rem;
  }

  .header-auth-actions {
    gap: 0.35rem;
  }

  .header-auth-actions .btn {
    padding-inline: 0.55rem;
  }

  .bx-glass-page-nav-fixed,
  .glass-page-nav {
    min-height: 44px;
  }

  .glass-page-link {
    padding-inline: clamp(0.2rem, 1.8vw, 0.55rem);
    font-size: clamp(0.58rem, 2.25vw, 0.68rem);
  }

  .page-title,
  .luxury-heading,
  h1 {
    overflow-wrap: anywhere;
  }

  :where(
    .action-row,
    .dashboard-actions,
    .crud-toolbar-actions,
    .crud-card-actions,
    .crud-inline-actions
  ) > :where(.btn, button, a.btn) {
    max-inline-size: 100%;
  }

  :where(
    [class*="form-grid"],
    [class*="filter-grid"],
    [class*="fields-grid"],
    .platform-bulk-form
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(.platform-checkbox-grid) {
    min-width: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  }

  .crud-table td {
    grid-template-columns: minmax(82px, 0.38fr) minmax(0, 1fr);
  }
}

/* Small phones: controls become one-column instead of colliding. */
@media (max-width: 479px) {
  :root {
    --bx-responsive-gutter: clamp(0.45rem, 2.7vw, 0.7rem);
    --bx-responsive-table-min: 560px;
  }

  .site-sidebar {
    width: calc(100vw - 8px);
  }

  .site-header.site-header-compact.partners-header .header-inner,
  .site-header .header-inner {
    width: calc(100% - 8px);
    padding-inline: 0.45rem;
  }

  .site-header .header-navigation-group,
  .site-header .header-user-area {
    gap: 0.3rem;
  }

  .header-language-switcher select {
    max-inline-size: 82px;
    font-size: 0.72rem;
  }

  .header-user-dropdown,
  .header-notification-dropdown {
    position: fixed;
    top: calc(var(--header-height) + 8px);
    inset-inline: var(--bx-responsive-gutter);
    width: auto;
    max-inline-size: none;
    max-block-size: calc(100dvh - var(--header-height) - 20px);
    overflow: auto;
  }

  :where(
    .action-row,
    .dashboard-actions,
    .crud-toolbar-actions,
    .crud-card-actions
  ) {
    width: 100%;
    align-items: stretch;
  }

  :where(
    .action-row,
    .dashboard-actions,
    .crud-toolbar-actions,
    .crud-card-actions
  ) > :where(.btn, button, a.btn) {
    flex: 1 1 100%;
    width: 100%;
  }

  .crud-inline-actions > :where(.btn, button, a.btn) {
    flex: 1 1 auto;
  }

  .crud-toolbar {
    align-items: stretch;
  }

  .crud-table td {
    grid-template-columns: minmax(72px, 0.34fr) minmax(0, 1fr);
    gap: 0.55rem;
    padding-inline: 0.6rem;
  }
}

/* Very narrow embedded panels / split-screen windows. */
@media (max-width: 359px) {
  :root {
    --bx-responsive-gutter: 0.4rem;
  }

  .header-language-switcher select {
    max-inline-size: 68px;
    padding-inline: 0.3rem;
  }

  .glass-page-link {
    font-size: 0.56rem;
    padding-inline: 0.12rem;
  }

  .site-header .header-user-area {
    gap: 0.2rem;
  }

  .header-user-trigger,
  .header-notification-trigger,
  .sidebar-toggle-button.burger {
    min-inline-size: 40px;
    max-inline-size: 44px;
  }
}

/* Short landscape devices: prioritize content height and sidebar scrolling. */
@media (max-height: 520px) and (max-width: 991px) {
  .site-header {
    position: sticky;
  }

  .site-sidebar {
    height: 100dvh;
  }

  .sidebar-head {
    min-height: 48px;
  }

  .sidebar-nav a,
  .sidebar-logout-form button {
    min-block-size: 40px;
  }
}

/* Touch devices: preserve usable hit areas without enlarging desktop controls. */
@media (pointer: coarse) {
  :where(a.btn, button, summary, select, input[type="button"], input[type="submit"], input[type="reset"]) {
    touch-action: manipulation;
  }

  :where(.btn, button, summary, select, input[type="button"], input[type="submit"], input[type="reset"]) {
    min-block-size: var(--bx-responsive-control-min);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bx-responsive-table-scroll {
    scroll-behavior: auto;
  }
}