/*
FILE: web/css/runtime_auth_surface_final_dark_single_layer_v18_47.css
ROLE: final auth/portal surface correction
STATUS: active patch v18.47
DOES:
- removes white background on auth/login/portal/dashboard surfaces
- removes double border overlap between blue container and yellow auth card
- keeps only one fine auth card line
- keeps mobile scroll and prevents horizontal overflow
- preserves admin as separate backend/login route
DOES NOT:
- touch database, API, storage, sessions, passwords, requests, jobs
*/

:root{
  --abc-auth-v1847-page-bg: #07101d;
  --abc-auth-v1847-shell-bg: #081425;
  --abc-auth-v1847-panel-bg: transparent;
  --abc-auth-v1847-card-bg: linear-gradient(180deg, rgba(15, 28, 47, .98), rgba(7, 16, 29, .98));
  --abc-auth-v1847-card-line-client: rgba(255, 216, 88, .34);
  --abc-auth-v1847-card-line-partner: rgba(184, 108, 255, .34);
  --abc-auth-v1847-card-line-admin: rgba(70, 255, 154, .34);
  --abc-auth-v1847-line-soft: rgba(57, 168, 255, .18);
}

/* AUTH / PORTAL / PROFILE pages must never sit on white canvas. */
html,
body[data-page="auth_login"],
body[data-page="auth_notice"],
body[data-page="client_dashboard"],
body[data-page="partner_dashboard"],
body[data-page="admin"]{
  background: var(--abc-auth-v1847-page-bg) !important;
  background-color: var(--abc-auth-v1847-page-bg) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Remove white/legacy canvas from the actual page shell. */
body[data-page="auth_login"] .page-shell,
body[data-page="auth_notice"] .page-shell,
body[data-page="client_dashboard"] .page-shell,
body[data-page="partner_dashboard"] .page-shell,
body[data-page="admin"] .page-shell,
body[data-page="auth_login"] .compact-page,
body[data-page="auth_notice"] .compact-page,
body[data-page="client_dashboard"] .compact-page,
body[data-page="partner_dashboard"] .compact-page,
body[data-page="admin"] .compact-page{
  background: var(--abc-auth-v1847-shell-bg) !important;
  background-color: var(--abc-auth-v1847-shell-bg) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Header/topbar/footer stay in the global dark family. */
body[data-page="auth_login"] .site-header,
body[data-page="auth_notice"] .site-header,
body[data-page="client_dashboard"] .site-header,
body[data-page="partner_dashboard"] .site-header,
body[data-page="admin"] .site-header,
body[data-page="auth_login"] .content-top-strip,
body[data-page="auth_notice"] .content-top-strip,
body[data-page="client_dashboard"] .content-top-strip,
body[data-page="partner_dashboard"] .content-top-strip,
body[data-page="admin"] .content-top-strip,
body[data-page="auth_login"] .site-footer,
body[data-page="auth_notice"] .site-footer,
body[data-page="client_dashboard"] .site-footer,
body[data-page="partner_dashboard"] .site-footer{
  background: rgba(8, 20, 37, .96) !important;
  background-color: rgba(8, 20, 37, .96) !important;
}

/* The auth area is NOT a second bordered card anymore. It is only the placement surface. */
body[data-page="auth_login"] .auth-shell-content-panel,
body[data-page="auth_notice"] .auth-shell-content-panel,
body[data-page="auth_login"] .auth-content-panel,
body[data-page="auth_notice"] .auth-content-panel,
body[data-page="auth_login"] .content-engine-panel,
body[data-page="auth_notice"] .content-engine-panel{
  background: var(--abc-auth-v1847-panel-bg) !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  min-height: auto !important;
  padding: clamp(10px, 1.8vw, 18px) !important;
}

/* Remove all pseudo/debug frames around auth shells. */
body[data-page="auth_login"] .page-shell::before,
body[data-page="auth_login"] .page-shell::after,
body[data-page="auth_notice"] .page-shell::before,
body[data-page="auth_notice"] .page-shell::after,
body[data-page="auth_login"] .auth-shell-content-panel::before,
body[data-page="auth_login"] .auth-shell-content-panel::after,
body[data-page="auth_notice"] .auth-shell-content-panel::before,
body[data-page="auth_notice"] .auth-shell-content-panel::after,
body[data-page="auth_login"] .content-engine-panel::before,
body[data-page="auth_login"] .content-engine-panel::after,
body[data-page="auth_notice"] .content-engine-panel::before,
body[data-page="auth_notice"] .content-engine-panel::after{
  content: none !important;
  display: none !important;
}

/* One real auth card. Fine border only. No thick yellow frame. */
body[data-page="auth_login"] .auth-panel-card,
body[data-page="auth_notice"] .auth-panel-card,
body[data-page="auth_login"] .auth-card,
body[data-page="auth_notice"] .auth-card,
body[data-page="auth_login"] .auth-card-dashboard,
body[data-page="auth_notice"] .auth-card-dashboard{
  width: min(430px, 100%) !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  padding: clamp(14px, 1.8vw, 18px) !important;
  border: 1px solid var(--abc-auth-v1847-card-line-client) !important;
  border-radius: 18px !important;
  outline: 0 !important;
  background: var(--abc-auth-v1847-card-bg) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .035),
    0 12px 28px rgba(0, 0, 0, .24) !important;
}

/* Role color remains only as a fine line, never thick shell. */
body[data-auth-panel-family="partner"][data-page="auth_login"] .auth-panel-card,
body[data-auth-panel-family="partner"][data-page="auth_notice"] .auth-panel-card,
body[data-auth-role="partner"][data-page="auth_login"] .auth-panel-card,
body[data-auth-role="partner"][data-page="auth_notice"] .auth-panel-card{
  border-color: var(--abc-auth-v1847-card-line-partner) !important;
}

body[data-auth-panel-family="admin"][data-page="auth_login"] .auth-panel-card,
body[data-auth-panel-family="admin"][data-page="auth_notice"] .auth-panel-card,
body[data-auth-role="admin"][data-page="auth_login"] .auth-panel-card,
body[data-auth-role="admin"][data-page="auth_notice"] .auth-panel-card{
  border-color: var(--abc-auth-v1847-card-line-admin) !important;
}

/* Input fields are part of the same dark surface. */
body[data-page="auth_login"] .auth-form-v9 .client-form-field,
body[data-page="auth_notice"] .auth-form-v9 .client-form-field{
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 12px !important;
  background: rgba(5, 13, 25, .58) !important;
  box-shadow: none !important;
}

body[data-page="auth_login"] .auth-form-v9 input,
body[data-page="auth_notice"] .auth-form-v9 input{
  border: 1px solid rgba(96, 165, 250, .24) !important;
  background: rgba(3, 10, 21, .82) !important;
  box-shadow: none !important;
}

/* Never allow side guide borders inside auth. */
body[data-page="auth_login"] .abc-stack,
body[data-page="auth_notice"] .abc-stack,
body[data-page="auth_login"] main.abc-stack,
body[data-page="auth_notice"] main.abc-stack{
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Dashboard pages also remain dark, without the old red outer surface. */
body[data-page="client_dashboard"] .content-engine-panel,
body[data-page="partner_dashboard"] .content-engine-panel,
body[data-page="client_dashboard"] .clean-main-panel,
body[data-page="partner_dashboard"] .clean-main-panel{
  background: rgba(8, 20, 37, .92) !important;
  border-color: var(--abc-auth-v1847-line-soft) !important;
  box-shadow: inset 0 0 0 1px rgba(57, 168, 255, .05) !important;
}

/* Mobile: card remains visible and scrollable, not clipped. */
@media (max-width: 760px){
  body[data-page="auth_login"] .page-shell,
  body[data-page="auth_notice"] .page-shell,
  body[data-page="client_dashboard"] .page-shell,
  body[data-page="partner_dashboard"] .page-shell{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body[data-page="auth_login"] .auth-shell-content-panel,
  body[data-page="auth_notice"] .auth-shell-content-panel,
  body[data-page="auth_login"] .content-engine-panel,
  body[data-page="auth_notice"] .content-engine-panel{
    padding: 8px !important;
    overflow: visible !important;
  }

  body[data-page="auth_login"] .auth-panel-card,
  body[data-page="auth_notice"] .auth-panel-card,
  body[data-page="auth_login"] .auth-card,
  body[data-page="auth_notice"] .auth-card{
    width: 100% !important;
    max-width: 100% !important;
    padding: 13px !important;
    border-radius: 16px !important;
  }
}