/**
 * Universal UI layout — single source for responsive page shells, tables, and forms.
 * Change tokens here to adapt phone / fold / desktop / ultra-wide across the app.
 * Breakpoints mirror common.js: phone ≤768, tablet/fold ≤1024.
 */

:root {
  --ui-bp-phone: 768px;
  --ui-bp-tablet: 1024px;
  --ui-bp-desktop: 1280px;
  --ui-bp-wide: 1600px;
  --ui-bp-ultra: 1920px;

  /* Content column — grows on large monitors instead of staying ~1180px */
  --ui-page-max: min(100%, 1920px);
  --ui-page-max-fluid: min(100%, 2400px);
  --ui-page-max-narrow: min(100%, 32rem);
  --ui-page-max-medium: min(100%, 68.75rem);
  --ui-content-max-width: var(--ui-page-max);

  --ui-page-padding-inline: var(--layout-page-padding, 2rem);
  --ui-stack-gap: var(--spacing-4, 1rem);
  --ui-touch-min: 44px;
}

@media screen and (min-width: 1920px) {
  :root {
    --ui-page-max: min(100%, 2200px);
    --ui-page-max-fluid: min(100%, 2600px);
    --ui-content-max-width: var(--ui-page-max);
  }
}

@media screen and (min-width: 2560px) {
  :root {
    --ui-page-max: min(100%, 2400px);
    --ui-page-max-fluid: min(100%, 2800px);
  }
}

/* Align legacy token with universal column */
:root {
  --ds-content-max-width: var(--ui-content-max-width);
}

/* ── Page shells (one column story everywhere) ─────────────────────────── */

.ui-page,
.page-wrapper:not(.ui-page-opt-out),
.main-container:not(.ui-page-opt-out),
.injected-page-content > .page-wrapper:not(.ui-page-opt-out),
.injected-page-content > .main-container:not(.ui-page-opt-out) {
  width: 100%;
  max-width: var(--ui-content-max-width);
  margin-inline: auto;
  box-sizing: border-box;
}

.page-card:not(.ui-page-opt-out):not(.page-card-narrow):not(.wide-layout):not(.ui-page-fluid):not(.ui-page-medium) {
  max-width: var(--ui-content-max-width);
}

.page-card.wide-layout,
.page-card.ui-page-fluid,
.page-wrapper.ui-page-fluid,
.ui-page-fluid {
  max-width: var(--ui-page-max-fluid) !important;
  width: 100%;
}

.page-card.ui-page-medium,
.ui-page-medium {
  max-width: var(--ui-page-max-medium) !important;
  width: 100%;
}

.page-card-narrow,
.ui-page-narrow {
  max-width: var(--ui-page-max-narrow) !important;
  width: 100%;
}

/* Reporting pages that had hard-coded narrow columns */
.tr-page-shell,
.ds-page-head,
.client-reporting-container {
  max-width: 100% !important;
  width: 100%;
  margin-inline: auto;
}

body.client-mr-body-lock .client-reporting-layout.page-wrapper {
  max-width: var(--ui-page-max-fluid) !important;
  width: 100%;
}

.injected-page-content {
  min-width: 0;
  width: 100%;
}

.injected-page-content .page-wrapper,
.injected-page-content .main-container,
.injected-page-content .page-card {
  max-width: 100%;
}

/* ── Page header / toolbar stacking ────────────────────────────────────── */

.ui-stack,
.page-header,
.main-container > .page-header,
.cr-mr-title-actions-row,
.cr-mr-header-outline-actions,
.page-nav,
.tr-action-bar,
.tr-gen-toolbar,
.filters-grid,
.bafin-upload-form {
  box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
  .cr-mr-title-actions-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ui-stack-gap);
  }

  .cr-mr-header-outline-actions {
    margin-left: 0 !important;
    justify-content: flex-start;
  }

  .tr-action-bar,
  .tr-gen-toolbar,
  .bafin-upload-form {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .page-header:not(.cr-reporting-page-header) {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ui-stack-gap);
  }

  .page-nav {
    flex-wrap: wrap;
    gap: 8px;
    height: auto;
    min-height: 48px;
  }

  .page-nav-left,
  .page-nav-center,
  .page-nav-right {
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 1650px) {
  :root {
    --layout-page-padding: 1.25rem;
    --ui-page-padding-inline: 1.25rem;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --ui-page-padding-inline: var(--spacing-4, 1rem);
  }

  .page-header .page-actions,
  .page-header-right,
  .main-container > .page-header .page-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .cr-mr-filter-toolbar-row,
  .cr-reports-filter-main,
  .tr-report-filter-toolbar,
  .tr-action-bar__main {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .cr-reports-filter-main .cr-reports-toolbar-btn,
  .tr-report-filter-actions .btn,
  .tr-gen-toolbar-submit {
    width: 100%;
    min-height: var(--ui-touch-min);
  }

  .ava-config-grid {
    grid-template-columns: 1fr !important;
  }

  .ava-config-card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ava-config-card-actions .btn {
    width: 100%;
    min-height: var(--ui-touch-min);
  }

  .summary-cards,
  .summary-strip,
  .report-cards-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Fold inner portrait (~769–1024): 2-col grids where useful */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

/* ── Universal tables ──────────────────────────────────────────────────── */

.ui-table-scroll,
.table-container,
.data-table-container,
.scroll-container,
.section-card-table-panel,
.cr-reports-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-body table.data-table,
.page-body table.standard-data-table,
.page-body table.table,
.main-container table.data-table,
.main-container table.standard-data-table,
.injected-page-content table.data-table,
.injected-page-content table.standard-data-table,
.section-card table.data-table,
.section-card table.table {
  width: 100%;
}

@media screen and (max-width: 768px) {
  html,
  body {
    overflow-x: clip;
    max-width: 100%;
  }

  .table-container table,
  .data-table-container table,
  .scroll-container table,
  .cr-reports-table-wrap table,
  .page-body .table-container table,
  .page-body table.data-table,
  .page-body table.standard-data-table,
  .main-container table.data-table {
    min-width: min(600px, 100%);
  }

  /* Card view hides the wide table — drop min-width so the page cannot scroll sideways. */
  .table-container.cards-active:not(.show-table) table,
  .data-table-container.cards-active:not(.show-table) table,
  .scroll-container.cards-active:not(.show-table) table,
  .cr-reports-table-wrap.cards-active:not(.show-table) table {
    min-width: 0;
  }

  .page-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    height: auto;
    min-height: 0;
  }

  .page-nav-left,
  .page-nav-right,
  .page-nav-center {
    width: 100%;
    justify-content: flex-start;
  }

  .page-nav-center {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .page-nav-center.collapsed {
    display: none;
  }

  .page-nav-center.expanded {
    display: flex;
  }

  .page-nav-center .btn,
  .page-nav-mobile-toggle {
    width: 100%;
    min-height: var(--ui-touch-min);
    justify-content: center;
  }

  .page-nav-mobile-toggle {
    display: inline-flex;
    align-items: center;
  }
}

/* Card view (built by enableResponsiveTables in common.js) */
@media screen and (max-width: 1024px) {
  .table-container.cards-active:not(.show-table) table,
  .data-table-container.cards-active:not(.show-table) table,
  .scroll-container.cards-active:not(.show-table) table,
  .cr-reports-table-wrap.cards-active:not(.show-table) table {
    display: none;
  }
}

/* ── Universal forms ───────────────────────────────────────────────────── */

.filters-grid,
.form-row,
.md-field-grid,
.nm-grid-2,
.nm-grid-4 {
  display: grid;
  gap: var(--ui-stack-gap);
  width: 100%;
  max-width: 100%;
}

.filters-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
}

@media screen and (max-width: 768px) {
  .filters-grid,
  .md-field-grid,
  .nm-grid-2,
  .nm-grid-4 {
    grid-template-columns: 1fr !important;
  }

  .form-input,
  .form-select,
  .form-textarea,
  .cr-reports-date-input,
  .tr-toolbar-control {
    font-size: 16px;
    min-height: var(--ui-touch-min);
    max-width: 100%;
  }
}

/* ── Utility: hide on viewport (set by common.js on <html>) ───────────── */

html.ui-vp-phone .ui-hide-phone,
html.ui-vp-tablet .ui-hide-tablet,
html.ui-vp-desktop .ui-hide-desktop {
  display: none !important;
}

html.ui-vp-phone .ui-show-phone,
html.ui-vp-tablet .ui-show-tablet {
  display: revert;
}

/* ── Tablet / iPad / fold-inner portrait ───────────────────────────────── */

/* Info-card list pages (aggregated broker view, etc.) */
@media screen and (max-width: 1024px) {
  .info-card > .d-flex.justify-between.align-center,
  .info-card > .d-flex.justify-between {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .info-card > .d-flex.justify-between > .d-flex,
  .info-card > .d-flex.justify-between .d-flex.gap-2 {
    flex-wrap: wrap;
    width: 100%;
    gap: 0.5rem;
  }

  .info-card > .d-flex.justify-between h3 {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .page-body > .d-flex.flex-wrap.gap-3.mb-4 {
    flex-direction: column;
  }

  .page-body > .d-flex.flex-wrap.gap-3 .stat-card.flex-1 {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .tabs-header .tab-button,
  .tabs-container > .tabs-header .tab-button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .nm-spreadsheet-scroll,
  .notification-matrix .nm-matrix-wrap,
  .nm-spreadsheet-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .hub-stats-row,
  .cr-mr-stats-row,
  .summary-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Large / ultra-wide monitors ─────────────────────────────────────── */

@media screen and (min-width: 1920px) {
  .injected-page-content {
    padding-inline: max(var(--ui-page-padding-inline), 1.25rem);
  }

  .page-card.wide-layout,
  .page-wrapper.ui-page-fluid .page-card {
    max-width: var(--ui-page-max-fluid) !important;
  }

  .hub-stats-row,
  .cr-mr-stats-row,
  .summary-cards,
  .summary-strip {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  }
}

@media screen and (min-width: 2560px) {
  .hub-stats-row,
  .cr-mr-stats-row,
  .summary-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  }
}