/* Survey Control by PorsTech — definitive cinematic layer for functional routes.
   Real controls stay usable; the scene is context, never a simulated interface. */

:root {
  --sc-r2-navy: #061827;
  --sc-r2-ink: #0a2235;
  --sc-r2-cyan: #39d8f1;
  --sc-r2-gold: #f4b632;
  --sc-r2-line: rgba(57, 216, 241, .28);
  --sc-r2-panel: rgba(6, 24, 39, .66);
  --sc-r2-panel-strong: rgba(6, 24, 39, .82);
}

body.scene-login { --sc-functional-scene: url('/assets/scenes-r2/login.png'); --sc-functional-focus: center center; }
body.scene-registreren { --sc-functional-scene: url('/assets/scenes-r2/registreren.png'); --sc-functional-focus: center center; }
body.scene-account { --sc-functional-scene: url('/assets/scenes-r2/account.png'); --sc-functional-focus: center center; }
body.scene-wachtwoord-herstel { --sc-functional-scene: url('/assets/scenes-r2/wachtwoord-herstel.png'); --sc-functional-focus: center center; }
body.scene-betaling { --sc-functional-scene: url('/assets/scenes-r2/betaling.png'); --sc-functional-focus: center center; }
body.scene-team-dashboard { --sc-functional-scene: url('/assets/scenes-r2/team-dashboard.png'); --sc-functional-focus: center top; }
body.scene-team-login { --sc-functional-scene: url('/assets/scenes-r2/team-login.png'); --sc-functional-focus: center center; }
body.scene-support { --sc-functional-scene: url('/assets/scenes-r2/support.png'); --sc-functional-focus: center top; }
body.scene-bestanden { --sc-functional-scene: url('/assets/scenes-r2/bestanden.png'); --sc-functional-focus: center top; }
body.scene-viewer { --sc-functional-scene: url('/assets/scenes-r2/viewer.png'); --sc-functional-focus: center center; }
body.scene-opleveren-werkmachine { --sc-functional-scene: url('/assets/scenes-r2/opleveren-werkmachine.png'); --sc-functional-focus: center center; }

body:is(
  .scene-login,
  .scene-registreren,
  .scene-account,
  .scene-wachtwoord-herstel,
  .scene-betaling,
  .scene-team-dashboard,
  .scene-team-login,
  .scene-support,
  .scene-bestanden,
  .scene-viewer,
  .scene-opleveren-werkmachine
) {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: var(--sc-r2-navy) !important;
}

body:is(
  .scene-login,
  .scene-registreren,
  .scene-account,
  .scene-wachtwoord-herstel,
  .scene-betaling,
  .scene-team-dashboard,
  .scene-team-login,
  .scene-support,
  .scene-bestanden,
  .scene-viewer,
  .scene-opleveren-werkmachine
)::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(6, 24, 39, .72) 0%, rgba(6, 24, 39, .36) 43%, rgba(6, 24, 39, .14) 69%, rgba(6, 24, 39, .52) 100%),
    linear-gradient(180deg, rgba(6, 24, 39, .04) 0%, rgba(6, 24, 39, .12) 58%, rgba(6, 24, 39, .78) 100%),
    var(--sc-functional-scene) var(--sc-functional-focus) / cover no-repeat;
  -webkit-mask-image: none;
  mask-image: none;
}

body:is(
  .scene-login,
  .scene-registreren,
  .scene-account,
  .scene-wachtwoord-herstel,
  .scene-betaling,
  .scene-team-dashboard,
  .scene-team-login,
  .scene-support,
  .scene-bestanden,
  .scene-viewer,
  .scene-opleveren-werkmachine
) > * {
  position: relative;
  z-index: 1;
}

/* R14 dashboard restore: skip links stay outside normal document flow.
   They remain hidden until keyboard focus, without pushing the app down. */
body.sc-dashboard > .sc-skip-link,
body.sc-files-body > .sc-files-skip {
  position: fixed;
  z-index: 100;
}

/* Authentication and account routes. */
body.sc-auth-body:is(.scene-login, .scene-registreren, .scene-account, .scene-wachtwoord-herstel, .scene-team-login) .sc-auth-header {
  background: rgba(6, 24, 39, .66);
  border-bottom-color: rgba(57, 216, 241, .16);
  backdrop-filter: blur(10px);
}

body.sc-auth-body:is(.scene-login, .scene-registreren, .scene-account, .scene-wachtwoord-herstel, .scene-team-login) .sc-auth-main {
  position: relative;
  background: transparent;
}

body.sc-auth-body:is(.scene-login, .scene-registreren, .scene-team-login) .sc-auth-visual::after,
body.sc-auth-body:is(.scene-login, .scene-registreren, .scene-team-login) .sc-auth-points {
  display: none;
}

body.sc-auth-body:is(.scene-login, .scene-registreren, .scene-team-login) .sc-auth-copy {
  text-shadow: 0 4px 32px rgba(0, 0, 0, .94);
}

body.sc-auth-body:is(.scene-login, .scene-registreren, .scene-account, .scene-wachtwoord-herstel, .scene-team-login) .sc-auth-card {
  border: 0;
  border-left: 1px solid rgba(57, 216, 241, .34);
  border-radius: 0;
  background: linear-gradient(100deg, rgba(6, 24, 39, .62), rgba(6, 24, 39, .82));
  box-shadow: none;
  backdrop-filter: blur(14px);
}

body.sc-auth-body:is(.scene-login, .scene-registreren, .scene-account, .scene-wachtwoord-herstel, .scene-team-login) .sc-auth-card .sc-auth-truth {
  border: 0;
  border-left: 1px solid rgba(57, 216, 241, .32);
  border-radius: 0;
  background: rgba(6, 24, 39, .38);
}

body.sc-auth-body .sc-auth-team-route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 17px;
  padding: 12px 13px;
  border-left: 2px solid var(--sc-r2-cyan);
  background: rgba(16, 61, 84, .48);
}

body.sc-auth-body .sc-auth-team-route div,
body.sc-auth-body .sc-auth-team-route span {
  display: block;
}

body.sc-auth-body .sc-auth-team-route strong {
  color: #f7f9fb;
  font-size: 12px;
}

body.sc-auth-body .sc-auth-team-route span {
  margin-top: 3px;
  color: #b9c9d1;
  font-size: 10px;
  line-height: 1.4;
}

body.sc-auth-body .sc-auth-team-route a {
  flex: 0 0 auto;
  color: var(--sc-r2-cyan);
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
}

body.sc-auth-body .sc-auth-team-route a:hover,
body.sc-auth-body .sc-auth-team-route a:focus-visible {
  color: var(--sc-r2-gold);
}

body.sc-auth-body:is(.scene-account, .scene-wachtwoord-herstel) .sc-auth-main {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

body.sc-auth-body:is(.scene-account, .scene-wachtwoord-herstel) .sc-auth-card-wrap {
  width: min(760px, 54vw);
  max-width: none !important;
  padding: 30px 0 30px 34px;
}

body.sc-auth-body.scene-account .sc-auth-card {
  width: 100%;
  max-height: calc(100vh - 110px);
  overflow: auto;
}

/* Payment route: package choices remain real controls, not decorative cards. */
body.sc-payment-page.scene-betaling .top {
  background: rgba(6, 24, 39, .62);
  border-bottom-color: rgba(57, 216, 241, .18);
  backdrop-filter: blur(10px);
}

body.sc-payment-page.scene-betaling .hero,
body.sc-payment-page.scene-betaling .notice {
  border: 0;
  border-radius: 0;
  background: rgba(6, 24, 39, .50);
  box-shadow: none;
  backdrop-filter: blur(10px);
}

body.sc-payment-page.scene-betaling .hero::after { display: none; }

body.sc-payment-page.scene-betaling .grid {
  gap: 0;
  border-top: 1px solid rgba(57, 216, 241, .22);
  border-bottom: 1px solid rgba(57, 216, 241, .22);
  background: rgba(6, 24, 39, .54);
  backdrop-filter: blur(12px);
}

body.sc-payment-page.scene-betaling .card {
  min-height: 240px;
  border: 0;
  border-right: 1px solid rgba(57, 216, 241, .18);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.sc-payment-page.scene-betaling .card:last-child { border-right: 0; }

body.sc-payment-page.scene-betaling > .wrap > .card {
  min-height: 0;
  margin-top: 12px;
  background: rgba(6, 24, 39, .64);
}

/* Internal dashboard: one project panorama behind factual, functional controls. */
body.sc-dashboard.scene-team-dashboard .sc-dashboard-sidebar,
body.sc-dashboard.scene-team-dashboard .sc-dashboard-topbar,
body.sc-dashboard.scene-team-dashboard .sc-dashboard-footer {
  background: rgba(6, 24, 39, .74) !important;
  backdrop-filter: blur(12px);
}

body.sc-dashboard.scene-team-dashboard .sc-dashboard-workspace,
body.sc-dashboard.scene-team-dashboard .sc-dashboard-main {
  background: transparent !important;
}

body.sc-dashboard.scene-team-dashboard .sc-dashboard-hero {
  min-height: 230px;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, rgba(6, 24, 39, .74), rgba(6, 24, 39, .12) 76%) !important;
  box-shadow: none !important;
}

body.sc-dashboard.scene-team-dashboard .sc-dashboard-hero::after,
body.sc-dashboard.scene-team-dashboard .sc-hero-art { display: none; }

body.sc-dashboard.scene-team-dashboard .sc-action-grid {
  gap: 0;
  border-top: 1px solid rgba(57, 216, 241, .2);
  border-bottom: 1px solid rgba(57, 216, 241, .2);
  background: rgba(6, 24, 39, .62);
}

body.sc-dashboard.scene-team-dashboard .sc-action-card {
  border: 0;
  border-right: 1px solid rgba(57, 216, 241, .18);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.sc-dashboard.scene-team-dashboard .sc-action-card:last-child { border-right: 0; }

body.sc-dashboard.scene-team-dashboard .sc-panel {
  border: 0 !important;
  border-left: 1px solid rgba(57, 216, 241, .2) !important;
  border-radius: 0 !important;
  background: rgba(6, 24, 39, .66) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
}

body.sc-dashboard.scene-team-dashboard .sc-format-card {
  border-radius: 0;
  background: transparent;
}

/* Support: retain the secure form/table while removing the old marketing hero. */
body.sc-reference-page.scene-support .sc-info-main {
  background: transparent !important;
}

body.sc-reference-page.scene-support .sc-info-main::before,
body.sc-reference-page.scene-support .sc-info-hero::after { display: none; }

body.sc-reference-page.scene-support .sc-info-hero {
  border: 0;
  background: linear-gradient(90deg, rgba(6, 24, 39, .74), rgba(6, 24, 39, .14) 78%);
}

body.sc-reference-page.scene-support .sc-info-wide,
body.sc-reference-page.scene-support .sc-info-principles div {
  border: 0;
  border-left: 1px solid rgba(57, 216, 241, .22);
  border-radius: 0;
  background: rgba(6, 24, 39, .64);
  box-shadow: none;
  backdrop-filter: blur(12px);
}

body.scene-support .panel {
  border-color: rgba(57, 216, 241, .22);
  border-radius: 0;
  background: rgba(6, 24, 39, .72);
  backdrop-filter: blur(12px);
}

/* Intake: the upload surface is functional; surrounding boxes are flattened. */
body.sc-files-body.scene-bestanden .sc-files-header {
  background: rgba(6, 24, 39, .72);
  border-bottom-color: rgba(57, 216, 241, .18);
  backdrop-filter: blur(12px);
}

body.sc-files-body.scene-bestanden .sc-files-main { position: relative; }

body.sc-files-body.scene-bestanden .sc-files-intro {
  padding: 18px 20px;
  background: linear-gradient(90deg, rgba(6, 24, 39, .74), rgba(6, 24, 39, .10));
}

body.sc-files-body.scene-bestanden .sc-files-panel,
body.sc-files-body.scene-bestanden .sc-files-next {
  border: 0;
  border-left: 1px solid rgba(57, 216, 241, .22);
  border-radius: 0;
  background: rgba(6, 24, 39, .66);
  box-shadow: none;
  backdrop-filter: blur(12px);
}

body.sc-files-body.scene-bestanden .sc-files-dropzone {
  background: rgba(6, 24, 39, .40);
}

body.sc-files-body.scene-bestanden .sc-files-drop-icon {
  border: 0;
  border-radius: 0;
}

body.sc-files-body.scene-bestanden .sc-files-capabilities div,
body.sc-files-body.scene-bestanden .sc-files-fitness-grid div {
  border-radius: 0;
  background: transparent;
}

/* Viewer: only the genuine no-source state receives a scene; loaded map data wins. */
body.viewer-body:is(.scene-viewer, .scene-opleveren-werkmachine) .gg-ambient {
  background: var(--sc-r2-navy);
}

body.viewer-body:is(.scene-viewer, .scene-opleveren-werkmachine) .empty-state {
  background: var(--sc-r2-navy);
}

body.viewer-body:is(.scene-viewer, .scene-opleveren-werkmachine) .es-europa {
  inset: 0;
  opacity: .92;
  filter: none;
  background-image: var(--sc-functional-scene) !important;
  background-position: var(--sc-functional-focus) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

body.viewer-body:is(.scene-viewer, .scene-opleveren-werkmachine) .empty-state::after {
  background: linear-gradient(90deg, rgba(6, 24, 39, .82) 0%, rgba(6, 24, 39, .62) 35%, rgba(6, 24, 39, .10) 72%, rgba(6, 24, 39, .34) 100%);
}

body.viewer-body.scene-opleveren-werkmachine .empty-state .kicker { color: var(--sc-r2-gold); }

@media (max-width: 900px) {
  body:is(
    .scene-login,
    .scene-registreren,
    .scene-account,
    .scene-wachtwoord-herstel,
    .scene-betaling,
    .scene-team-dashboard,
    .scene-team-login,
    .scene-support,
    .scene-bestanden,
    .scene-viewer,
    .scene-opleveren-werkmachine
  )::before {
    background:
      linear-gradient(180deg, rgba(6, 24, 39, .10) 0%, rgba(6, 24, 39, .42) 40%, rgba(6, 24, 39, .82) 70%),
      var(--sc-functional-scene) var(--sc-functional-focus) / auto 48vh no-repeat;
  }

  body.sc-auth-body:is(.scene-account, .scene-wachtwoord-herstel) .sc-auth-main {
    display: block;
  }

  body.sc-auth-body:is(.scene-account, .scene-wachtwoord-herstel) .sc-auth-card-wrap {
    width: min(680px, calc(100% - 28px));
    margin: 36vh auto 0;
    padding: 18px 0 44px;
  }

  body.sc-auth-body.scene-account .sc-auth-card {
    max-height: none;
  }

  body.sc-dashboard.scene-team-dashboard .sc-action-card {
    border-right: 0;
    border-bottom: 1px solid rgba(57, 216, 241, .16);
  }

  body.sc-dashboard.scene-team-dashboard .sc-action-card:last-child { border-bottom: 0; }
}

@media (max-width: 620px) {
  body.sc-auth-body:is(.scene-login, .scene-registreren, .scene-team-login) .sc-auth-visual {
    min-height: 38vh;
  }

  body.sc-auth-body:is(.scene-login, .scene-registreren, .scene-account, .scene-wachtwoord-herstel, .scene-team-login) .sc-auth-card {
    border-left: 0;
    border-top: 1px solid rgba(57, 216, 241, .24);
    background: rgba(2, 8, 17, .9);
  }

  body.viewer-body:is(.scene-viewer, .scene-opleveren-werkmachine) .es-europa {
    opacity: .52;
    background-position: center top !important;
    background-size: auto 54% !important;
  }

  body.viewer-body:is(.scene-viewer, .scene-opleveren-werkmachine) .empty-state::after {
    background: linear-gradient(180deg, rgba(2, 8, 17, .22) 0%, rgba(2, 8, 17, .94) 48%);
  }

  body.sc-auth-body .sc-auth-team-route {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:is(
    .scene-login,
    .scene-registreren,
    .scene-account,
    .scene-wachtwoord-herstel,
    .scene-betaling,
    .scene-team-dashboard,
    .scene-team-login,
    .scene-support,
    .scene-bestanden,
    .scene-viewer,
    .scene-opleveren-werkmachine
  ) {
    scroll-behavior: auto;
  }
}