/*
FILE: web/css/runtime_auth_responsive_login_visible_v18_67.css
ROLE: auth portals hard responsive fix
STATUS: active patch v18.67
DOES:
- makes client / partner / administrator auth portals usable on all common device widths
- keeps Login and recovery buttons visible
- prevents auth cards from being wider than viewport
- unlocks page scrolling
- switches auth fields/actions to single column on narrow screens
DOES NOT:
- touch backend, sessions, database, passwords, API, submit/auth validation
*/

:root{
  --abc-v1867-auth-max: 560px;
  --abc-v1867-auth-gap: 7px;
  --abc-v1867-auth-pad: 10px;
}

/* Hard scroll unlock on auth portals. */
html,
body{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  min-height:100% !important;
  height:auto !important;
  max-height:none !important;
  -webkit-overflow-scrolling:touch !important;
  touch-action:pan-y !important;
}

body:is(
  [data-page="auth_login"],
  [data-page="auth_notice"],
  [data-auth-role],
  .abc-auth-portal-final-v18-63
){
  overflow-y:auto !important;
  overflow-x:hidden !important;
  min-height:auto !important;
  height:auto !important;
  max-height:none !important;
  position:relative !important;
}

/* No auth ancestor is allowed to clip the Login row. */
body:is(
  [data-page="auth_login"],
  [data-page="auth_notice"],
  [data-auth-role],
  .abc-auth-portal-final-v18-63
) :is(
  .page-shell,
  .compact-page,
  .abc-stack,
  main,
  main.abc-stack,
  .content-engine-panel,
  .clean-main-panel,
  .auth-shell-content-panel,
  .auth-wrapper,
  .auth-container,
  .auth-panel,
  .auth-panel-card,
  .auth-card,
  .auth-card-dashboard,
  .auth-dashboard-panel
){
  max-width:100% !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  box-sizing:border-box !important;
  transform:none !important;
}

/* Auth content must fit viewport width. */
body:is(
  [data-page="auth_login"],
  [data-page="auth_notice"],
  [data-auth-role],
  .abc-auth-portal-final-v18-63
) :is(
  .auth-panel-card,
  .auth-card,
  .auth-card-dashboard,
  .auth-dashboard-panel
){
  width:min(var(--abc-v1867-auth-max), calc(100vw - 24px)) !important;
  max-width:calc(100vw - 24px) !important;
  margin:0 auto !important;
  padding:var(--abc-v1867-auth-pad) !important;
  border-width:1px !important;
  border-radius:15px !important;
}

/* Smaller auth header so it cannot push login out. */
body:is(
  [data-page="auth_login"],
  [data-page="auth_notice"],
  [data-auth-role],
  .abc-auth-portal-final-v18-63
) :is(
  .auth-panel-badge,
  .portal-badge
){
  font-size:11px !important;
  min-height:18px !important;
  max-height:22px !important;
  padding:3px 8px !important;
  margin:0 0 5px 0 !important;
  line-height:1 !important;
}

body:is(
  [data-page="auth_login"],
  [data-page="auth_notice"],
  [data-auth-role],
  .abc-auth-portal-final-v18-63
) :is(
  h1,
  .auth-dashboard-panel__title,
  .auth-title,
  .auth-panel-title,
  .portal-title,
  .login-title
){
  font-size:clamp(20px, 4.2vw, 27px) !important;
  line-height:1.03 !important;
  margin:0 0 8px 0 !important;
  padding:0 !important;
  max-width:100% !important;
  white-space:normal !important;
}

/* Form: two columns only when there is enough room. */
body:is(
  [data-page="auth_login"],
  [data-page="auth_notice"],
  [data-auth-role],
  .abc-auth-portal-final-v18-63
) :is(
  form,
  .auth-form,
  .auth-form-v9
){
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap:var(--abc-v1867-auth-gap) !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

body:is(
  [data-page="auth_login"],
  [data-page="auth_notice"],
  [data-auth-role],
  .abc-auth-portal-final-v18-63
) :is(
  .client-form-field,
  .form-field,
  .auth-field,
  .field
){
  min-width:0 !important;
  min-height:0 !important;
  padding:7px 9px !important;
  margin:0 !important;
  border-width:1px !important;
  border-radius:11px !important;
  box-sizing:border-box !important;
}

body:is(
  [data-page="auth_login"],
  [data-page="auth_notice"],
  [data-auth-role],
  .abc-auth-portal-final-v18-63
) label{
  font-size:13px !important;
  line-height:1.05 !important;
  margin:0 0 5px 0 !important;
}

body:is(
  [data-page="auth_login"],
  [data-page="auth_notice"],
  [data-auth-role],
  .abc-auth-portal-final-v18-63
) :is(input,select){
  width:100% !important;
  min-width:0 !important;
  height:32px !important;
  min-height:32px !important;
  padding:6px 8px !important;
  box-sizing:border-box !important;
}

/* Login/actions visible always. */
body:is(
  [data-page="auth_login"],
  [data-page="auth_notice"],
  [data-auth-role],
  .abc-auth-portal-final-v18-63
) :is(
  .auth-actions,
  .auth-actions-dashboard,
  .form-actions,
  .button-row,
  .auth-button-row
){
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap:7px !important;
  width:100% !important;
  margin:8px 0 0 0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  visibility:visible !important;
  opacity:1 !important;
  overflow:visible !important;
}

body:is(
  [data-page="auth_login"],
  [data-page="auth_notice"],
  [data-auth-role],
  .abc-auth-portal-final-v18-63
) :is(
  .auth-actions,
  .auth-actions-dashboard,
  .form-actions,
  .button-row,
  .auth-button-row
) :is(a,button,input[type="submit"]){
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-width:0 !important;
  min-height:32px !important;
  height:auto !important;
  padding:7px 8px !important;
  font-size:13px !important;
  line-height:1.08 !important;
  white-space:normal !important;
  visibility:visible !important;
  opacity:1 !important;
  box-sizing:border-box !important;
}

/* Remove any old absolute/fixed overlay that may cover buttons on auth pages. */
body:is(
  [data-page="auth_login"],
  [data-page="auth_notice"],
  [data-auth-role],
  .abc-auth-portal-final-v18-63
) :is(
  .auth-overlay,
  .fullpage-overlay,
  .screen-overlay,
  .ui-lock-overlay,
  [class*="overlay-lock"],
  [class*="scroll-lock"]
){
  pointer-events:none !important;
}

/* Narrow devices: one clean column, login row stacked and visible. */
@media (max-width:620px){
  :root{
    --abc-v1867-auth-pad:8px;
  }

  body:is(
    [data-page="auth_login"],
    [data-page="auth_notice"],
    [data-auth-role],
    .abc-auth-portal-final-v18-63
  ) :is(
    .page-shell,
    .compact-page
  ){
    width:calc(100vw - 10px) !important;
    max-width:calc(100vw - 10px) !important;
    padding:0 !important;
  }

  body:is(
    [data-page="auth_login"],
    [data-page="auth_notice"],
    [data-auth-role],
    .abc-auth-portal-final-v18-63
  ) :is(
    .site-header,
    .abc-static-header,
    header[role="banner"],
    .content-top-strip,
    .content-top-bar,
    .abc-global-topbar-module,
    .global-topbar-module,
    .site-footer,
    .abc-static-footer,
    footer[role="contentinfo"]
  ){
    padding:7px !important;
    border-radius:14px !important;
  }

  body:is(
    [data-page="auth_login"],
    [data-page="auth_notice"],
    [data-auth-role],
    .abc-auth-portal-final-v18-63
  ) :is(
    .auth-panel-card,
    .auth-card,
    .auth-card-dashboard,
    .auth-dashboard-panel
  ){
    width:calc(100vw - 14px) !important;
    max-width:calc(100vw - 14px) !important;
    padding:8px !important;
  }

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

/* Very low height devices / landscape phones: compact more, allow scroll. */
@media (max-height:640px){
  body:is(
    [data-page="auth_login"],
    [data-page="auth_notice"],
    [data-auth-role],
    .abc-auth-portal-final-v18-63
  ) :is(
    .site-header,
    .abc-static-header,
    header[role="banner"],
    .content-top-strip,
    .content-top-bar,
    .abc-global-topbar-module,
    .global-topbar-module,
    .site-footer,
    .abc-static-footer,
    footer[role="contentinfo"]
  ){
    min-height:0 !important;
    padding-top:6px !important;
    padding-bottom:6px !important;
  }

  body:is(
    [data-page="auth_login"],
    [data-page="auth_notice"],
    [data-auth-role],
    .abc-auth-portal-final-v18-63
  ) :is(
    h1,
    .auth-dashboard-panel__title,
    .auth-title,
    .auth-panel-title,
    .portal-title,
    .login-title
  ){
    font-size:22px !important;
    margin-bottom:6px !important;
  }
}