/* Shared living data field backdrop (login + dashboard) */

body.has-data-field {
  background: var(--bg-deep);
}

.data-field-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.data-field-vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background:
    radial-gradient(ellipse 80% 55% at 50% -5%, rgba(255, 85, 0, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at 50% 110%, rgba(0, 0, 0, 0.5) 0%, transparent 55%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, transparent 32%, transparent 72%, rgba(0, 0, 0, 0.22) 100%);
}

body.has-data-field .app-shell,
body.has-data-field .login-page {
  position: relative;
  z-index: 2;
}

/* Touch/narrow: lock backdrop to layout viewport; JS pins via visualViewport offset */
body.static-backdrop .data-field-canvas,
body.static-backdrop .data-field-vignette {
  height: 100vh;
  height: 100lvh;
  will-change: transform;
}

@media (max-width: 600px) {
  .data-field-vignette {
    background:
      radial-gradient(ellipse 85% 50% at 50% -5%, rgba(255, 85, 0, 0.14) 0%, transparent 52%),
      radial-gradient(ellipse 100% 45% at 50% 108%, rgba(0, 0, 0, 0.28) 0%, transparent 48%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, transparent 38%, transparent 82%, rgba(0, 0, 0, 0.12) 100%);
  }
}

/* Safari/iOS: backdrop-filter over animating canvas breaks after ~1s */
body.stable-glass .login-card,
body.stable-glass.has-data-field .card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(10, 10, 10, 0.44);
}

body.stable-glass.has-data-field .public-view-banner {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 85, 0, 0.1);
}

body.stable-glass.has-data-field .rec-item {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(26, 26, 26, 0.58);
}

body.stable-glass.has-data-field .sleep-duration-row {
  background: rgba(26, 26, 26, 0.62);
}

body.stable-glass.has-data-field .toast {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(18, 18, 18, 0.78);
}

body.stable-glass.has-data-field .date-toolbar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(10, 10, 10, 0.44);
}

body.stable-glass.has-data-field .exercise-row {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(26, 26, 26, 0.58);
}

body.stable-glass.has-data-field .details-grid th,
body.stable-glass.has-data-field .details-grid td {
  background: rgba(12, 12, 12, 0.65);
}

/* Empty multi-day cells must win over glass input + td backgrounds */
body.stable-glass.has-data-field .details-grid td.details-cell.is-empty {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

body.stable-glass.has-data-field .details-grid td.details-cell.is-empty input,
body.stable-glass.has-data-field .details-grid td.details-cell.is-empty input[type='text'],
body.stable-glass.has-data-field .details-grid td.details-cell.is-empty input[type='number'] {
  background: transparent;
}

body.stable-glass.has-data-field .details-grid .details-cell input:focus,
body.stable-glass.has-data-field .details-grid td.details-cell.is-empty input:focus {
  background: rgba(255, 85, 0, 0.14);
}

body.stable-glass.has-data-field .details-group-row th,
body.stable-glass.has-data-field .details-header-row th,
body.stable-glass.has-data-field .details-sticky-col,
body.stable-glass.has-data-field .details-grid tbody tr:hover .details-sticky-col {
  background: rgba(20, 20, 20, 0.78);
}