/*
  Stage 105.3I CLEAN — Page Header / Surface Uniformity v1
  Built cleanly from confirmed Stage 105.3H CLEAN.

  Scope:
  - Controlled UI polish for old/partially treated page headers and page surface
    wrappers only.
  - Keeps Customer 360 tabbed profile, menus/dropdowns, popup styling,
    table readability, page/sidebar offset and safe button uniformity intact.

  Safety:
  - Frontend CSS-only visual layer.
  - No backend, API, routes, popup behaviour, app.js, save logic, Billing/SageOne,
    RADIUS, prepaid, products, Asset Register backend, Job Cards, Calendar,
    Android, workers, or protected modules.
*/

:root{
  --ui1053i-surface-bg: rgba(255,255,255,.94);
  --ui1053i-surface-border: rgba(148,163,184,.26);
  --ui1053i-surface-shadow: 0 10px 28px rgba(15,23,42,.055);
  --ui1053i-surface-radius: 18px;
  --ui1053i-section-radius: 16px;
  --ui1053i-blue: #2563eb;
  --ui1053i-teal: #0f9f8f;
  --ui1053i-title: #0f172a;
  --ui1053i-muted: #475569;
  --ui1053i-soft-border: #dbe5ef;
}

html.stage1053i-page-surface-uniformity #app-screen > main#page.page{
  color: var(--ui1053i-title);
}

/* Modernise only top-level page headers/shells that older modules render directly
   inside #page. Customer 360 uses its own .stage822/.stage1052c system and is
   deliberately excluded. */
html.stage1053i-page-surface-uniformity #app-screen > main#page.page > :is(.page-title-row,.page-header,.s953-hero,.s9520-hero,.s9521-hero,.s981-hero,.stage-page-hero,.ui-page-hero):not(.stage822-header-card):not(.stage1052c-tab-header),
html.stage1053i-page-surface-uniformity #app-screen > main#page.page > section[class*="hero"]:not(.stage822-header-card):not(.stage1052c-tab-header),
html.stage1053i-page-surface-uniformity #app-screen > main#page.page > div[class*="hero"]:not(.stage822-header-card):not(.stage1052c-tab-header){
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0 0 18px 0;
  padding: clamp(18px, 1.45vw, 26px) clamp(20px, 1.8vw, 32px);
  border: 1px solid var(--ui1053i-surface-border);
  border-radius: var(--ui1053i-surface-radius);
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,253,255,.82) 52%, rgba(245,243,255,.70));
  box-shadow: var(--ui1053i-surface-shadow);
  overflow: hidden;
}

/* Consistent title text inside legacy headers. */
html.stage1053i-page-surface-uniformity #app-screen > main#page.page > :is(.page-title-row,.page-header,.s953-hero,.s9520-hero,.s9521-hero,.s981-hero,.stage-page-hero,.ui-page-hero) h1,
html.stage1053i-page-surface-uniformity #app-screen > main#page.page > section[class*="hero"] h1,
html.stage1053i-page-surface-uniformity #app-screen > main#page.page > div[class*="hero"] h1{
  margin: 0;
  color: var(--ui1053i-title) !important;
  -webkit-text-fill-color: var(--ui1053i-title) !important;
  font-size: clamp(26px, 2.1vw, 40px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 900;
}

html.stage1053i-page-surface-uniformity #app-screen > main#page.page > :is(.page-title-row,.page-header,.s953-hero,.s9520-hero,.s9521-hero,.s981-hero,.stage-page-hero,.ui-page-hero) p,
html.stage1053i-page-surface-uniformity #app-screen > main#page.page > section[class*="hero"] p,
html.stage1053i-page-surface-uniformity #app-screen > main#page.page > div[class*="hero"] p{
  color: var(--ui1053i-muted) !important;
  -webkit-text-fill-color: var(--ui1053i-muted) !important;
  font-size: 14px;
  line-height: 1.55;
  max-width: 980px;
}

/* Standard action alignment inside page headers only. */
html.stage1053i-page-surface-uniformity #app-screen > main#page.page > :is(.page-title-row,.page-header,.s953-hero,.s9520-hero,.s9521-hero,.s981-hero,.stage-page-hero,.ui-page-hero) :is(.page-actions,.hero-actions,.s953-hero-actions,.toolbar-actions){
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

/* Top-level content surfaces: preserve existing page functionality, but give older
   pages the same clean panel feel. These selectors stay under #page and do not
   target dropdown menus, sidebars or modal overlays. */
html.stage1053i-page-surface-uniformity #app-screen > main#page.page > :is(.panel,.table-wrap,.shell-grid,.dashboard-panel,.list-panel,.form-panel,.report-panel,.stage-card,.content-card),
html.stage1053i-page-surface-uniformity #app-screen > main#page.page > section[class*="panel"],
html.stage1053i-page-surface-uniformity #app-screen > main#page.page > section[class*="card-grid"],
html.stage1053i-page-surface-uniformity #app-screen > main#page.page > section[class*="table"]{
  box-sizing: border-box;
  max-width: none;
  border-color: var(--ui1053i-surface-border);
  border-radius: var(--ui1053i-section-radius);
  background-color: var(--ui1053i-surface-bg);
  box-shadow: 0 8px 22px rgba(15,23,42,.045);
}

/* KPI/stat card rows should feel like one product, but must not become a masonry
   layout. Keep wrapping predictable and simple. */
html.stage1053i-page-surface-uniformity #app-screen > main#page.page > :is(.kpi-row,.stats-row,.summary-row,.metric-row),
html.stage1053i-page-surface-uniformity #app-screen > main#page.page :is(.kpi-row,.stats-row,.summary-row,.metric-row){
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  align-items: stretch;
}

html.stage1053i-page-surface-uniformity #app-screen > main#page.page :is(.kpi,.stat-card,.summary-card,.metric-card){
  border: 1px solid var(--ui1053i-surface-border);
  border-radius: 15px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 6px 16px rgba(15,23,42,.04);
}

/* Keep old table/filter toolbars readable and evenly spaced without changing
   their JavaScript behaviour. */
html.stage1053i-page-surface-uniformity #app-screen > main#page.page :is(.toolbar,.filter-bar,.filters,.table-toolbar,.search-row){
  gap: 10px;
  flex-wrap: wrap;
  align-items: end;
}

html.stage1053i-page-surface-uniformity #app-screen > main#page.page :is(input,select,textarea){
  max-width: 100%;
}

/* Protect navigation, dropdowns, Customer 360 tabs and modal surfaces from this
   page-surface layer. */
html.stage1053i-page-surface-uniformity :is(#sidebar,.sidebar,.side-nav,.stage831-dropdown,.submenu-bar,.stage1052c-tabbed-profile,.stage1052c-tab-list,.stage1052c-panel,.modal,.modal-content,.popup,.dialog,.stage822-modal){
  box-shadow: revert;
}

@media (max-width: 900px){
  html.stage1053i-page-surface-uniformity #app-screen > main#page.page > :is(.page-title-row,.page-header,.s953-hero,.s9520-hero,.s9521-hero,.s981-hero,.stage-page-hero,.ui-page-hero),
  html.stage1053i-page-surface-uniformity #app-screen > main#page.page > section[class*="hero"],
  html.stage1053i-page-surface-uniformity #app-screen > main#page.page > div[class*="hero"]{
    padding: 16px 18px;
  }
  html.stage1053i-page-surface-uniformity #app-screen > main#page.page > :is(.page-title-row,.page-header,.s953-hero,.s9520-hero,.s9521-hero,.s981-hero,.stage-page-hero,.ui-page-hero) :is(.page-actions,.hero-actions,.s953-hero-actions,.toolbar-actions){
    justify-content: flex-start;
  }
}