/*
 * ISP Forge / WISP Forge
 * Stage 105.3U CLEAN — Laptop / Half-Screen Responsive Sanity Pass
 *
 * Purpose:
 * - Improve usable width/wrapping on 14-inch, 16-inch, half-screen and narrower desktop windows.
 * - Keep the confirmed sidebar offset, page heading standard, table readability and button uniformity.
 * - Explicitly protect Customer 360 and the rebuilt Customers -> Edit Customer page picker.
 *
 * Safety:
 * - CSS-only visual pass.
 * - No routes, API calls, frontend/app.js, backend or business logic changes.
 */

:root {
  --ui1053u-page-gap: clamp(14px, 1.45vw, 22px);
  --ui1053u-card-pad: clamp(14px, 1.35vw, 22px);
  --ui1053u-heading-pad-y: clamp(18px, 1.65vw, 26px);
  --ui1053u-heading-pad-x: clamp(18px, 1.85vw, 30px);
}

/* Keep every normal page inside the visible work area when the browser is narrow. */
body:not(.login-page) main#page,
body:not(.login-page) main.page,
body:not(.login-page) #page.page {
  box-sizing: border-box;
  min-width: 0;
}

#page > * {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

/* Normal page headings should wrap actions underneath instead of pushing content sideways. */
#page .ui1053m4-page-heading:not(.stage833-edit-customer-page):not(.customer360-shell):not(.customer-360-page),
#page .ui1053m4-existing:not(.stage833-edit-customer-page):not(.customer360-shell):not(.customer-360-page),
#page .page-header:not(.customer360-header):not(.customer-profile-header),
#page .page-hero:not(.customer360-header):not(.customer-profile-header) {
  box-sizing: border-box;
  max-width: 100%;
}

#page .ui1053m4-page-heading:not(.stage833-edit-customer-page) .stage833-title-row,
#page .ui1053m4-page-heading:not(.stage833-edit-customer-page) .title-row,
#page .ui1053m4-page-heading:not(.stage833-edit-customer-page) .page-title-row,
#page .page-header:not(.stage833-edit-customer-page) .title-row,
#page .page-hero:not(.stage833-edit-customer-page) .title-row {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 10px 14px;
}

#page .ui1053m4-page-heading:not(.stage833-edit-customer-page) h1,
#page .page-header:not(.stage833-edit-customer-page) h1,
#page .page-hero:not(.stage833-edit-customer-page) h1 {
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* Action/tool/filter rows should wrap cleanly on smaller screens. */
#page .toolbar,
#page .tool-row,
#page .filter-row,
#page .filters,
#page .actions,
#page .action-row,
#page .stage833-actions:not(.stage833-edit-customer-page .stage833-actions),
#page [class*="toolbar"],
#page [class*="filter-row"],
#page [class*="action-row"] {
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  gap: 10px;
}

#page .toolbar > *,
#page .tool-row > *,
#page .filter-row > *,
#page .filters > *,
#page .actions > *,
#page .action-row > * {
  min-width: 0;
}

/* Cards and panels keep a consistent but less cramped internal spacing on laptops. */
#page .card,
#page .panel,
#page .section-card,
#page .page-card,
#page .setup-card,
#page .report-card,
#page .billing-card,
#page .admin-card,
#page .device-card,
#page .product-card,
#page .radius-card,
#page .prepaid-card {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

/* Tables should scroll horizontally inside their own wrappers instead of widening the full page. */
#page .table-wrap,
#page .table-wrapper,
#page .table-responsive,
#page .data-table-wrap,
#page .grid-table-wrap,
#page .report-table-wrap,
#page .billing-table-wrap,
#page .admin-table-wrap,
#page .device-table-wrap,
#page .product-table-wrap,
#page .radius-table-wrap,
#page .prepaid-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#page table {
  max-width: 100%;
}

/* KPI / summary tiles should wrap instead of squeezing into unreadable columns. */
#page .kpi-row,
#page .summary-row,
#page .stats-row,
#page .metric-row,
#page .dashboard-row,
#page [class*="kpi-row"],
#page [class*="summary-row"],
#page [class*="stats-row"] {
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
}

#page .kpi-grid,
#page .summary-grid,
#page .stats-grid,
#page .metrics-grid,
#page [class*="kpi-grid"],
#page [class*="summary-grid"],
#page [class*="stats-grid"] {
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 1440px) {
  #page {
    padding-left: var(--ui1053u-page-gap);
    padding-right: var(--ui1053u-page-gap);
  }

  #page .ui1053m4-page-heading:not(.stage833-edit-customer-page):not(.customer360-shell):not(.customer-360-page),
  #page .page-header:not(.customer360-header):not(.customer-profile-header),
  #page .page-hero:not(.customer360-header):not(.customer-profile-header) {
    padding: var(--ui1053u-heading-pad-y) var(--ui1053u-heading-pad-x);
  }
}

@media (max-width: 1200px) {
  #page .toolbar,
  #page .tool-row,
  #page .filter-row,
  #page .filters,
  #page .actions,
  #page .action-row,
  #page [class*="toolbar"],
  #page [class*="filter-row"],
  #page [class*="action-row"] {
    align-items: stretch;
  }

  #page .toolbar input,
  #page .toolbar select,
  #page .filter-row input,
  #page .filter-row select,
  #page .filters input,
  #page .filters select,
  #page [class*="filter"] input,
  #page [class*="filter"] select {
    max-width: 100%;
  }

  #page .kpi-grid,
  #page .summary-grid,
  #page .stats-grid,
  #page .metrics-grid,
  #page [class*="kpi-grid"],
  #page [class*="summary-grid"],
  #page [class*="stats-grid"] {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }
}

@media (max-width: 980px) {
  #page .ui1053m4-page-heading:not(.stage833-edit-customer-page):not(.customer360-shell):not(.customer-360-page),
  #page .page-header:not(.customer360-header):not(.customer-profile-header),
  #page .page-hero:not(.customer360-header):not(.customer-profile-header) {
    padding: 16px;
  }

  #page .toolbar,
  #page .tool-row,
  #page .filter-row,
  #page .filters,
  #page .actions,
  #page .action-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Explicit protection for the rebuilt Customers -> Edit Customer page-owned picker. */
#page .stage833-edit-customer-page,
#page .stage833-edit-customer-page * {
  pointer-events: auto;
}

#page .stage833-edit-customer-page .stage833-results {
  overflow-y: auto;
  pointer-events: auto;
  touch-action: auto;
}

#page .stage833-edit-customer-page .stage833-result {
  pointer-events: auto;
  min-height: unset;
  cursor: pointer;
}

#page .stage833-edit-customer-page .stage833-result-main,
#page .stage833-edit-customer-page .stage833-result-sub {
  pointer-events: none;
}

/* Explicit protection for Customer 360 profile shell and tabs. */
#page .customer360-shell,
#page .customer-360-page,
#page .customer360-header,
#page .customer-profile-header,
#page .ui-v2-customer360-tabs,
#page .customer360-tabs {
  max-width: 100%;
}