/*
FILE: web/css/runtime_global_shell_header_footer_stable_v18_53.css
ROLE: global header/footer/content/topbar visual stability
STATUS: active patch v18.53
DOES:
- makes header and footer use the same purple/dark family everywhere
- keeps global content/shell area with a fine yellow line
- keeps role/location/date/language topbar blue and clean
- stabilizes page width/scrollbar so auth navigation no longer feels like page jump
- applies to index, auth portals, dashboards, admin surfaces, non-flow pages
- does not break flow pages; only updates header/footer colors there too
DOES NOT:
- touch backend, database, API, sessions, passwords, flow submit, jobs, storage
*/

:root{
  --abc-v1853-bg: #07101d;
  --abc-v1853-shell: #081425;

  --abc-v1853-purple-a: rgba(30, 23, 57, .98);
  --abc-v1853-purple-b: rgba(10, 18, 34, .98);
  --abc-v1853-purple-line: rgba(190, 132, 255, .36);
  --abc-v1853-purple-soft: rgba(190, 132, 255, .11);

  --abc-v1853-blue-line: rgba(74, 166, 255, .36);
  --abc-v1853-blue-soft: rgba(74, 166, 255, .07);

  --abc-v1853-yellow-line: rgba(255, 215, 90, .34);
  --abc-v1853-yellow-soft: rgba(255, 215, 90, .06);

  --abc-v1853-max: min(1840px, calc(100vw - 52px));
  --abc-v1853-gap: 12px;
}

/* Stabilize navigation: avoid width shift when pages with/without scrollbar are opened. */
html{
  scrollbar-gutter: stable both-edges;
  background: var(--abc-v1853-bg) !important;
}

body{
  background: var(--abc-v1853-bg) !important;
  overflow-x: hidden !important;
}

/* Stable global page shell on index/auth/dashboard/admin. */
body[data-page="index"] .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="admin_control_panel"] .page-shell,
body[data-page="index"] .compact-page,
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,
body[data-page="admin_control_panel"] .compact-page{
  width: var(--abc-v1853-max) !important;
  max-width: var(--abc-v1853-max) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  background: var(--abc-v1853-shell) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Header and footer share the same beautiful purple/dark family globally. */
.site-header,
.abc-static-header,
header[role="banner"],
.site-footer,
.abc-static-footer,
footer[role="contentinfo"]{
  background:
    radial-gradient(circle at 12% 0%, var(--abc-v1853-purple-soft), transparent 36%),
    linear-gradient(180deg, var(--abc-v1853-purple-a), var(--abc-v1853-purple-b)) !important;
  border: 1px solid var(--abc-v1853-purple-line) !important;
  border-radius: 26px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 18px 42px rgba(0,0,0,.24) !important;
  color: #f4f8ff !important;
}

/* Header/footer inner pieces must not create second ugly borders. */
.site-header .section-head,
.site-header .control-visual-head,
.site-header .compact-section-head,
.site-header .panel,
.site-footer .section-head,
.site-footer .control-visual-head,
.site-footer .compact-section-head,
.site-footer .panel,
.abc-static-header .section-head,
.abc-static-footer .section-head{
  background: transparent !important;
  border-color: rgba(190,132,255,.16) !important;
  box-shadow: none !important;
}

/* The role/location/date/language topbar remains the clean blue module. */
.content-top-strip,
.content-top-bar,
.abc-global-topbar-module,
.global-topbar-module,
.abc-topbar-v10,
.index-general-topbar,
[data-meta-content-topbar="true"]{
  background: linear-gradient(180deg, rgba(8, 24, 44, .94), rgba(6, 18, 34, .96)) !important;
  border: 1px solid var(--abc-v1853-blue-line) !important;
  border-radius: 22px !important;
  box-shadow:
    inset 0 0 0 1px var(--abc-v1853-blue-soft),
    0 12px 28px rgba(0,0,0,.14) !important;
  color: #edf7ff !important;
}

/* Acasă injected button belongs to this blue topbar family. */
.abc-topbar-home-button-v18-52{
  border-color: rgba(74,166,255,.46) !important;
  background: linear-gradient(180deg, rgba(21,68,116,.78), rgba(8,24,44,.78)) !important;
}

/* Main content/shell global line = fine yellow. */
body[data-page="index"] .abc-stack,
body[data-page="auth_login"] .abc-stack,
body[data-page="auth_notice"] .abc-stack,
body[data-page="client_dashboard"] .abc-stack,
body[data-page="partner_dashboard"] .abc-stack,
body[data-page="admin"] .abc-stack,
body[data-page="admin_control_panel"] .abc-stack,
body[data-page="index"] main.abc-stack,
body[data-page="auth_login"] main.abc-stack,
body[data-page="auth_notice"] main.abc-stack,
body[data-page="client_dashboard"] main.abc-stack,
body[data-page="partner_dashboard"] main.abc-stack,
body[data-page="admin"] main.abc-stack,
body[data-page="admin_control_panel"] main.abc-stack{
  border: 1px solid var(--abc-v1853-yellow-line) !important;
  border-radius: 24px !important;
  background: rgba(7, 17, 31, .58) !important;
  box-shadow: inset 0 0 0 1px var(--abc-v1853-yellow-soft) !important;
  padding: clamp(10px, 1.6vw, 20px) !important;
  overflow-x: hidden !important;
  transform: none !important;
}

/* Flow pages: do not change their content logic, only bring header/footer to same global beauty. */
body.private-client-account-page .site-header,
body.business-client-account-page .site-header,
body.private-partner-account-page .site-header,
body.business-partner-account-page .site-header,
body.private-client-account-page .site-footer,
body.business-client-account-page .site-footer,
body.private-partner-account-page .site-footer,
body.business-partner-account-page .site-footer{
  background:
    radial-gradient(circle at 12% 0%, var(--abc-v1853-purple-soft), transparent 36%),
    linear-gradient(180deg, var(--abc-v1853-purple-a), var(--abc-v1853-purple-b)) !important;
  border-color: var(--abc-v1853-purple-line) !important;
}

/* Keep flow topbar blue if it uses same module. */
body.private-client-account-page .content-top-strip,
body.business-client-account-page .content-top-strip,
body.private-partner-account-page .content-top-strip,
body.business-partner-account-page .content-top-strip{
  border-color: var(--abc-v1853-blue-line) !important;
}

/* Auth pages: stable visual position and no old double-frame feeling. */
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{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: clamp(10px, 1.5vw, 18px) !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{
  transform: none !important;
}

/* Remove debug/old frame labels if any old CSS still tries to draw them. */
.page-shell::before,
.page-shell::after,
.site-header::before,
.site-header::after,
.site-footer::before,
.site-footer::after,
.content-top-strip::before,
.content-top-strip::after,
.content-engine-panel::before,
.content-engine-panel::after,
.clean-main-panel::before,
.clean-main-panel::after{
  content: none !important;
  display: none !important;
}

/* Mobile stability. */
@media (max-width: 760px){
  :root{
    --abc-v1853-max: calc(100vw - 10px);
  }

  .site-header,
  .abc-static-header,
  header[role="banner"],
  .site-footer,
  .abc-static-footer,
  footer[role="contentinfo"],
  .content-top-strip,
  .content-top-bar,
  .abc-global-topbar-module,
  .global-topbar-module,
  .abc-topbar-v10,
  .index-general-topbar,
  [data-meta-content-topbar="true"]{
    border-radius: 18px !important;
  }

  body[data-page="index"] .abc-stack,
  body[data-page="auth_login"] .abc-stack,
  body[data-page="auth_notice"] .abc-stack,
  body[data-page="client_dashboard"] .abc-stack,
  body[data-page="partner_dashboard"] .abc-stack,
  body[data-page="admin"] .abc-stack,
  body[data-page="admin_control_panel"] .abc-stack{
    border-radius: 18px !important;
    padding: 8px !important;
  }
}