/* ═══ SENSITIVE ACTIONS: the three-dot menu + the confirm pop-up + the green tick (owner 2026-10-17) ═══
   "A delete / remove button must not just be left lying around. Put the three vertical dots where it is; a dropdown with a few options,
   the last one Delete in red; Delete opens a small pop-up asking to confirm; when it is done an animated green tick and a
   'Deleted successfully' notice appear."  Behaviour: assets/js/row-menu.js (it also upgrades every old delete / remove button by itself).
   Hand-written use: see the header of row-menu.js. All sizes follow the theme text scale. */
.bfx-menu { display: inline-block; position: relative; vertical-align: middle; }
.bfx-btn { border: 1px solid transparent; background: transparent; color: var(--ink-3, #6b7280); width: 28px; height: 28px; border-radius: 7px; display: inline-grid; place-items: center; padding: 0; cursor: pointer; font-size: calc(16px*var(--bf-type,1)); line-height: 1; }
.bfx-btn:hover, .bfx-btn[aria-expanded="true"] { background: var(--surface, #f4f5f7); color: var(--ink, #111827); border-color: var(--line, #e5e7eb); }
.bfx-btn:focus-visible { outline: 2px solid var(--bf-navy, #1e3a5f); outline-offset: 1px; }
.bfx-list { display: none; }
.bfx-pop { position: fixed; z-index: 3000; min-width: 188px; max-width: 280px; background: var(--bf-surface, #fff); border: 1px solid var(--line, #e5e7eb); border-radius: 10px; box-shadow: 0 10px 28px rgba(13, 31, 54, .14); padding: 4px; animation: bfx-in .12s ease-out; }
.bfx-pop .bfx-list { display: block; }
.bfx-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink-2, #374151); padding: 7px 10px; border-radius: 7px; font-size: calc(13px*var(--bf-type-sm,1)); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.bfx-item i { width: 16px; text-align: center; color: var(--ink-4, #9ca3af); font-size: calc(14px*var(--bf-type,1)); }
.bfx-item:hover, .bfx-item:focus-visible { background: var(--surface, #f4f5f7); color: var(--ink, #111827); outline: none; }
.bfx-sep { height: 1px; background: var(--line-2, #f0f1f3); margin: 4px 2px; }
.bfx-item.bfx-danger, .bfx-item.bfx-danger i { color: #b91c1c; }
.bfx-item.bfx-danger:hover, .bfx-item.bfx-danger:focus-visible { background: #fef2f2; color: #991b1b; }

/* the confirm pop-up */
.bfx-back { position: fixed; inset: 0; z-index: 3100; background: rgba(15, 23, 42, .45); display: grid; place-items: center; padding: 16px; animation: bfx-fade .15s ease-out; }
.bfx-modal { width: min(400px, 100%); background: var(--bf-surface, #fff); border-radius: 14px; box-shadow: 0 24px 60px rgba(13, 31, 54, .28); padding: 22px 22px 18px; text-align: center; animation: bfx-in .16s ease-out; }
.bfx-ico { width: 48px; height: 48px; border-radius: 50%; display: inline-grid; place-items: center; background: #fee2e2; color: #b91c1c; font-size: calc(21px*var(--bf-type,1)); margin-bottom: 10px; }
.bfx-modal h3 { margin: 0 0 6px; font-size: calc(16px*var(--bf-type,1)); font-weight: 800; color: var(--ink, #111827); }
.bfx-modal p { margin: 0 0 14px; font-size: calc(13px*var(--bf-type-sm,1)); color: var(--ink-3, #6b7280); line-height: 1.5; overflow-wrap: anywhere; }
.bfx-note { width: 100%; box-sizing: border-box; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; padding: 8px 10px; font-size: calc(13px*var(--bf-type-sm,1)); margin: 0 0 12px; resize: vertical; min-height: 56px; }
.bfx-note.bfx-bad { border-color: #dc2626; animation: bfx-shake .3s; }
.bfx-acts { display: flex; gap: 8px; justify-content: center; }
.bfx-acts button { min-width: 104px; border-radius: 9px; padding: 8px 14px; font-size: calc(13px*var(--bf-type-sm,1)); font-weight: 700; cursor: pointer; border: 1px solid var(--line, #e5e7eb); background: var(--bf-surface, #fff); color: var(--ink-2, #374151); }
.bfx-acts button:hover { background: var(--surface, #f4f5f7); }
.bfx-acts .bfx-ok { background: #dc2626; border-color: #dc2626; color: #fff; }
.bfx-acts .bfx-ok:hover { background: #b91c1c; }
.bfx-acts .bfx-ok.bfx-safe { background: var(--bf-navy, #1e3a5f); border-color: var(--bf-navy, #1e3a5f); }
.bfx-acts button[disabled] { opacity: .6; cursor: wait; }
.bfx-err { color: #b91c1c; font-size: calc(12.5px*var(--bf-type-sm,1)); margin: -4px 0 12px; }

/* the animated green tick */
.bfx-tick { width: 64px; height: 64px; display: block; margin: 2px auto 8px; }
.bfx-tick circle { fill: none; stroke: #16a34a; stroke-width: 3; stroke-dasharray: 176; stroke-dashoffset: 176; animation: bfx-draw .5s ease-out forwards; transform-origin: center; transform: rotate(-90deg); }
.bfx-tick path { fill: none; stroke: #16a34a; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: bfx-draw .35s .45s ease-out forwards; }
.bfx-done h3 { color: #166534; }

/* the notice */
.bfx-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 3200; display: grid; gap: 8px; }
.bfx-toast { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #bbf7d0; border-left: 4px solid #16a34a; border-radius: 10px; box-shadow: 0 10px 28px rgba(13, 31, 54, .18); padding: 10px 14px; font-size: calc(13px*var(--bf-type-sm,1)); font-weight: 700; color: #166534; animation: bfx-in .2s ease-out; }
.bfx-toast svg { width: 22px; height: 22px; flex: none; }
.bfx-toast svg circle { fill: none; stroke: #16a34a; stroke-width: 3; stroke-dasharray: 176; stroke-dashoffset: 176; animation: bfx-draw .4s ease-out forwards; transform-origin: center; transform: rotate(-90deg); }
.bfx-toast svg path { fill: none; stroke: #16a34a; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: bfx-draw .3s .35s ease-out forwards; }
.bfx-toast.bfx-out { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.bfx-gone { transition: opacity .35s, height .35s; opacity: 0 !important; }

@keyframes bfx-draw { to { stroke-dashoffset: 0; } }
@keyframes bfx-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes bfx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bfx-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .bfx-tick circle, .bfx-tick path, .bfx-toast svg circle, .bfx-toast svg path { animation-duration: .01s; animation-delay: 0s; } .bfx-pop, .bfx-modal, .bfx-back, .bfx-toast { animation: none; } }