/* =========================================================
   FXV Gridstack – Admin Editing Chrome
   (stealth editing visuals, handles, menu, user view)
   ========================================================= */


/* ========== STEALTH EDITING — START ========== */
.grid-stack .fxv-panel { position: relative; }
.grid-stack .fxv-panel-header { display: none !important; }

/* Outline only on hover in edit mode */
.fxv-editing .grid-stack-item:hover .fxv-panel-body {
  outline: 1px dashed rgba(255,255,255,.25);
  outline-offset: -2px;
}

/* Tiny corner “grab” wedge */
.fxv-editing .grid-stack-item .fxv-grab {
  position: absolute; inset: 6px auto auto 6px; width: 14px; height: 14px;
  border: 1px solid rgba(255,255,255,.25); border-right: 0; border-bottom: 0;
  transform: rotate(45deg); opacity: 0; pointer-events: none;
}
.fxv-editing .grid-stack-item:hover .fxv-grab { opacity: .7; pointer-events: auto; }

/* Hover crumb label */
.fxv-editing .grid-stack-item .fxv-crumb {
  position: absolute; left: 8px; top: -14px; font-size: 11px; color: rgba(255,255,255,.45);
  pointer-events: none; opacity: 0; transition: opacity .15s;
}
.fxv-editing .grid-stack-item:hover .fxv-crumb { opacity: 1; }

/* Dirty dot (unsaved changes) */
.fxv-editing .grid-stack-item.fxv-dirty-dot::after{
  content:''; position:absolute; right:6px; top:6px; width:8px; height:8px;
  border-radius:50%; background:#ff8f3f;
}

/* Hide resize handles until hover (admin only) */
.fxv-editing .grid-stack-item .ui-resizable-handle { opacity: 0; transition: opacity .12s; }
.fxv-editing .grid-stack-item:hover .ui-resizable-handle { opacity: .5; }
/* STEALTH EDITING — END */


/* ========== CONTEXT MENU — START ========== */
.fxv-menu {
  position: fixed; z-index: 2000; min-width: 220px;
  background: #132029; color: #e6eef6; border: 1px solid #29404f; border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35); padding: 6px;
}
.fxv-menu button {
  width: 100%; text-align: left; background: transparent; border: 0; padding: 6px 10px;
  border-radius: 6px; font-size: 13px; color: inherit;
}
.fxv-menu button:hover { background: #1c2e3a; }
.fxv-menu .fxv-menu-sep { height: 1px; background: #223543; margin: 6px 0; }

/* Move the Layout button up so it clears the activity tray */
#fxv-builder-toggle { bottom: 6rem !important; }
/* CONTEXT MENU — END */


/* ========== VIEW AS USER (HIDE ADMIN CHROME) — START ========== */
.fxv-user-view .fxv-edit-only,
.fxv-user-view [data-role="admin-chrome"],
.fxv-user-view .fxv-menu,
.fxv-user-view .fxv-grab,
.fxv-user-view .fxv-crumb,
.fxv-user-view .ui-resizable-handle { display: none !important; }

/* Neutral cursors */
.fxv-user-view .grid-handle,
.fxv-user-view .card .card-header { cursor: default !important; }

/* Keep the Layout toggle usable */
.fxv-user-view #fxv-builder-toggle {
  display: block !important;
  opacity: .9;
  pointer-events: auto;
}

/* Ensure edit-mode visuals are off */
.fxv-user-view .fxv-panel-body { outline: none !important; }
/* VIEW AS USER — END */


/* z-index tokens */
:root{
  --z-admin-menu: 60;   /* admin sidebar */
  --z-navbar:     50;   /* top nav */
  --z-overlay:    40;   /* activity/grid overlays */
  --z-panels:     10;   /* grid panels / normal content */
  --z-toasts:     80;   /* notifications, if any */
}

/* Existing navbar already has 50 in your CSS — switch to token if you like */
#fxv-navbar{ z-index: var(--z-navbar); }

/* Admin sidebar/menu */
.fxv-admin-sidebar{
  position: fixed;           /* or sticky, but must not be static */
  z-index: var(--z-admin-menu);
}

/* Your overlay container (whatever element the overlay uses) */
.fxv-overlay, 
.fxv-activity-overlay,       /* example names; use your actual one */
#activity-overlay{
  position: fixed;           /* or absolute to a root stacking context */
  z-index: var(--z-overlay); /* <-- this is your “40” */
}

/* Panels/content stay low */
.grid-stack, .grid-stack-item{
  position: relative;
  z-index: var(--z-panels);
}

/* Optional: keep the viewport simulator above everything interactive */
#fxv-vp-simulator{ z-index: 9999; }  /* as you already have */