/*
FILE: web/css/runtime_frontend_final_polish_scroll_grid_v18_63.css
ROLE: final frontend polish: auth scroll, compact auth title, home flow green thin frame, adaptive flow grids
STATUS: active patch v18.63
DOES:
- fixes mobile/device scrolling for auth/login/profile/flow frontend pages
- makes auth titles smaller on client/partner/admin login portals
- makes homepage flow container border thin green instead of red/orange aggressive frame
- reduces homepage flow card text size slightly
- allows flow/profile form fields to use 3/4/5 columns where space allows, without forcing on small screens
- keeps administrator technical UI private and consumer UI clean
DOES NOT:
- touch database, API, sessions, passwords, submit logic, storage, jobs
*/

:root{
  --abc-v1863-bg:#07101d;
  --abc-v1863-max:min(1840px, calc(100vw - 52px));
  --abc-v1863-gap:6px;
  --abc-v1863-green-thin:rgba(80, 230, 155, .44);
  --abc-v1863-green-soft:rgba(80, 230, 155, .08);
  --abc-v1863-blue:rgba(74,166,255,.42);
  --abc-v1863-purple:rgba(188,132,255,.52);
  --abc-v1863-yellow:rgba(255,215,90,.28);
}

/* Device scroll truth: never lock frontend pages. */
html,
body{
  min-height:100% !important;
  height:auto !important;
  max-height:none !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-y:auto !important;
  touch-action:pan-y !important;
  background:var(--abc-v1863-bg) !important;
}

body:is(
  [data-page="auth_login"],
  [data-page="auth_notice"],
  [data-page="client_dashboard"],
  [data-page="partner_dashboard"],
  [data-page="profile_account"],
  .private-client-account-page,
  .business-client-account-page,
  .private-partner-account-page,
  .business-partner-account-page,
  .client-profile-page,
  .partner-profile-page,
  .profile-account-page
){
  overflow-y:auto !important;
  position:relative !important;
  min-height:auto !important;
  height:auto !important;
}

/* Kill old scroll blockers from auth/fullpage/runtime rules. */
body:is(
  [data-page="auth_login"],
  [data-page="auth_notice"],
  [data-page="client_dashboard"],
  [data-page="partner_dashboard"],
  [data-page="profile_account"],
  .private-client-account-page,
  .business-client-account-page,
  .private-partner-account-page,
  .business-partner-account-page
) :is(
  .fullpage,
  .full-page,
  .fullpage-surface,
  .fullpage-panel,
  .full-height,
  .screen-lock,
  .scroll-lock,
  .no-scroll,
  .modal-lock,
  [class*="fullpage"],
  [class*="full-page"],
  [class*="scroll-lock"],
  [class*="no-scroll"],
  [class*="min-vh"],
  [style*="100vh"],
  [style*="overflow: hidden"],
  [style*="overflow:hidden"]
){
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  position:relative !important;
}

/* Same global surface width. */
.page-shell,
.compact-page,
.compact-index-page,
body[data-page] .page-shell,
body[class*="account-page"] .page-shell{
  width:var(--abc-v1863-max) !important;
  max-width:var(--abc-v1863-max) !important;
  margin-inline:auto !important;
  box-sizing:border-box !important;
}

/* Auth login: titles must be clearly smaller on all three portals. */
body:is([data-page="auth_login"],[data-page="auth_notice"],[data-auth-role]) :is(
  .auth-dashboard-panel__title,
  .auth-title,
  .auth-panel-title,
  .portal-title,
  .login-title,
  .auth-panel-card h1,
  .auth-card h1,
  .auth-dashboard-panel h1,
  h1
){
  font-size:clamp(20px, 2vw, 28px) !important;
  line-height:1.02 !important;
  margin:0 0 8px 0 !important;
  padding:0 !important;
  letter-spacing:-.02em !important;
  color:#f7fbff !important;
  opacity:1 !important;
  text-shadow:0 1px 0 rgba(0,0,0,.75) !important;
}

body:is([data-page="auth_login"],[data-page="auth_notice"],[data-auth-role]) :is(
  .auth-panel-badge,
  .portal-badge,
  .abc-auth-badge-compact-v18-61
){
  font-size:11px !important;
  line-height:1 !important;
  min-height:18px !important;
  padding:3px 8px !important;
  margin:0 0 5px 0 !important;
}

/* Auth card: fit controls without clipping and allow page scroll if needed. */
body:is([data-page="auth_login"],[data-page="auth_notice"],[data-auth-role]) :is(
  .auth-shell-content-panel,
  .content-engine-panel,
  .clean-main-panel
){
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  padding:6px !important;
}

body:is([data-page="auth_login"],[data-page="auth_notice"],[data-auth-role]) :is(
  .auth-panel-card,
  .auth-card,
  .auth-card-dashboard,
  .auth-dashboard-panel
){
  width:min(600px,100%) !important;
  max-width:600px !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  padding:10px !important;
  overflow:visible !important;
  border-width:1px !important;
  border-radius:15px !important;
}

body:is([data-page="auth_login"],[data-page="auth_notice"],[data-auth-role]) :is(
  .auth-actions,
  .auth-actions-dashboard,
  .form-actions,
  .button-row
){
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap:7px !important;
  margin:8px 0 0 0 !important;
  padding:0 !important;
}

body:is([data-page="auth_login"],[data-page="auth_notice"],[data-auth-role]) :is(
  .auth-actions,
  .auth-actions-dashboard,
  .form-actions,
  .button-row
) :is(a,button){
  min-height:32px !important;
  padding:7px 9px !important;
  font-size:13px !important;
  border-radius:11px !important;
}

/* Homepage flow area: thin green frame, not red/orange aggressive frame. */
body[data-page="index"] :is(
  .home-flow-panel,
  .home-route-panel,
  .home-content-panel,
  .index-flow-grid,
  .flow-grid,
  .route-grid,
  [data-home-flow-panel],
  [data-flow-menu],
  [data-content-menu]
){
  border-color:var(--abc-v1863-green-thin) !important;
  border-width:1px !important;
  box-shadow:
    inset 0 0 0 1px var(--abc-v1863-green-soft),
    0 10px 24px rgba(0,0,0,.16) !important;
  outline:0 !important;
}

/* Kill old red/orange pseudo frames around flow menu/content. */
body[data-page="index"] :is(
  .home-flow-panel,
  .home-route-panel,
  .home-content-panel,
  .index-flow-grid,
  .flow-grid,
  .route-grid,
  [data-home-flow-panel],
  [data-flow-menu],
  [data-content-menu]
)::before,
body[data-page="index"] :is(
  .home-flow-panel,
  .home-route-panel,
  .home-content-panel,
  .index-flow-grid,
  .flow-grid,
  .route-grid,
  [data-home-flow-panel],
  [data-flow-menu],
  [data-content-menu]
)::after{
  content:none !important;
  display:none !important;
}

/* Homepage flow cards: text smaller and more elegant. */
body[data-page="index"] :is(
  .home-route-card,
  .home-flow-card,
  .flow-route-card,
  .flow-card,
  .abc-flow-card,
  [data-flow-type],
  [data-route-family],
  [data-account-flow]
){
  padding:10px 13px !important;
  border-width:1px !important;
  border-radius:15px !important;
  min-height:0 !important;
  height:auto !important;
}

body[data-page="index"] :is(
  .home-route-card,
  .home-flow-card,
  .flow-route-card,
  .flow-card,
  .abc-flow-card,
  [data-flow-type],
  [data-route-family],
  [data-account-flow]
) :is(h1,h2,h3,.card-title,.flow-card-title){
  font-size:clamp(18px, 1.65vw, 25px) !important;
  line-height:1.08 !important;
  margin:0 0 7px 0 !important;
  font-weight:750 !important;
}

body[data-page="index"] :is(
  .home-route-card,
  .home-flow-card,
  .flow-route-card,
  .flow-card,
  .abc-flow-card,
  [data-flow-type],
  [data-route-family],
  [data-account-flow]
) :is(p,.card-subtitle,.flow-card-subtitle,.card-description){
  font-size:clamp(13px, 1.15vw, 18px) !important;
  line-height:1.15 !important;
  margin:0 0 7px 0 !important;
}

/* Flow/profile grids: adaptive 3/4/5 columns where space allows, never forced on small screens. */
body:is(
  .private-client-account-page,
  .business-client-account-page,
  .private-partner-account-page,
  .business-partner-account-page,
  .client-profile-page,
  .partner-profile-page,
  .profile-account-page,
  [data-page="profile_account"],
  [data-page="client_dashboard"],
  [data-page="partner_dashboard"]
) :is(
  form,
  .flow-form,
  .request-form,
  .profile-form,
  .account-form,
  .form-grid,
  .flow-grid-fields,
  .request-fields,
  .profile-fields,
  .account-fields
){
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap:8px !important;
  align-items:start !important;
}

/* Allow up to 5 columns on very wide screens. */
@media (min-width:1700px){
  body:is(
    .private-client-account-page,
    .business-client-account-page,
    .private-partner-account-page,
    .business-partner-account-page,
    .client-profile-page,
    .partner-profile-page,
    .profile-account-page,
    [data-page="profile_account"],
    [data-page="client_dashboard"],
    [data-page="partner_dashboard"]
  ) :is(.flow-form,.request-form,.profile-form,.account-form,.form-grid,.flow-grid-fields,.request-fields,.profile-fields,.account-fields){
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)) !important;
  }
}

/* Field compactness without breaking usability. */
body:is(
  .private-client-account-page,
  .business-client-account-page,
  .private-partner-account-page,
  .business-partner-account-page,
  .client-profile-page,
  .partner-profile-page,
  .profile-account-page,
  [data-page="profile_account"],
  [data-page="client_dashboard"],
  [data-page="partner_dashboard"]
) :is(
  .client-form-field,
  .partner-form-field,
  .profile-field,
  .account-field,
  .flow-field,
  .form-field,
  .request-field,
  .field
){
  min-height:0 !important;
  padding:7px 9px !important;
  margin:0 !important;
  border-radius:11px !important;
}

body:is(
  .private-client-account-page,
  .business-client-account-page,
  .private-partner-account-page,
  .business-partner-account-page,
  .client-profile-page,
  .partner-profile-page,
  .profile-account-page,
  [data-page="profile_account"],
  [data-page="client_dashboard"],
  [data-page="partner_dashboard"]
) :is(input,select,textarea){
  min-height:32px !important;
  padding:7px 9px !important;
}

body:is(
  .private-client-account-page,
  .business-client-account-page,
  .private-partner-account-page,
  .business-partner-account-page,
  .client-profile-page,
  .partner-profile-page,
  .profile-account-page,
  [data-page="profile_account"],
  [data-page="client_dashboard"],
  [data-page="partner_dashboard"]
) label{
  font-size:14px !important;
  line-height:1.08 !important;
  margin:0 0 5px 0 !important;
}

/* Multi-line fields should span wider where useful. */
body:is(
  .private-client-account-page,
  .business-client-account-page,
  .private-partner-account-page,
  .business-partner-account-page,
  .client-profile-page,
  .partner-profile-page,
  .profile-account-page
) :is(
  textarea,
  .field-wide,
  .full-width,
  .span-2,
  [data-field-wide],
  [data-span="2"],
  [data-span="full"]
){
  grid-column:span 2 !important;
}

/* Preserve strong flow titles in flow content, but not auth portal login titles. */
body:is(.private-client-account-page,.business-client-account-page,.private-partner-account-page,.business-partner-account-page) :is(
  .flow-title,
  .request-title,
  .client-flow-title,
  .partner-flow-title,
  .account-flow-title,
  [data-flow-title]
){
  font-size:clamp(26px, 2.7vw, 42px) !important;
  line-height:1.04 !important;
  margin:6px 0 8px 0 !important;
}

/* Admin technical UI stays private; consumer still clean. */
body:not([data-page="admin"]):not([data-page="admin_control_panel"]):not([data-admin-view="1"]):not(.admin-private-page) :is(
  .admin-only,
  .admin-only-flow-card,
  .abc-admin-only-technical-copy,
  .technical,
  .technical-panel,
  .debug,
  .debug-panel,
  .diagnostic,
  .diagnostic-panel,
  .route-inspector,
  [data-admin-only],
  [data-technical],
  [data-debug],
  [data-private-admin]
){
  display:none !important;
  visibility:hidden !important;
}

/* Mobile/tablet safety. */
@media (max-width:980px){
  body:is(
    .private-client-account-page,
    .business-client-account-page,
    .private-partner-account-page,
    .business-partner-account-page,
    .client-profile-page,
    .partner-profile-page,
    .profile-account-page,
    [data-page="profile_account"],
    [data-page="client_dashboard"],
    [data-page="partner_dashboard"]
  ) :is(form,.flow-form,.request-form,.profile-form,.account-form,.form-grid,.flow-grid-fields,.request-fields,.profile-fields,.account-fields){
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)) !important;
  }

  body:is(
    .private-client-account-page,
    .business-client-account-page,
    .private-partner-account-page,
    .business-partner-account-page,
    .client-profile-page,
    .partner-profile-page,
    .profile-account-page
  ) :is(textarea,.field-wide,.full-width,.span-2,[data-field-wide],[data-span="2"],[data-span="full"]){
    grid-column:1 / -1 !important;
  }
}

@media (max-width:760px){
  :root{
    --abc-v1863-max:calc(100vw - 10px);
    --abc-v1863-gap:6px;
  }

  body:is([data-page="auth_login"],[data-page="auth_notice"],[data-auth-role]) :is(
    .auth-dashboard-panel__title,
    .auth-title,
    .auth-panel-title,
    .portal-title,
    .login-title,
    h1
  ){
    font-size:clamp(20px, 6vw, 28px) !important;
  }

  body:is([data-page="auth_login"],[data-page="auth_notice"],[data-auth-role]) :is(
    form,
    .auth-form,
    .auth-form-v9,
    .auth-actions,
    .auth-actions-dashboard,
    .form-actions,
    .button-row
  ){
    grid-template-columns:1fr !important;
  }

  body:is(
    .private-client-account-page,
    .business-client-account-page,
    .private-partner-account-page,
    .business-partner-account-page,
    .client-profile-page,
    .partner-profile-page,
    .profile-account-page,
    [data-page="profile_account"],
    [data-page="client_dashboard"],
    [data-page="partner_dashboard"]
  ) :is(form,.flow-form,.request-form,.profile-form,.account-form,.form-grid,.flow-grid-fields,.request-fields,.profile-fields,.account-fields){
    grid-template-columns:1fr !important;
  }

  body[data-page="index"] :is(.home-route-card,.home-flow-card,.flow-route-card,.flow-card,.abc-flow-card){
    padding:9px 10px !important;
  }
}