/*
FILE: web/css/runtime_index_flow_outer_frame_green_thin_v18_65.css
ROLE: homepage flow panel outer frame truth
STATUS: active patch v18.65
DOES:
- kills the red outer frame around the whole homepage flow panel
- changes that outer flow panel frame to thin green
- keeps inner card colors untouched
DOES NOT:
- touch backend, auth, database, submit, sessions, storage
*/

:root{
  --abc-v1865-green-frame: rgba(80, 230, 155, .46);
  --abc-v1865-green-frame-soft: rgba(80, 230, 155, .08);
}

/* Exact problem: outer wrapper around the whole homepage flow/cards panel. */
body[data-page="index"] :is(
  .abc-stack,
  main.abc-stack,
  .home-flow-panel,
  .home-route-panel,
  .home-content-panel,
  .home-dashboard-panel,
  .index-flow-panel,
  .index-flow-grid-wrap,
  .index-flow-grid,
  .flow-grid-wrap,
  .flow-grid,
  .route-grid-wrap,
  .route-grid,
  .dashboard-grid,
  .content-engine-panel,
  .clean-main-panel,
  [data-home-flow-panel],
  [data-flow-menu],
  [data-content-menu],
  [data-route-panel],
  [data-flow-panel]
){
  border-color: var(--abc-v1865-green-frame) !important;
  border-width: 1px !important;
  outline: 0 !important;
  box-shadow:
    inset 0 0 0 1px var(--abc-v1865-green-frame-soft),
    0 10px 24px rgba(0,0,0,.14) !important;
}

/* Kill red/orange/pink helper borders that may be injected as pseudo layers. */
body[data-page="index"] :is(
  .abc-stack,
  main.abc-stack,
  .home-flow-panel,
  .home-route-panel,
  .home-content-panel,
  .home-dashboard-panel,
  .index-flow-panel,
  .index-flow-grid-wrap,
  .index-flow-grid,
  .flow-grid-wrap,
  .flow-grid,
  .route-grid-wrap,
  .route-grid,
  .dashboard-grid,
  .content-engine-panel,
  .clean-main-panel,
  [data-home-flow-panel],
  [data-flow-menu],
  [data-content-menu],
  [data-route-panel],
  [data-flow-panel]
)::before,
body[data-page="index"] :is(
  .abc-stack,
  main.abc-stack,
  .home-flow-panel,
  .home-route-panel,
  .home-content-panel,
  .home-dashboard-panel,
  .index-flow-panel,
  .index-flow-grid-wrap,
  .index-flow-grid,
  .flow-grid-wrap,
  .flow-grid,
  .route-grid-wrap,
  .route-grid,
  .dashboard-grid,
  .content-engine-panel,
  .clean-main-panel,
  [data-home-flow-panel],
  [data-flow-menu],
  [data-content-menu],
  [data-route-panel],
  [data-flow-panel]
)::after{
  content: none !important;
  display: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* If an old CSS left red borders inline/classed on direct flow wrapper children, override only wrappers, not emergency card. */
body[data-page="index"] :is(
  .abc-stack,
  main.abc-stack,
  .home-flow-panel,
  .home-route-panel,
  .home-content-panel,
  .index-flow-panel,
  .content-engine-panel,
  .clean-main-panel
) > :is(
  .index-flow-grid,
  .flow-grid,
  .route-grid,
  .dashboard-grid,
  .index-flow-grid-wrap,
  .flow-grid-wrap,
  .route-grid-wrap
){
  border-color: var(--abc-v1865-green-frame) !important;
  border-width: 1px !important;
  outline: 0 !important;
  box-shadow: inset 0 0 0 1px var(--abc-v1865-green-frame-soft) !important;
}

/* Preserve emergency card red/pink only inside its own card, not the outer panel. */
body[data-page="index"] :is(
  [data-flow-type="emergency"],
  [data-account-flow="emergency"],
  .flow-card-emergency,
  .emergency-card
){
  border-width: 1px !important;
}

/* Strong fallback: any red/pink debug frame marked as index outer frame becomes green. */
body[data-page="index"] :is(
  [class*="outer-frame"],
  [class*="flow-frame"],
  [class*="panel-frame"],
  [class*="content-frame"],
  [class*="engine-frame"]
){
  border-color: var(--abc-v1865-green-frame) !important;
  border-width: 1px !important;
  outline-color: transparent !important;
  box-shadow: inset 0 0 0 1px var(--abc-v1865-green-frame-soft) !important;
}