/*
 * BLACK X responsive core/admin surfaces — Phase 2
 * Scope: accounts, dashboard, users/profile/access administration,
 * organization, data center, properties and clients.
 * Loads after Phase 1 responsive foundation.
 */

:root {
  --bx-core-admin-tablet-card-min: 13rem;
  --bx-core-admin-narrow-gap: clamp(0.6rem, 2.4vw, 0.9rem);
}

/* All Phase 2 surfaces must be shrinkable inside sidebar/main layouts. */
:where(
  .auth-page .page-hero-grid,
  .auth-form,
  .dashboard-shell,
  .dashboard-card-grid,
  .dashboard-card,
  .access-hero,
  .profile-hero,
  .access-panel-grid,
  .profile-control-grid,
  .profile-control-card,
  .access-table-shell,
  .permission-matrix-shell,
  .access-admin-shell,
  .access-admin-panel,
  .access-admin-two-column,
  .access-admin-table-shell,
  .organization-heading,
  .organization-tabs,
  .organization-stat-grid,
  .organization-split,
  .organization-detail-grid,
  .organization-members-layout,
  .organization-panel,
  .organization-filter,
  .organization-form,
  .organization-form-grid,
  .organization-dashboard-shell,
  .organization-dashboard-grid,
  .organization-dashboard-panels,
  .property-hero-grid,
  .property-header-row,
  .property-entry-grid,
  .property-filter-panel,
  .property-form,
  .property-form-grid,
  .property-detail-layout,
  .client-hero-grid,
  .client-list-heading,
  .client-registry-grid,
  .client-filter-panel,
  .client-form,
  .client-form-grid,
  .client-detail-layout,
  .property-filter-panel .phase26-filter-primary,
  .property-filter-panel .phase26-filter-groups,
  .client-filter-panel .phase26-filter-primary,
  .client-filter-panel .phase26-filter-groups
) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(
  .dashboard-card,
  .profile-control-card,
  .organization-panel,
  .organization-dashboard-card,
  .property-entry-card,
  .property-form-section,
  .client-registry-card,
  .client-form-section
) > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* Administration tables remain locally scrollable even without JavaScript. */
:where(
  .access-table-shell,
  .permission-matrix-shell,
  .access-admin-table-shell,
  .organization-table-wrap
) {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

:where(.access-table-shell, .permission-matrix-shell, .access-admin-table-shell, .organization-table-wrap):focus-visible {
  outline: 2px solid rgba(224, 190, 121, 0.7);
  outline-offset: 2px;
}

/* Long user data, emails, codes and translated labels should wrap, never widen a card. */
:where(
  .profile-control-card strong,
  .access-table td,
  .access-admin-panel,
  .organization-panel,
  .organization-table td,
  .property-entry-card,
  .client-registry-card,
  .client-card-copy,
  .client-card-assignment
) {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Tabs are intentionally horizontally scrollable on narrow profiles. */
.bx-tab-list {
  max-inline-size: 100%;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.bx-tab-btn {
  min-block-size: 44px;
}

/* Tablet / compact desktop. */
@media (max-width: 1199px) {
  .access-admin-matrix {
    min-width: 980px;
  }

  .organization-dashboard-table {
    min-width: 48rem;
  }

  .property-detail-layout,
  .client-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .property-price-card,
  .client-budget-panel,
  .client-assignment-panel {
    min-width: 0;
    max-width: 100%;
  }

  .client-registry-grid,
  .property-entry-grid,
  .profile-control-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bx-core-admin-tablet-card-min)), 1fr));
  }
}

/* Portrait tablet: split hero/forms become one-column before they get cramped. */
@media (max-width: 991px) {
  .auth-page .page-hero-grid,
  .profile-hero-grid,
  .property-hero-grid,
  .property-header-row,
  .property-detail-heading,
  .client-hero-grid,
  .client-list-heading,
  .client-profile-heading {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .auth-page .page-hero-grid {
    align-items: start;
  }

  .auth-form {
    width: min(100%, 44rem);
    margin-inline: auto;
  }

  .dashboard-actions > :where(.btn, a.btn, button),
  .admin-action-row > :where(.btn, a.btn, button) {
    flex: 1 1 min(14rem, 100%);
  }

  .access-admin-two-column,
  .organization-split,
  .organization-detail-grid,
  .organization-members-layout,
  .organization-dashboard-panels {
    grid-template-columns: minmax(0, 1fr);
  }

  .organization-filter,
  .organization-form-grid,
  .organization-dashboard-filter,
  .property-filter-panel,
  .client-filter-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .organization-dashboard-filter-actions {
    grid-column: 1 / -1;
  }

  .property-form-grid,
  .client-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .property-filter-panel .phase26-filter-primary,
  .property-filter-panel .phase26-filter-groups,
  .client-filter-panel .phase26-filter-primary,
  .client-filter-panel .phase26-filter-groups {
    grid-template-columns: minmax(0, 1fr);
  }

  .property-filter-panel .phase26-filter-groups fieldset,
  .client-filter-panel .phase26-filter-groups fieldset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .property-filter-panel .phase26-filter-primary .btn,
  .property-filter-panel .phase26-filter-primary > a.btn,
  .client-filter-panel .phase26-filter-primary .btn,
  .client-filter-panel .phase26-filter-primary > a.btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }
}

/* Phone landscape / small tablets. */
@media (max-width: 767px) {
  .auth-page {
    min-height: auto;
  }

  .auth-page .page-hero-grid {
    gap: var(--bx-core-admin-narrow-gap);
  }

  .auth-form,
  .access-admin-panel,
  .organization-panel,
  .property-form-section,
  .client-form-section {
    padding: clamp(0.85rem, 3.4vw, 1.15rem);
  }

  .dashboard-card-grid,
  .portal-grid,
  .profile-control-grid,
  .organization-dashboard-grid,
  .organization-stat-grid,
  .property-entry-grid,
  .client-registry-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .access-admin-matrix {
    min-width: 820px;
  }

  .access-admin-table-shell,
  .access-table-shell,
  .permission-matrix-shell,
  .organization-table-wrap {
    max-inline-size: 100%;
  }

  .organization-filter,
  .organization-form-grid,
  .organization-dashboard-filter,
  .property-filter-panel,
  .property-form-grid,
  .client-filter-panel,
  .client-form-grid,
  .property-filter-panel .phase26-filter-groups fieldset,
  .client-filter-panel .phase26-filter-groups fieldset {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .organization-table {
    min-width: 40rem;
  }

  .organization-dashboard-table {
    min-width: 44rem;
  }

  .organization-actions,
  .organization-membership-update {
    align-items: stretch;
  }

  .organization-membership-update > :where(select, .btn, button) {
    min-width: 0;
    max-width: 100%;
  }

  .property-pagination {
    flex-wrap: wrap;
    gap: 0.65rem;
    text-align: center;
  }

  .property-pagination a {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
  }

  .property-price-card,
  .client-decision-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .property-empty-state,
  .client-empty-state {
    padding: clamp(1rem, 5vw, 1.5rem);
  }

  .client-card-head,
  .client-card-actions,
  .property-row-actions {
    flex-wrap: wrap;
  }
}

/* Small phones / split panels. */
@media (max-width: 479px) {
  .auth-link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
  }

  .auth-link-row a {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .dashboard-actions > :where(.btn, a.btn, button),
  .admin-action-row > :where(.btn, a.btn, button),
  .organization-heading .action-row > :where(.btn, a.btn, button),
  .property-header-row .action-row > :where(.btn, a.btn, button),
  .client-list-heading .action-row > :where(.btn, a.btn, button) {
    flex: 1 1 100%;
    width: 100%;
  }

  .meta-strip {
    width: 100%;
  }

  .meta-strip span {
    max-width: 100%;
    white-space: normal;
  }

  .access-admin-matrix {
    min-width: 720px;
  }

  .organization-dashboard-filter-actions,
  .organization-actions,
  .organization-membership-update {
    width: 100%;
  }

  .organization-dashboard-filter-actions > :where(.btn, a.btn, button),
  .organization-actions > :where(.btn, a.btn, button),
  .organization-membership-update > :where(.btn, button) {
    flex: 1 1 100%;
    width: 100%;
  }

  .organization-inline-form {
    width: 100%;
  }

  .organization-inline-form :where(select, input:not([type="checkbox"]), .btn, button) {
    width: 100%;
    max-width: 100%;
  }

  .property-pagination {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .property-pagination a {
    justify-content: center;
  }

  .client-card-actions > :where(.btn, a.btn),
  .property-row-actions > :where(.btn, a.btn) {
    flex: 1 1 100%;
    width: 100%;
    justify-content: center;
  }
}

/* Keep compact controls usable on touch without changing desktop density. */
@media (pointer: coarse) {
  :where(
    .bx-tab-btn,
    .property-pagination a,
    .organization-actions a,
    .organization-actions button,
    .client-card-actions a,
    .property-row-actions a
  ) {
    min-block-size: 44px;
  }
}

/* Phase 5 browser corrective R3: compact-desktop property-row containment.
 * components.css promotes the internal property list to a six-column grid at
 * viewport >= 1024px. With the authenticated desktop sidebar still present,
 * the available main-content width is smaller than the viewport and that grid
 * can push property-row actions outside the document. Reflow only the internal
 * property list in the 992-1199px compact-desktop band; preserve all actions. */
@media (min-width: 992px) and (max-width: 1199px) {
  body.has-auth-sidebar .internal-property-row {
    grid-template-columns: minmax(92px, 0.32fr) minmax(0, 1fr) minmax(160px, 0.52fr);
    grid-template-areas:
      "code main price"
      "media main assignment"
      "media actions actions";
    align-items: start;
    max-inline-size: 100%;
  }

  body.has-auth-sidebar .internal-property-row > .property-code-badge {
    grid-area: code;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
  }

  body.has-auth-sidebar .internal-property-row > .internal-property-media {
    grid-area: media;
    min-inline-size: 0;
  }

  body.has-auth-sidebar .internal-property-row > .internal-property-main {
    grid-area: main;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  body.has-auth-sidebar .internal-property-row > .internal-property-price {
    grid-area: price;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  body.has-auth-sidebar .internal-property-row > .internal-property-assignment {
    grid-area: assignment;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  body.has-auth-sidebar .internal-property-row > .property-row-actions {
    grid-area: actions;
    min-inline-size: 0;
    max-inline-size: 100%;
    justify-content: flex-end;
    align-items: center;
  }

  body.has-auth-sidebar .internal-property-row > .property-row-actions > :where(.btn, a.btn) {
    flex: 0 1 auto;
    min-inline-size: 0;
    max-inline-size: 100%;
    white-space: normal;
  }
}