/* ============================================================
   Overlay – still darkens the page
============================================================ */
.widget-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  pointer-events: none; 

  &.open { display: block; }

  /* dark rectangle ONLY over the left sidebar */
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;                 /* stick to left edge */
    width: 75px;            /* sidebar width */
    height: 100%;
    background: #ffffffb0;
    pointer-events: none;    /* sidebar already disabled via .dimmed */
  }
}


/* ============================================================
   Dock bar (replaces centred modal)
============================================================ */
.widget-popup-container {
  /* stick to top, full width */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 160px;

                     /* adjust to taste */
  padding: 12px 24px 16px;
  background: var(--color-white);
  border-radius: 0 0 10px 10px;     /* rounded bottom only */

  /* horizontal gallery */
  display: grid;
  grid-auto-flow: column;           /* items flow left→right */
  grid-auto-columns: 200px;         /* card width */
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;

  z-index: 1001;                    /* above the backdrop */
}

.widget-popup-container,
.widget-popup-backdrop {       /* keep this if you still use a sidebar backdrop */
  pointer-events: auto;        /* ← these CAN receive clicks */
}

/* ============================================================
   Widget list entry
============================================================ */
.widget-popup-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  width: 100%;                      /* respect grid-auto-columns */
}

.widget-title {
  padding: 6px 8px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}

.widget-add-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: var(--user-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s;

  &:hover { opacity: 0.75; }

  img, svg { width: 16px; height: 16px; }
}

/* ============================================================
   Dimmed areas (headers / sidebar) – unchanged
============================================================ */
.dimmed {
  pointer-events: none;
  filter: brightness(0.3);
}
