/* BLACK X Batch 6 — Global UI convergence and closure layer.
   Purpose: reconcile Batches 1–5 without replacing their scoped visual authorities.
   Loaded last from base.html. No backend/business authority lives here. */

:root {
  --bx-final-gold-line: rgba(214, 176, 91, .46);
  --bx-final-silver-line: rgba(220, 226, 236, .22);
  --bx-final-highlight: rgba(255, 255, 255, .075);
  --bx-final-glass: linear-gradient(145deg, rgba(27, 31, 38, .70), rgba(9, 11, 15, .86));
  --bx-final-shadow: 0 14px 36px rgba(0, 0, 0, .24), inset 0 1px 0 var(--bx-final-highlight);
  --bx-final-radius: 14px;
  --bx-final-gap: clamp(.65rem, 1.1vw, .95rem);
  --bx-final-filter-min: 17rem;
  --bx-final-form-min: 17rem;
  --bx-final-card-min: 14.5rem;
  --bx-final-kpi-min: 11rem;
}

/* Keep the five batch foundations numerically aligned without erasing their identities. */
:is(body.bx-admin-foundation-page, body.bx-ops-foundation-page, body.bx-data-foundation-page) {
  --bx-grid-gap: var(--bx-final-gap);
  --bx-section-gap: clamp(.85rem, 1.35vw, 1.15rem);
}
body.bx-data-foundation-page {
  --bx-data-filter-min: var(--bx-final-filter-min);
  --bx-data-form-min: var(--bx-final-form-min);
  --bx-data-card-min: var(--bx-final-card-min);
  --bx-data-kpi-min: var(--bx-final-kpi-min);
}
:is(
  body[data-bx-namespace="security_vault"], body[data-bx-namespace="notifications"],
  body[data-bx-namespace="media_library"], body[data-bx-namespace="rewards"],
  body[data-bx-namespace="whatsapp"], body[data-bx-namespace="accounts"]
) {
  --bx-remain-filter-min: var(--bx-final-filter-min);
  --bx-remain-form-min: var(--bx-final-form-min);
  --bx-remain-card-min: var(--bx-final-card-min);
  --bx-remain-kpi-min: var(--bx-final-kpi-min);
}

/* Internal page geometry: never let nested grids, labels or panels force document overflow. */
:is(
  body.bx-admin-foundation-page,
  body.bx-ops-foundation-page,
  body.bx-data-foundation-page,
  body[data-bx-namespace="security_vault"],
  body[data-bx-namespace="notifications"],
  body[data-bx-namespace="media_library"],
  body[data-bx-namespace="rewards"],
  body[data-bx-namespace="whatsapp"],
  body[data-bx-namespace="accounts"],
  body[data-bx-view="dashboard:system_health"],
  body[data-bx-view="dashboard:docs_center"],
  body[data-bx-view="dashboard:route_testing"],
  body[data-bx-view="dashboard:permissions"]
) #main-content,
:is(
  body.bx-admin-foundation-page,
  body.bx-ops-foundation-page,
  body.bx-data-foundation-page
) #main-content :is(section, article, aside, main, form, fieldset, div, label) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* Authenticated internal pages should consume the real workspace left by the sidebar.
   Narrow editorial/public surfaces keep their own authorities outside this rule. */
@media (min-width: 992px) {
  body.has-auth-sidebar #main-content .container {
    width: calc(100% - (var(--bx-shell-padding-x) + var(--bx-shell-padding-x)));
    max-width: none;
  }

  body.has-auth-sidebar #main-content :is(
    .crm-form-shell, .crud-form-shell, .crud-form-layout,
    .property-form, .client-form, .request-form, .deal-form,
    .access-form-panel, .organization-form
  ) {
    width: 100%;
    max-width: none;
  }
}

/* The System Guide historically used 150px filter columns, which is too narrow
   for Arabic labels/options. It joins the same section-aware filter contract. */
.system-guide-filter-row {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bx-final-filter-min)), 1fr)) !important;
}
.system-guide-filter-row > label,
.system-guide-filter-row select {
  min-inline-size: 0;
  inline-size: 100%;
  max-inline-size: 100%;
}

/* Organization quick filters previously had their own 2/3-column authority. */
body.bx-admin-foundation-page .organization-filter {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bx-final-filter-min)), 1fr)) !important;
}

/* Final control-width contract. Width belongs to the section/grid cell, never a hard-coded control. */
:is(
  body.bx-admin-foundation-page,
  body.bx-ops-foundation-page,
  body.bx-data-foundation-page,
  body[data-bx-namespace="security_vault"],
  body[data-bx-namespace="notifications"],
  body[data-bx-namespace="media_library"],
  body[data-bx-namespace="rewards"],
  body[data-bx-namespace="whatsapp"],
  body[data-bx-namespace="accounts"],
  body[data-bx-view="dashboard:docs_center"],
  body[data-bx-view="dashboard:route_testing"],
  body[data-bx-view="dashboard:permissions"]
) #main-content :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea
) {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  box-sizing: border-box;
}

/* Any multi-field filter surface converges to section-aware auto-fit. */
:is(body.bx-admin-foundation-page, body.bx-ops-foundation-page, body.bx-data-foundation-page) :is(
  .bx-filter-grid,
  .phase26-filter-primary,
  .phase26-filter-groups,
  .crm-filters,
  .report-filter-bar,
  .organization-dashboard-filter,
  .organization-filter,
  .system-guide-filter-row,
  .crud-filter-grid
),
:is(
  body[data-bx-namespace="security_vault"], body[data-bx-namespace="notifications"],
  body[data-bx-namespace="rewards"], body[data-bx-namespace="whatsapp"],
  body[data-bx-view="dashboard:docs_center"], body[data-bx-view="dashboard:route_testing"],
  body[data-bx-view="dashboard:permissions"]
) :is(.vault-filter-bar, .crm-filters, .rewards-filter, .route-filter-panel) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bx-final-filter-min)), 1fr)) !important;
  gap: var(--bx-final-gap);
  align-items: end;
}

/* Nested operational filter groups must not divide a medium-width fieldset into
   unreadable half-width controls. The fieldset itself decides its column count. */
.phase26-filter-block-layout :is(.phase26-filter-groups, .phase26-advanced-filters) fieldset {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)) !important;
}
.phase26-filter-block-layout .phase26-filter-groups {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)) !important;
}
.phase26-filter-block-layout :is(fieldset, label, input, select, textarea) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* Group search owns spare width; action buttons keep natural width on desktop. */
@media (min-width: 761px) {
  .phase26-filter-block-layout .phase26-filter-primary {
    grid-template-columns: minmax(20rem, 1fr) max-content max-content !important;
  }
  .phase26-filter-block-layout .phase26-filter-primary > :is(.btn, a.btn, button) {
    width: auto !important;
    min-width: 7rem;
  }
}

/* Grouped forms use a slightly wider minimum than filters. */
:is(body.bx-admin-foundation-page, body.bx-ops-foundation-page, body.bx-data-foundation-page) :is(
  .crud-form-grid,
  .organization-form-grid,
  .property-form-grid,
  .client-form-grid,
  .request-form-grid,
  .deal-form-grid,
  .crm-form-grid,
  .crud-grid
),
:is(
  body[data-bx-namespace="security_vault"], body[data-bx-namespace="notifications"],
  body[data-bx-namespace="media_library"], body[data-bx-namespace="rewards"],
  body[data-bx-namespace="whatsapp"], body[data-bx-namespace="accounts"]
) :is(
  .vault-form-grid, .notification-preference-grid, .media-form-grid, .media-op-upload-grid,
  .rewards-form-grid, .rewards-adjust-grid, .auth-form-long
) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bx-final-form-min)), 1fr)) !important;
  gap: var(--bx-final-gap);
}

/* Card/KPI grids converge to compact responsive density while respecting section width. */
:is(body.bx-admin-foundation-page, body.bx-ops-foundation-page, body.bx-data-foundation-page) :is(
  .bx-admin-card-grid, .crm-card-grid, .crm-module-grid, .crm-dashboard-grid,
  .report-module-grid, .organization-dashboard-grid, .crud-card-grid
),
:is(
  body[data-bx-namespace="security_vault"], body[data-bx-namespace="notifications"],
  body[data-bx-namespace="media_library"], body[data-bx-namespace="rewards"],
  body[data-bx-namespace="whatsapp"]
) :is(
  .vault-policy-grid, .notification-grid, .media-gallery-grid, .media-op-gallery,
  .rewards-benefit-grid, .rewards-management-grid
) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bx-final-card-min)), 1fr)) !important;
  gap: var(--bx-final-gap);
}
:is(body.bx-data-foundation-page, body.bx-admin-foundation-page) :is(.crm-metric-grid, .report-kpi-grid, .route-summary-grid),
:is(body[data-bx-namespace="security_vault"], body[data-bx-namespace="rewards"]) :is(.vault-stat-grid, .rewards-stat-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bx-final-kpi-min)), 1fr)) !important;
}

/* One final glass/edge language for grouped input shells only. */
:is(body.bx-admin-foundation-page, body.bx-ops-foundation-page, body.bx-data-foundation-page) :is(
  .filter-panel, .phase26-filter-panel, .crm-filters, .report-filter-bar,
  .crud-form-panel, .organization-form-panel, .property-form, .client-form, .request-form, .deal-form,
  .crm-form, .planning-panel, .ownership-scope-panel
),
:is(
  body[data-bx-namespace="security_vault"], body[data-bx-namespace="notifications"],
  body[data-bx-namespace="media_library"], body[data-bx-namespace="rewards"], body[data-bx-namespace="whatsapp"],
  body[data-bx-namespace="accounts"]
) :is(.vault-form-panel, .notification-preferences, .media-upload-form, .rewards-form-shell, .auth-form) {
  border-color: var(--bx-final-silver-line);
  border-top-color: var(--bx-final-gold-line);
  border-radius: var(--bx-final-radius);
  box-shadow: var(--bx-final-shadow);
}

/* Action bars wrap naturally. Do not let a wide action cluster expand the page. */
:is(
  body.bx-admin-foundation-page, body.bx-ops-foundation-page, body.bx-data-foundation-page,
  body[data-bx-namespace="security_vault"], body[data-bx-namespace="notifications"],
  body[data-bx-namespace="media_library"], body[data-bx-namespace="rewards"], body[data-bx-namespace="whatsapp"]
) #main-content :is(.action-row, .page-actions, .bx-ops-primary-actions, .vault-action-row, .notification-actions, .rewards-head-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  max-inline-size: 100%;
}

/* Tabs/context navigation may scroll locally instead of forcing page width. */
:is(
  body.bx-admin-foundation-page, body.bx-ops-foundation-page,
  body[data-bx-namespace="security_vault"]
) :is(.bx-tab-list, .bx-admin-primary-tabs, .bx-ops-context-nav-wrap, .vault-subnav) {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
:is(
  body.bx-admin-foundation-page, body.bx-ops-foundation-page,
  body[data-bx-namespace="security_vault"]
) :is(.bx-tab-list, .bx-admin-primary-tabs, .bx-ops-context-nav, .vault-subnav) > * {
  flex: 0 0 auto;
}

/* Tables own their overflow. Never hide document overflow to conceal a layout defect. */
:is(
  body.bx-admin-foundation-page, body.bx-ops-foundation-page, body.bx-data-foundation-page,
  body[data-bx-namespace="security_vault"], body[data-bx-namespace="rewards"],
  body[data-bx-view="dashboard:route_testing"], body[data-bx-view="dashboard:permissions"]
) :is(
  .table-wrap, .responsive-table, .crm-report-table, .report-table-wrap,
  .vault-table-wrap, .rewards-table-wrap, .route-table-wrap, .permission-matrix-shell
) {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* Long IDs, email addresses and technical strings should break inside their own card. */
:is(
  body.bx-admin-foundation-page, body.bx-ops-foundation-page, body.bx-data-foundation-page,
  body[data-bx-namespace="security_vault"], body[data-bx-namespace="notifications"],
  body[data-bx-namespace="media_library"], body[data-bx-namespace="rewards"], body[data-bx-namespace="whatsapp"]
) #main-content :is(code, pre, .technical-value, .meta-value, .audit-value, .route-path, .permission-code) {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Sidebar external boundary stays visibly separate but compact. */
.sidebar-external-boundary {
  margin: .48rem .3rem .12rem;
  padding-top: .48rem;
}
.sidebar-external-erp {
  gap: .45rem;
  padding: .48rem .55rem;
  border-radius: 8px;
  font-size: var(--bx-sidebar-font);
}

/* Preserve RTL/LTR through logical geometry; only collapse density as available width falls. */
@media (max-width: 760px) {
  :root {
    --bx-final-filter-min: 100%;
    --bx-final-form-min: 100%;
    --bx-final-card-min: 100%;
  }

  :is(
    body.bx-admin-foundation-page, body.bx-ops-foundation-page, body.bx-data-foundation-page,
    body[data-bx-namespace="security_vault"], body[data-bx-namespace="notifications"],
    body[data-bx-namespace="media_library"], body[data-bx-namespace="rewards"], body[data-bx-namespace="whatsapp"],
    body[data-bx-namespace="accounts"]
  ) #main-content :is(.action-row, .page-actions, .bx-ops-primary-actions) > :is(.btn, button, .bx-ops-action-menu) {
    max-inline-size: 100%;
  }
}