/*
FILE: web/css/runtime_home_navigation_motor_stable_v18_57.css
ROLE: homepage navigation motor stability + admin green role + compact vertical rhythm
STATUS: active patch v18.57
DOES:
- gives administrator/admin UI the green role family on homepage and admin surfaces
- compacts vertical spacing on homepage/auth/dashboard/admin/flow navigation targets
- makes navigation from homepage feel like only content changes inside the same motor
- keeps one global width and one global module rhythm
- removes useless extra borders from nested panels
DOES NOT:
- touch backend, database, API, sessions, passwords, flow submit, jobs, storage
*/

:root{
  --abc-v1857-page-bg: #07101d;
  --abc-v1857-layout-max: min(1840px, calc(100vw - 52px));
  --abc-v1857-gap: 8px;

  --abc-v1857-header-line: rgba(231, 70, 174, .48);
  --abc-v1857-topbar-line: rgba(74, 166, 255, .36);
  --abc-v1857-content-line: rgba(255, 215, 90, .34);

  --abc-v1857-admin-green-line: rgba(75, 220, 145, .56);
  --abc-v1857-admin-green-soft: rgba(75, 220, 145, .11);
  --abc-v1857-admin-green-bg-a: rgba(12, 42, 30, .96);
  --abc-v1857-admin-green-bg-b: rgba(6, 20, 21, .98);

  --abc-v1857-blue-line: rgba(92, 181, 255, .52);
  --abc-v1857-red-line: rgba(255, 82, 112, .62);
  --abc-v1857-purple-line: rgba(188, 132, 255, .58);
}

/* Same motor size on all homepage navigation targets. */
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.private-client-account-page .page-shell,
body.business-client-account-page .page-shell,
body.private-partner-account-page .page-shell,
body.business-partner-account-page .page-shell{
  width: var(--abc-v1857-layout-max) !important;
  max-width: var(--abc-v1857-layout-max) !important;
  margin: 0 auto !important;
  gap: var(--abc-v1857-gap) !important;
}

/* Compact vertical rhythm: header/topbar/content/footer sit closer and consistently. */
.site-header,
.abc-static-header,
header[role="banner"],
.content-top-strip,
.content-top-bar,
.abc-global-topbar-module,
.global-topbar-module,
.abc-topbar-v10,
.index-general-topbar,
[data-meta-content-topbar="true"],
.site-footer,
.abc-static-footer,
footer[role="contentinfo"]{
  margin-top: 0 !important;
  margin-bottom: var(--abc-v1857-gap) !important;
}

.site-footer,
.abc-static-footer,
footer[role="contentinfo"]{
  margin-top: var(--abc-v1857-gap) !important;
  margin-bottom: 0 !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,
body.private-client-account-page .abc-stack,
body.business-client-account-page .abc-stack,
body.private-partner-account-page .abc-stack,
body.business-partner-account-page .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,
body.private-client-account-page main.abc-stack,
body.business-client-account-page main.abc-stack,
body.private-partner-account-page main.abc-stack,
body.business-partner-account-page main.abc-stack{
  margin-top: 0 !important;
  margin-bottom: var(--abc-v1857-gap) !important;
  padding: clamp(8px, 1.15vw, 14px) !important;
}

/* Homepage cards: compact without losing role colors. */
body[data-page="index"] .home-route-card,
body[data-page="index"] .home-flow-card,
body[data-page="index"] .flow-route-card,
body[data-page="index"] .flow-card,
body[data-page="index"] .abc-flow-card,
body[data-page="index"] [class*="flow"][class*="card"],
body[data-page="index"] [class*="route"][class*="card"],
body[data-page="index"] [data-flow-type],
body[data-page="index"] [data-route-family],
body[data-page="index"] [data-account-flow]{
  padding: clamp(12px, 1.35vw, 18px) !important;
  border-width: 1px !important;
  border-radius: 18px !important;
  transform: none !important;
}

/* Homepage navigation links / dashboard cards color families. */
body[data-page="index"] a[href*="client_dashboard"],
body[data-page="index"] [data-dashboard-family="client"],
body[data-page="index"] [data-user-role="client"],
body[data-page="index"] .client-dashboard-card{
  border-color: var(--abc-v1857-blue-line) !important;
  box-shadow: inset 0 0 0 1px rgba(92,181,255,.08), 0 12px 28px rgba(0,0,0,.20) !important;
}

body[data-page="index"] a[href*="partner_dashboard"],
body[data-page="index"] [data-dashboard-family="partner"],
body[data-page="index"] [data-user-role="partner"],
body[data-page="index"] .partner-dashboard-card{
  border-color: var(--abc-v1857-purple-line) !important;
  box-shadow: inset 0 0 0 1px rgba(188,132,255,.09), 0 12px 28px rgba(0,0,0,.20) !important;
}

/* Administrator is green in homepage and admin surfaces. */
body[data-page="index"] a[href*="/admin"],
body[data-page="index"] a[href*="admin"],
body[data-page="index"] .admin-dashboard-card,
body[data-page="index"] [data-dashboard-family="admin"],
body[data-page="index"] [data-user-role="admin"],
body[data-page="index"] [data-auth-role="admin"],
body[data-page="admin"] .auth-panel-card,
body[data-page="admin_control_panel"] .admin-side-shell,
body[data-page="admin_control_panel"] .content-engine-panel,
body[data-page="admin_control_panel"] .admin-dashboard-heading-panel{
  border-color: var(--abc-v1857-admin-green-line) !important;
  background:
    radial-gradient(circle at 10% 0%, var(--abc-v1857-admin-green-soft), transparent 36%),
    linear-gradient(180deg, var(--abc-v1857-admin-green-bg-a), var(--abc-v1857-admin-green-bg-b)) !important;
  box-shadow: inset 0 0 0 1px var(--abc-v1857-admin-green-soft), 0 12px 28px rgba(0,0,0,.22) !important;
}

/* Admin auth badge/title green accent, but no extra frame. */
body[data-auth-panel-family="admin"] .auth-panel-badge,
body[data-auth-role="admin"] .auth-panel-badge,
body[data-page="admin"] .auth-panel-badge{
  color: #a9f7c8 !important;
  border-color: rgba(75,220,145,.26) !important;
  background: rgba(75,220,145,.075) !important;
}

/* Standard/emergency/partner flow cards remain clear. */
body[data-page="index"] .home-flow-standard,
body[data-page="index"] [data-flow-type="standard"],
body[data-page="index"] [data-route-family="standard"],
body[data-page="index"] [data-account-flow="standard"]{
  border-color: var(--abc-v1857-blue-line) !important;
}

body[data-page="index"] .home-flow-emergency,
body[data-page="index"] [data-flow-type="emergency"],
body[data-page="index"] [data-route-family="emergency"],
body[data-page="index"] [data-account-flow="emergency"]{
  border-color: var(--abc-v1857-red-line) !important;
}

body[data-page="index"] .home-flow-partner,
body[data-page="index"] [data-flow-type="partner"],
body[data-page="index"] [data-route-family="partner"],
body[data-page="index"] [data-account-flow="partner"],
body[data-page="index"] a[href*="partner_account"]{
  border-color: var(--abc-v1857-purple-line) !important;
}

/* No useless nested borders: inner panels inside global content do not create a new page frame. */
body[data-page="index"] .content-engine-panel .content-engine-panel,
body[data-page="auth_login"] .content-engine-panel .content-engine-panel,
body[data-page="auth_notice"] .content-engine-panel .content-engine-panel,
body[data-page="client_dashboard"] .content-engine-panel .content-engine-panel,
body[data-page="partner_dashboard"] .content-engine-panel .content-engine-panel,
body[data-page="admin_control_panel"] .content-engine-panel .content-engine-panel,
body.private-client-account-page .content-engine-panel .content-engine-panel,
body.business-client-account-page .content-engine-panel .content-engine-panel,
body.private-partner-account-page .content-engine-panel .content-engine-panel,
body.business-partner-account-page .content-engine-panel .content-engine-panel,
body[data-page="index"] .clean-main-panel .clean-main-panel,
body.private-client-account-page .clean-main-panel .clean-main-panel,
body.business-client-account-page .clean-main-panel .clean-main-panel,
body.private-partner-account-page .clean-main-panel .clean-main-panel,
body.business-partner-account-page .clean-main-panel .clean-main-panel{
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Auth/portal navigation target: compact card so page feels same and only content changes. */
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: min(380px, 100%) !important;
  max-width: 380px !important;
  padding: 12px !important;
  border-radius: 16px !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;
}

/* Buttons in homepage cards: compact and stable. */
body[data-page="index"] .button,
body[data-page="index"] button,
body[data-page="index"] a.button{
  min-height: 34px !important;
  padding: 8px 13px !important;
  border-radius: 12px !important;
}

/* Kill old/dead visual labels and pseudo frames. */
.page-shell::before,
.page-shell::after,
.compact-page::before,
.compact-page::after,
.compact-index-page::before,
.compact-index-page::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,
[class*="debug"]::before,
[class*="debug"]::after,
[class*="old-frame"]::before,
[class*="old-frame"]::after{
  content: none !important;
  display: none !important;
}

/* Mobile: same width rhythm, less vertical waste. */
@media (max-width: 760px){
  :root{
    --abc-v1857-layout-max: calc(100vw - 10px);
    --abc-v1857-gap: 7px;
  }

  body[data-page="index"] .home-route-card,
  body[data-page="index"] .home-flow-card,
  body[data-page="index"] .flow-route-card,
  body[data-page="index"] .flow-card,
  body[data-page="index"] .abc-flow-card,
  body[data-page="index"] [class*="flow"][class*="card"],
  body[data-page="index"] [class*="route"][class*="card"]{
    padding: 12px !important;
    border-radius: 16px !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;
  }
}