/* ============================================================
   /staff/assets/css/navbar-customize.css — v1.0
   Drag-and-drop personalization of navbar buttons
   ============================================================ */

/* ─── Edit icon (desktop only, on hover) ─────────────────── */
.navbar-edit-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  color: var(--text2, #6b7280);
}
.navbar-edit-icon:hover {
  background: var(--accent, #16a34a);
  color: white;
  border-color: var(--accent, #16a34a);
}

/* Show on navbar hover (desktop) */
@media (min-width: 768px) and (hover: hover) {
  .topbar:hover .navbar-edit-icon { display: flex; }
}

/* ─── Edit mode (active state) ───────────────────────────── */
.navbar.is-editing .navbtn {
  cursor: grab;
  animation: nav-wiggle .35s ease-in-out infinite alternate;
  position: relative;
}
.navbar.is-editing .navbtn:active { cursor: grabbing; }

/* Stagger the wiggle so it looks organic, not synchronized */
.navbar.is-editing .navbtn:nth-child(2n)     { animation-delay: -.1s; }
.navbar.is-editing .navbtn:nth-child(3n)     { animation-delay: -.2s; }
.navbar.is-editing .navbtn:nth-child(4n+1)   { animation-delay: -.05s; }

@keyframes nav-wiggle {
  0%   { transform: rotate(-.8deg) translateZ(0); }
  100% { transform: rotate(.8deg) translateZ(0); }
}

/* Disable links during edit so clicks don't navigate */
.navbar.is-editing .navbtn { pointer-events: none; }
.navbar.is-editing .navbtn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
  cursor: grab;
}
.navbar.is-editing .navbtn:active::after { cursor: grabbing; }

/* Currently-dragging button */
.navbtn.is-dragging {
  opacity: .4;
  animation: none !important;
  transform: none !important;
}

/* Drop indicator (insertion line) */
.navbtn.is-drop-before {
  box-shadow: -3px 0 0 var(--accent, #16a34a);
}
.navbtn.is-drop-after {
  box-shadow: 3px 0 0 var(--accent, #16a34a);
}

/* ─── Edit bar (Save / Cancel) ───────────────────────────── */
.navbar-edit-bar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  padding: .5rem .6rem;
  display: flex;
  gap: .5rem;
  z-index: 999;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.navbar-edit-bar.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.navbar-edit-bar-btn {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: var(--surface2, #f4f4f5);
  color: var(--text, #18181b);
  padding: .55rem 1.1rem;
  font-size: .88rem;
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: transform .12s, background .12s;
  -webkit-tap-highlight-color: transparent;
}
.navbar-edit-bar-btn:active { transform: scale(.96); }
.navbar-edit-bar-btn.primary {
  background: var(--accent, #16a34a);
  color: white;
}
.navbar-edit-bar-btn.danger {
  color: #dc2626;
}
.navbar-edit-bar-btn:hover { filter: brightness(1.05); }

[data-theme="dark"] .navbar-edit-bar {
  background: var(--surface2, #1f1f23);
  border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .navbar-edit-icon {
  background: var(--surface2, #1f1f23);
  border-color: rgba(255,255,255,.1);
}