/*
  Web Elements – Modern UI/UX overrides
  -----------------------------------
  This file intentionally only OVERRIDES the legacy we.css.
  It upgrades stability (no view/device glitches) and modernizes layout.
*/

/* ---------- Preview / Overview (Phase 4) ---------- */

/* Let the grid act as the positioning root for overlay side-panels */
#wePreviewGrid {
  position: relative;
}

/* Make overlay containers click-through by default so the site stays interactable */
#weOverlay,
.we-overlay {
  pointer-events: none;
}
#weOverlay .we-card,
#weOverlay button,
#weOverlay a,
#weOverlay input,
#weOverlay select,
#weOverlay textarea,
#weOverlay [role="button"],
#weOverlay [data-act] {
  pointer-events: auto;
}

/* Keep the dashboard interactive but prevent “dead zones” */
#weDashboard {
  pointer-events: none;
}
#weDashboard * {
  pointer-events: auto;
}

/* Panel rules: device + view decide what is visible (no JS inline styles) */

/* Desktop: keep the classic overlay/cards; hide the right-side panel */
#weRoute[data-device="desktop"] .we-details-side {
  display: none;
}

/* Tablet: use the right-side panel for the vertical/cards view.
   Hide the floating overlay stack to avoid overlaying the tablet preview. */
#weRoute[data-device="tablet"] #weOverlay {
  display: none !important;
}
#weRoute[data-device="tablet"][data-we-view="dash"] .we-details-side {
  display: none;
}
#weRoute[data-device="tablet"][data-we-view="cards"] .we-details-side {
  display: flex;
}

/* Mobile: preview is centered.
   Cards view becomes a true dual-rail layout:
   - LEFT rail (Status + Visitors + SEO) comes from #weOverlay[data-col="left"]
   - RIGHT rail (Plugin + Elements used) comes from #weOverlay[data-col="right"]
   The legacy .we-details-side is hidden to avoid duplicate cards. */
#wePreviewGrid[data-device="mobile"] {
  grid-template-columns: 1fr;
}

#weRoute[data-device="mobile"] .we-details-side {
  display: none !important;
}

/* Ensure the overlay can switch to the grid layout for mobile cards view.
   (Overrides legacy rules that force display:flex on #weOverlay in cards mode.) */
#weRoute[data-device="mobile"][data-we-view="cards"] #weOverlay {
  display: grid;
}

/* Tablet layout sizing */
#wePreviewGrid[data-device="tablet"] {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
}

/* Device simulation: center the iframe for tablet/mobile without scaling (keeps it interactable) */
#wePreviewGrid[data-device="tablet"] #site-viewer,
#wePreviewGrid[data-device="mobile"] #site-viewer {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

#wePreviewGrid[data-device="tablet"] #site-viewer iframe {
  width: 820px;
  height: 1100px;
  max-width: 100%;
  max-height: 100%;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}

#wePreviewGrid[data-device="mobile"] #site-viewer iframe {
  width: 390px;
  height: 740px;
  max-width: 100%;
  max-height: 100%;
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}

/* Desktop remains full-size */
#wePreviewGrid[data-device="desktop"] #site-viewer {
  background: #000;
}

/* Slightly improve the subheader spacing (enterprise polish) */
.we-subheader {
  /* Override the legacy grid so the subheader never "breaks" when Bits injects
     single-select wrappers (and when the window gets tighter). */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 6px 8px;
}

/* URL input should take the remaining space in the subheader */
.we-subheader .we-url,
.we-subheader #weUrlInput {
  flex: 1 1 320px;
  min-width: 220px;
}

/* Keep the route/page selector + site selector grouped on the right side */
.we-subheader #weRouteSelect,
.we-subheader #weRouteSelect + .bits-ss {
  margin-left: auto;
}

/* Website selector (Bits-SS style, with favicon) */
.we-site-ss {
  max-width: 280px;
}
.we-site-ss .bits-ss-btn {
  max-width: none; /* remove the global 135px clamp */
}
.we-site-ss .we-site-ss-ico {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(255,255,255,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.we-site-ss .we-site-ss-ico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.we-site-ss .bits-ss-text {
  max-width: 200px;
}

/* Prevent the “tablet shifts left” feel by ensuring the preview column stays visually centered */
#wePreviewGrid[data-device="tablet"] .we-frame-wrap,
#wePreviewGrid[data-device="mobile"] .we-frame-wrap {
  background: #000;
}

/* ---------- Active Elements (Phase 6) ---------- */

/* Enhanced section header: title + count + search */
.we-section-header {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px;
}

.we-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.we-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.we-section-tools {
  display: flex;
  gap: 8px;
}

.we-search {
  width: 100%;
  height: 34px;
  border-radius: 12px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.35);
  color: inherit;
  outline: none;
}
.we-search:focus {
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}

.we-empty {
  padding: 18px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.75);
  text-align: center;
}

/* Card previews */
.we-el-card-preview,
.we-lib-prev {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.20);
}

/* Library cards feel more premium */
.we-lib-card {
  border-radius: 14px;
}

/* ---------- Plugin modal / cards (minor polish) ---------- */

.we-plugin-card {
  border-radius: 14px;
}