/* BLACK X Batch 5 — Remaining surfaces foundation.
   Scope is route namespace/view metadata emitted by base.html. */

:root {
  --bx-remain-edge-gold: rgba(214, 176, 91, .46);
  --bx-remain-edge-silver: rgba(220, 226, 236, .22);
  --bx-remain-highlight: rgba(255, 255, 255, .075);
  --bx-remain-glass: linear-gradient(145deg, rgba(27, 31, 38, .72), rgba(9, 11, 15, .88));
  --bx-remain-glass-soft: linear-gradient(145deg, rgba(26, 30, 36, .55), rgba(10, 12, 16, .76));
  --bx-remain-shadow: 0 14px 36px rgba(0, 0, 0, .24), inset 0 1px 0 var(--bx-remain-highlight);
  --bx-remain-shadow-hover: 0 18px 44px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .1);
  --bx-remain-radius: 14px;
  --bx-remain-gap: clamp(.65rem, 1.15vw, .95rem);
  --bx-remain-filter-min: 13rem;
  --bx-remain-form-min: 14rem;
  --bx-remain-card-min: 13.5rem;
  --bx-remain-kpi-min: 11.5rem;
}

/* Target only the remaining Batch 5 surfaces. */
: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"]
) #main-content,
:is(
  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 {
  --bx-control-min: var(--bx-remain-filter-min);
}

/* Universal scoped card language: thin Gold/Silver edge, glass depth, restrained highlight. */
: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-health, .vault-access-panel, .vault-warning-board, .vault-action-panel, .vault-reveal-panel,
  .vault-stat-grid article, .vault-policy-card, .vault-metadata-board, .vault-form-panel,
  .notification-card, .notification-detail-panel,
  .media-asset-card, .media-op-card, .media-op-primary-panel, .media-metadata-panel, .media-upload-policy,
  .reward-benefit-card, .rewards-summary, .rewards-history-panel, .rewards-integrity-warning,
  .rewards-stat-grid article, .rewards-management-grid > *, .profile-reward-summary
),
:is(
  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"]
) :is(
  .profile-control-card, .route-summary-grid article, .route-filter-panel,
  .route-table-wrap, .docs-center-tree, .docs-center-preview, .permission-matrix-shell
) {
  border: 1px solid var(--bx-remain-edge-silver);
  border-top-color: var(--bx-remain-edge-gold);
  border-radius: var(--bx-remain-radius);
  background: var(--bx-remain-glass);
  box-shadow: var(--bx-remain-shadow);
  backdrop-filter: blur(12px) saturate(112%);
  -webkit-backdrop-filter: blur(12px) saturate(112%);
}

: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(.notification-card, .media-asset-card, .media-op-card, .reward-benefit-card, .vault-policy-card),
:is(
  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"]
) :is(.profile-control-card, .route-summary-grid article) {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

@media (hover: hover) {
  :is(
    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="security_vault"]
  ) :is(.notification-card, .media-asset-card, .media-op-card, .reward-benefit-card, .vault-policy-card):hover,
  :is(
    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"]
  ) :is(.profile-control-card, .route-summary-grid article):hover {
    transform: translateY(-2px);
    border-color: var(--bx-remain-edge-gold);
    box-shadow: var(--bx-remain-shadow-hover);
  }
}

/* Adaptive grids. Count is governed by actual section width, not viewport assumptions. */
body[data-bx-namespace="security_vault"] :is(.vault-stat-grid, .vault-policy-grid),
body[data-bx-namespace="notifications"] :is(.notification-grid, .notification-preference-grid),
body[data-bx-namespace="whatsapp"] :is(.notification-grid, .notification-preference-grid),
body[data-bx-namespace="rewards"] :is(.rewards-stat-grid, .rewards-benefit-grid, .rewards-management-grid, .rewards-activity-grid),
body[data-bx-namespace="media_library"] :is(.media-gallery-grid, .media-op-gallery, .media-op-grid),
:is(
  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"]
) :is(.profile-control-grid, .route-summary-grid, .docs-center-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bx-remain-card-min)), 1fr));
  gap: var(--bx-remain-gap);
}

body[data-bx-namespace="security_vault"] .vault-stat-grid,
:is(body[data-bx-view="dashboard:system_health"], body[data-bx-view="dashboard:docs_center"], body[data-bx-view="dashboard:route_testing"]) .route-summary-grid,
body[data-bx-namespace="rewards"] .rewards-stat-grid {
  --bx-remain-card-min: var(--bx-remain-kpi-min);
}

/* Filter grids: never preserve a fixed 3/4-column count when the section becomes narrow. */
body[data-bx-namespace="security_vault"] .vault-filter-bar,
body[data-bx-namespace="notifications"] .crm-filters,
body[data-bx-namespace="whatsapp"] .crm-filters,
body[data-bx-namespace="rewards"] .rewards-filter,
:is(
  body[data-bx-view="dashboard:docs_center"], body[data-bx-view="dashboard:route_testing"],
  body[data-bx-view="dashboard:permissions"]
) .route-filter-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bx-remain-filter-min)), 1fr));
  gap: var(--bx-remain-gap);
  align-items: end;
}

body[data-bx-namespace="security_vault"] .vault-filter-bar > *,
body[data-bx-namespace="notifications"] .crm-filters > *,
body[data-bx-namespace="whatsapp"] .crm-filters > *,
body[data-bx-namespace="rewards"] .rewards-filter > *,
:is(body[data-bx-view="dashboard:docs_center"], body[data-bx-view="dashboard:route_testing"], body[data-bx-view="dashboard:permissions"]) .route-filter-panel > * {
  min-width: 0;
  width: 100%;
}

/* Grouped forms use the same section-width contract. */
body[data-bx-namespace="security_vault"] .vault-form-grid,
body[data-bx-namespace="notifications"] :is(.notification-preference-grid, .crm-form-shell .notification-preference-grid),
body[data-bx-namespace="whatsapp"] :is(.notification-preference-grid, .crm-form-shell .notification-preference-grid),
body[data-bx-namespace="rewards"] :is(.rewards-form-grid, .rewards-adjust-grid),
body[data-bx-namespace="media_library"] :is(.media-form-grid, .media-op-upload-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bx-remain-form-min)), 1fr));
  gap: var(--bx-remain-gap);
}

/* Inputs/selects must consume the space owned by their grid cell. */
: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(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
:is(
  body[data-bx-view="dashboard:docs_center"], body[data-bx-view="dashboard:route_testing"],
  body[data-bx-view="dashboard:permissions"]
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Keep buttons usable without stretching every action to full width. */
: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(.action-row, .vault-action-row, .notification-actions, .rewards-head-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
}

/* Compact data density without deleting information. */
body[data-bx-namespace="security_vault"] :is(.vault-stat-grid article, .vault-policy-card),
body[data-bx-namespace="notifications"] .notification-card,
body[data-bx-namespace="whatsapp"] .notification-card,
body[data-bx-namespace="rewards"] :is(.rewards-stat-grid article, .reward-benefit-card),
body[data-bx-namespace="media_library"] :is(.media-asset-card, .media-op-card),
:is(
  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"]
) :is(.profile-control-card, .route-summary-grid article) {
  padding: clamp(.8rem, 1.3vw, 1.05rem);
}

body[data-bx-namespace="notifications"] .notification-card p,
body[data-bx-namespace="whatsapp"] .notification-card p,
body[data-bx-namespace="rewards"] :is(.reward-benefit-card p, .rewards-summary p),
body[data-bx-namespace="media_library"] :is(.media-card-body p, .media-op-card-body p),
body[data-bx-namespace="security_vault"] :is(.vault-policy-card p, .vault-stat-grid small) {
  margin-block: .35rem;
  line-height: 1.45;
}

/* Detail metadata adapts rather than forcing two columns. */
body[data-bx-namespace="notifications"] .notification-meta-grid,
body[data-bx-namespace="whatsapp"] .notification-meta-grid,
body[data-bx-namespace="media_library"] .media-metadata-panel dl,
body[data-bx-namespace="security_vault"] .vault-metadata-board dl,
body[data-bx-namespace="rewards"] .rewards-redemption-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: .55rem;
}

/* Tables own overflow; the document must not. */
:is(
  body[data-bx-namespace="security_vault"], body[data-bx-namespace="rewards"],
  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"]
) :is(.vault-table-wrap, .rewards-table-wrap, .route-table-wrap, .permission-matrix-shell) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

:is(
  body[data-bx-namespace="security_vault"], body[data-bx-namespace="rewards"],
  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"]
) :is(.vault-table, .rewards-table, .route-table) {
  width: 100%;
}

/* Security Vault navigation stays one-line/scrollable but visually quieter. */
body[data-bx-namespace="security_vault"] .vault-subnav {
  gap: .45rem;
  padding-block: .65rem;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}
body[data-bx-namespace="security_vault"] .vault-subnav :is(a, span) {
  padding: .45rem .7rem;
  border-color: var(--bx-remain-edge-silver);
  background: rgba(255, 255, 255, .025);
}

/* Media layouts: give preview and metadata sane minimums then collapse naturally. */
body[data-bx-namespace="media_library"] :is(.media-detail-layout, .media-form-layout) {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(min(100%, 18rem), .75fr);
  gap: var(--bx-remain-gap);
  align-items: start;
}
body[data-bx-namespace="media_library"] :is(.media-detail-preview, .media-metadata-panel, .media-upload-form, .media-upload-policy) {
  min-width: 0;
}
body[data-bx-namespace="media_library"] :is(img, video) {
  max-width: 100%;
  height: auto;
}

/* Auth pages: keep the form prominent and readable, never an overly narrow second column. */
body[data-bx-namespace="accounts"] .page-hero-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: start;
}
body[data-bx-namespace="accounts"] .auth-form {
  width: min(100%, 46rem);
  justify-self: stretch;
  border: 1px solid var(--bx-remain-edge-silver);
  border-top-color: var(--bx-remain-edge-gold);
  border-radius: var(--bx-remain-radius);
  background: var(--bx-remain-glass);
  box-shadow: var(--bx-remain-shadow);
  backdrop-filter: blur(12px) saturate(112%);
  -webkit-backdrop-filter: blur(12px) saturate(112%);
}
body[data-bx-namespace="accounts"] .auth-form-long {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bx-remain-form-min)), 1fr));
  gap: .75rem var(--bx-remain-gap);
}
body[data-bx-namespace="accounts"] .auth-form-long > :is(.luxury-caption, h2, .auth-error-block, .btn, .auth-link-row) {
  grid-column: 1 / -1;
}
body[data-bx-namespace="accounts"] .auth-field {
  min-width: 0;
  margin: 0;
}

/* System surfaces share the same low-density grid language. */
:is(
  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"]
) :is(.route-testing-shell, .docs-center-shell, .permission-matrix-shell) {
  min-width: 0;
}

/* Narrow section fallback — driven by actual available width after sidebar/panels. */
@media (max-width: 760px) {
  :root {
    --bx-remain-filter-min: 100%;
    --bx-remain-form-min: 100%;
    --bx-remain-card-min: 100%;
  }

  body[data-bx-namespace="media_library"] :is(.media-detail-layout, .media-form-layout) {
    grid-template-columns: 1fr;
  }

  :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(.action-row, .vault-action-row, .notification-actions, .rewards-head-actions) > * {
    max-width: 100%;
  }
}