/* ===== BulletPins depth layer — shared by index / board / wall / folder =====
   Recipe (soft 3D): big diffuse coloured drop shadow + inset light on top + inset shade at bottom.
   No gradients, no hard contact shadows. */
:root {
  --in-light: inset 0 2px 4px rgba(255,255,255,.7);
  --in-shade: inset 0 -2px 6px rgba(0,0,0,.05);
  --depth-glass: 0 10px 30px rgba(0,0,0,.08), var(--in-light), var(--in-shade);
  --depth-glass-hover: 0 14px 36px rgba(0,0,0,.12), var(--in-light), var(--in-shade);
}

/* ---- Glass surfaces ---- */
.card, .glass, .create-option, .chip, .nav-item, .sub, .recent-card, .mybp-card, .item-body, .post, .form-card {
  box-shadow: var(--depth-glass);
}
.card:hover { box-shadow: var(--depth-glass-hover); }
.recent-card:hover, .mybp-card:hover { box-shadow: var(--depth-glass); }
.create-option:hover { box-shadow: var(--depth-glass-hover); }
.modal-panel { box-shadow: 0 24px 60px rgba(0,0,0,.25), var(--in-light), var(--in-shade); }
#topbar { box-shadow: 0 6px 20px rgba(0,0,0,.08), var(--in-light); }
.sticky-top .nav-item:not(.nav-item-add), .sticky-top .chip, .sticky-top .brand-left {
  box-shadow: 0 6px 14px rgba(0,0,0,.07), var(--in-light), var(--in-shade);
}
.sticky-top::before { box-shadow: 0 6px 26px rgba(0,0,0,.09); }
@media (max-width: 767px) { .main-nav { box-shadow: 0 -6px 26px rgba(0,0,0,.1), inset 0 2px 4px rgba(255,255,255,.7); } }

/* inputs: slightly sunken */
input[type="text"], input[type="email"], textarea, select { box-shadow: inset 0 2px 4px rgba(0,0,0,.05); }
input:focus, textarea:focus, select:focus { box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 0 0 3px rgba(0,137,74,.18); outline: none; }

/* ---- Buttons ---- */
.btn {
  box-shadow: 0 8px 20px rgba(0,137,74,.32), inset 0 2px 4px rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.18);
}
.btn:hover { box-shadow: 0 12px 26px rgba(0,137,74,.38), inset 0 2px 4px rgba(255,255,255,.45), inset 0 -3px 6px rgba(0,0,0,.18); }
.btn:active { box-shadow: 0 3px 8px rgba(0,137,74,.3), inset 0 3px 6px rgba(0,0,0,.25); }
.btn.danger, #deleteAccountBtn {
  box-shadow: 0 8px 20px rgba(179,57,47,.32), inset 0 2px 4px rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.2) !important;
}
.btn.secondary, .btn.secondary.glass { box-shadow: 0 6px 14px rgba(0,0,0,.07), var(--in-light), var(--in-shade); }
.btn.secondary:hover { box-shadow: 0 10px 20px rgba(0,0,0,.11), var(--in-light), var(--in-shade); }
.btn.secondary:active { box-shadow: inset 0 3px 6px rgba(0,0,0,.14); }

/* the "+" in the menu: soft 3D bubble */
.nav-item.nav-item-add {
  box-shadow: 0 12px 28px rgba(0,137,74,.4), inset 0 3px 5px rgba(255,255,255,.4), inset 0 -4px 8px rgba(0,0,0,.2);
}
.nav-item.nav-item-add:active { box-shadow: 0 4px 10px rgba(0,137,74,.3), inset 0 3px 6px rgba(0,0,0,.25); }

/* ---- Coloured rows ---- */
.item-row:not(.editing) {
  box-shadow: 0 6px 14px rgba(0,0,0,.1), inset 0 2px 3px rgba(255,255,255,.35), inset 0 -2px 5px rgba(0,0,0,.12);
}
.item-row:not(.editing):active { box-shadow: inset 0 3px 6px rgba(0,0,0,.22); }
.item-icon-badge {
  box-shadow: 0 4px 10px rgba(0,0,0,.22), inset 0 2px 3px rgba(255,255,255,.4), inset 0 -3px 5px rgba(0,0,0,.18) !important;
}
.swatch { box-shadow: 0 3px 8px rgba(0,0,0,.15), inset 0 2px 3px rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.14); }
.modal-close { box-shadow: 0 2px 6px rgba(0,0,0,.1), var(--in-light); }
.post img { box-shadow: 0 4px 12px rgba(0,0,0,.14); }

/* ---- Map ---- */
.leaflet-marker-icon { filter: drop-shadow(0 4px 4px rgba(0,0,0,.28)); }
.marker-cluster div { box-shadow: 0 5px 12px rgba(0,0,0,.25), inset 0 2px 4px rgba(255,255,255,.45), inset 0 -3px 6px rgba(0,0,0,.18); }
.leaflet-popup-content-wrapper { box-shadow: 0 14px 34px rgba(0,0,0,.22), var(--in-light); }
.leaflet-bar { box-shadow: 0 6px 16px rgba(0,0,0,.16), var(--in-light) !important; border: none !important; }
#layersPanel { box-shadow: 0 18px 44px rgba(0,0,0,.18), var(--in-light), var(--in-shade); }
.gallery-btn { box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 2px 4px rgba(255,255,255,.6), inset 0 -2px 5px rgba(0,0,0,.1); }
.gallery-main-img, .gallery-mosaic-cell img { box-shadow: 0 10px 30px rgba(0,0,0,.4); }