/* Preview 07: one soft material for floating surfaces, left-edge navigation. */
:root {
  --glass-surface: linear-gradient(145deg, #ffffffe0, #f0fcf9d9);
  --glass-border: #ffffffe0;
  --glass-shadow: 0 18px 56px #234e591c, 0 4px 16px #234e590c, inset 0 1px 0 #ffffff;
  --glass-radius: 28px;
}

html, body { background: #f8fcfb; }
body::before {
  background:
    radial-gradient(ellipse 72% 70% at 30% 8%, #ffffff 12%, #ffffffee 46%, #ffffff00 86%),
    radial-gradient(ellipse 62% 78% at 106% 40%, #81d8d069 0%, #d2f3ee75 42%, #ffffff00 78%),
    radial-gradient(ellipse 72% 51% at 2% 108%, #a7e4dc99 0%, #e4f7f26b 48%, #ffffff00 82%),
    radial-gradient(ellipse 42% 34% at 76% 96%, #ffffffd9 0%, #ffffff00 84%),
    linear-gradient(145deg, #ffffff 20%, #f6fcfa 64%, #e7f7f2 100%);
}
body:has(dialog[open])::before { animation-play-state: paused; }

body .main { padding-left: 44px; padding-right: 28px; }
#edgeNavigation.sidebar {
  left: max(18px, env(safe-area-inset-left, 0px));
  right: auto;
  background: var(--glass-surface);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
  transform: translate(-12px, -50%);
}
body.nav-open #edgeNavigation { transform: translate(0, -50%); }
#edgeNavigationHandle { left: 0; right: auto; border-radius: 0 18px 18px 0; }

.app-dialog, .day-dialog, #serviceDialog {
  isolation: isolate;
  border-radius: var(--glass-radius);
  border-color: var(--glass-border);
  background: var(--glass-surface);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Group opacity changes the backdrop root: show the finished glass immediately. */
.day-dialog[open], .app-dialog[open] {
  animation: none;
  opacity: 1;
}
/* Filtering a parent can re-anchor its fixed children; keep the blur separate. */
.app-dialog::before, .day-dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  -webkit-backdrop-filter: blur(8px) saturate(1.04);
  backdrop-filter: blur(8px) saturate(1.04);
}
.app-dialog::backdrop, .day-dialog::backdrop { background: #234c4b2e; backdrop-filter: none; }
.app-dialog .dialog-heading,
.app-dialog .dialog-footer,
.day-dialog .day-dialog-heading {
  background: #ffffff52;
  border-color: #ffffffa6;
}
.app-dialog .dialog-heading { border-radius: 27px 27px 0 0; }
.app-dialog .dialog-heading { background: #ffffffeb; }
.app-dialog .dialog-footer { border-radius: 0 0 27px 27px; }
.day-dialog .day-calendar-card .calendar-card-heading { background: transparent; }
.service-picker-surface, .service-picker-controls, .service-picker-body { background: transparent; }
.service-picker-option { background: #ffffffb8; border-color: #d4e8e2; }
.service-picker-option:has(input:checked) { background: #e5f7f0e6; border-color: #8bcac0; }

.day-dialog.day-mode .day-workspace .visit-panel {
  isolation: isolate;
  border-radius: 24px;
  border-color: var(--glass-border);
  background: linear-gradient(145deg, #ffffffd9, #f6fdfbdd);
  box-shadow: 0 6px 24px #234e590d, inset 0 1px #ffffff;
}
.day-dialog .visit-topline { background: #fbfffde0; border-color: #e0eeea; }

.styled-select-popup {
  border-radius: 18px;
  border-color: var(--glass-border);
  background: linear-gradient(145deg, #fffffff0, #f1fcf9ed);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@media (max-width: 960px) {
  body .main { padding-left: 44px; padding-right: 16px; }
  #edgeNavigation.sidebar { left: 16px; right: auto; }
  .app-dialog, .day-dialog, #serviceDialog { border-radius: 26px; }
  .app-dialog .dialog-heading { border-radius: 25px 25px 0 0; }
  .app-dialog .dialog-footer { border-radius: 0 0 25px 25px; }
  .day-dialog.day-mode .day-workspace .visit-panel.open {
    inset: max(8px, env(safe-area-inset-top, 0px)) 8px max(8px, env(safe-area-inset-bottom, 0px));
    width: calc(100% - 16px);
    max-height: calc(100dvh - max(8px, env(safe-area-inset-top, 0px)) - max(8px, env(safe-area-inset-bottom, 0px)));
    border: 1px solid var(--glass-border);
    border-radius: 26px;
    background: var(--glass-surface);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: var(--glass-shadow);
    padding-top: 0;
  }
  .day-dialog .visit-panel.open .visit-topline { border-radius: 25px 25px 0 0; }
}
@media (max-width: 359px) {
  body .main { padding-left: 40px; padding-right: 12px; }
  #edgeNavigation.sidebar { left: 12px; right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  #edgeNavigation.sidebar { transform: translate(0, -50%); }
}
@media (update: slow) {
  .app-dialog::before, .day-dialog::before, .styled-select-popup { -webkit-backdrop-filter: none; backdrop-filter: none; }
  #edgeNavigation.sidebar { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .day-dialog.day-mode .day-workspace .visit-panel.open { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not (backdrop-filter: blur(8px)) {
  .app-dialog, .day-dialog, #serviceDialog, #edgeNavigation.sidebar, .styled-select-popup { background: #f4fcf9; }
  .day-dialog.day-mode .day-workspace .visit-panel { background: #f4fcf9; }
}
@media print {
  .app-dialog::before, .day-dialog::before { display: none; }
}