/* NFCPlate customer portal artwork layer.
   Step 1: full-shell artwork.
   Step 2: transparent customer topbar.
   Step 3: sidebar fades into the artwork.
   Step 4: editor cards float above the artwork.
   Step 5: live preview floats directly on the artwork.
   Step 6: readability and responsive finishing pass. */

[data-shell-mode="customer"] {
  background:
    linear-gradient(rgba(255, 252, 248, 0.04), rgba(255, 252, 248, 0.04)),
    url("/images/portal/nfcplate-portal-workspace-bg.webp") center center / cover no-repeat fixed !important;
}

.customer-portal-content {
  background: transparent !important;
  scrollbar-color: rgba(103, 79, 61, 0.42) transparent !important;
}

.customer-portal-content::-webkit-scrollbar-track {
  border-left-color: transparent !important;
  background: transparent !important;
}

.customer-portal-content::-webkit-scrollbar-thumb {
  border-color: transparent !important;
  background: rgba(103, 79, 61, 0.38) !important;
  background-clip: padding-box !important;
}

.customer-portal-topbar {
  border-bottom-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.customer-portal-topbar form {
  border: 1px solid rgba(91, 68, 51, 0.12) !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 8px 24px rgba(81, 55, 36, 0.07) !important;
  backdrop-filter: blur(16px) !important;
}

.customer-portal-topbar form:focus-within {
  border-color: rgba(214, 88, 71, 0.28) !important;
  box-shadow:
    0 0 0 3px rgba(214, 88, 71, 0.08),
    0 10px 28px rgba(81, 55, 36, 0.08) !important;
}

.customer-portal-topbar button[aria-label="Notifications"] {
  background: rgba(255, 255, 255, 0.24) !important;
  backdrop-filter: blur(10px) !important;
}

.customer-portal-topbar button[aria-label="Notifications"]:hover {
  background: rgba(255, 255, 255, 0.62) !important;
}

/* Desktop sidebar: readable navigation above, artwork visible below. */
[data-shell-mode="customer"] > aside {
  padding-bottom: clamp(6.5rem, 14vh, 9.5rem) !important;
  border-right-color: rgba(77, 60, 47, 0.08) !important;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.93) 42%,
      rgba(255, 253, 250, 0.58) 64%,
      rgba(255, 251, 246, 0.16) 81%,
      rgba(255, 250, 245, 0) 100%
    ) !important;
  box-shadow: 10px 0 34px rgba(72, 52, 38, 0.035) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-shell-mode="customer"] > aside::before {
  display: none !important;
}

[data-shell-mode="customer"] > aside > div:last-child {
  border-top-color: rgba(84, 65, 51, 0.1) !important;
}

/* Connect editor: preserve the layout, upgrade only the surface treatment. */
.connect-editor-reference-layout {
  background: transparent !important;
}

.connect-editor-reference-layout .connect-compact-card {
  border-color: rgba(205, 188, 170, 0.85) !important;
  background: #ffffff !important;
  box-shadow:
    0 20px 52px rgba(91, 62, 42, 0.11),
    0 5px 16px rgba(91, 62, 42, 0.06) !important;
  backdrop-filter: blur(16px) saturate(1.03) !important;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.connect-editor-reference-layout .connect-compact-card:hover {
  border-color: rgba(218, 123, 99, 0.32) !important;
  box-shadow:
    0 26px 62px rgba(91, 62, 42, 0.14),
    0 7px 20px rgba(91, 62, 42, 0.07) !important;
  transform: translateY(-2px);
}

.connect-editor-reference-layout .connect-compact-published {
  border-color: rgba(214, 193, 177, 0.56) !important;
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 10px 30px rgba(91, 62, 42, 0.055) !important;
  backdrop-filter: blur(14px) !important;
}

.connect-editor-reference-layout input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.connect-editor-reference-layout select {
  background-color: rgba(255, 255, 255, 0.78) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

/* Live Preview: no card around the phone, just a floating device and actions. */
.connect-editor-reference-layout .connect-compact-preview-panel {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.connect-editor-reference-layout .connect-compact-device-wrap {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

.connect-editor-reference-layout .connect-compact-device-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(88%, 410px);
  height: 76%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 216, 190, 0.32) 0%,
    rgba(255, 239, 224, 0.18) 44%,
    rgba(255, 255, 255, 0) 74%
  );
  filter: blur(18px);
  pointer-events: none;
}

.connect-editor-reference-layout .connect-compact-preview-actions {
  background: transparent !important;
}

.connect-editor-reference-layout .connect-compact-preview-actions .connect-button {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 28px rgba(78, 54, 38, 0.08);
  backdrop-filter: blur(12px);
}

.connect-editor-reference-layout .connect-compact-preview-actions .connect-button:hover {
  box-shadow: 0 13px 32px rgba(78, 54, 38, 0.12);
  transform: translateY(-1px);
}

@media (min-width: 1040px) and (max-width: 1320px) {
  [data-shell-mode="customer"] {
    background-position: 57% center !important;
  }
}

@media (max-width: 1039px) {
  [data-shell-mode="customer"] {
    background-position: 61% top !important;
    background-attachment: scroll !important;
  }

  .customer-portal-topbar {
    background: rgba(255, 252, 248, 0.38) !important;
    backdrop-filter: blur(10px) !important;
  }

  [data-shell-mode="customer"] > aside {
    padding-bottom: 1.35rem !important;
    background: rgba(255, 253, 249, 0.95) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  [data-shell-mode="customer"] > aside::before {
    display: none;
  }

  .connect-editor-reference-layout .connect-compact-card {
    background: #ffffff !important;
    box-shadow:
      0 14px 36px rgba(91, 62, 42, 0.09),
      0 3px 10px rgba(91, 62, 42, 0.05) !important;
    transform: none !important;
  }

  .connect-editor-reference-layout .connect-compact-preview-panel {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(215, 196, 181, 0.55) !important;
    box-shadow: 0 18px 44px rgba(91, 62, 42, 0.08) !important;
    backdrop-filter: blur(14px) !important;
  }
}

@media (max-width: 680px) {
  [data-shell-mode="customer"] {
    background-position: 68% top !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .connect-editor-reference-layout .connect-compact-card,
  .connect-editor-reference-layout .connect-compact-preview-actions .connect-button {
    transition: none !important;
    transform: none !important;
  }
}