.td-catnum   { width: 25%; }
.td-minerals { width: 75%; }

@media (max-width: 767.98px) {
    #rightarrow::before { content: "↓"; }
    #leftarrow::before  { content: "↑"; }
}
@media (min-width: 768px) {
    #rightarrow::before { content: "→"; }
    #leftarrow::before  { content: "←"; }
}

textarea[name="cat_owners"], textarea[name="cat_description"] { min-height: 7rem; }

.w-xxs { width: 120px; }

#deaccessionedto_block { transition: all 0.2s ease; }

/* ---------------- Thumbnails ---------------- */
.photo-thumb { position: relative; display: inline-block; }
.photo-thumb img { width:160px; height:160px; object-fit:cover; }

/* Video badge & play overlay */
.photo-thumb .video-badge {
    position:absolute; left:6px; bottom:6px;
    background:#212529; color:#fff; opacity:.9;
    font-size:.7rem; padding:1px 6px; border-radius:4px;
    z-index:1; pointer-events:none;
}
.photo-thumb .play-overlay {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    z-index:1; pointer-events:none;
}
.photo-thumb .play-overlay::after {
    content:""; width:44px; height:44px; border-radius:50%;
    background:rgba(0,0,0,.45);
}
.photo-thumb .play-overlay span {
    position:absolute; width:0; height:0;
    border-left:14px solid #fff;
    border-top:9px solid transparent;
    border-bottom:9px solid transparent;
    margin-left:4px;
}

/* Drag handle (☰) */
.photo-thumb .drag-handle {
    position:absolute; top:6px; left:6px; z-index:5;
    padding:0 .4rem;
    border:1px solid rgba(0,0,0,.15);
    border-radius:.25rem;
    background:rgba(255,255,255,.92);
    font-size:14px; line-height:1.2; font-weight:600;
    color:#212529; cursor:move;
}

/* Delete (×) — fixed circle + raised glyph */
.photo-thumb .delete-photo,
.photo-thumb .delete-photo.btn.btn-sm {
    position:absolute; top:6px; right:6px; z-index:5;
    --sz:24px;
    width:var(--sz); height:var(--sz);
    padding:0; border-radius:50%;
    border:1px solid rgba(220,53,69,.95);
    background:rgba(220,53,69,.95);
    /* keep the circle fixed; hide real text and draw X via ::after */
    color:transparent;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
}

.photo-thumb .delete-photo:hover,
.photo-thumb .delete-photo.btn.btn-sm:hover {
    background:rgba(220,53,69,1);
}

/* draw & nudge the X only (circle doesn't move) */
.photo-thumb .delete-photo::after,
.photo-thumb .delete-photo.btn.btn-sm::after {
    content:"×";
    color:#fff;
    font-size:16px;
    line-height:1;
    transform: translate(-4px, -3px);
}
/* ---------------- Modal viewer ---------------- */
dialog#mediaModal {
    padding:0; border:none; border-radius:12px; max-width:90vw;
}
dialog#mediaModal::backdrop {
    background:rgba(0,0,0,.35);
}
.mm-wrap {
    position:relative; max-width:90vw; max-height:85vh;
    overflow:auto; background:#fff; border-radius:12px;
}
.mm-body { padding:0; position:relative; z-index:1; }
.mm-body img, .mm-body video {
    display:block; max-width:90vw; max-height:85vh;
}

/* Close button in modal */
.mm-close{
    position:absolute; top:10px; right:10px;
    width:36px; height:36px;
    box-sizing:border-box;              /* keep circle even if we add padding later */
    padding:0;                          /* avoid width != height */
    border:1px solid rgba(255,255,255,.35);
    border-radius:50%;
    background:rgba(0,0,0,.55);
    color:transparent;
    font-size:22px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.35);
    z-index:10; pointer-events:auto;


    outline: none;                      /* remove rectangular focus ring */
    -webkit-tap-highlight-color: transparent;
}
.mm-close:hover{ background:rgba(0,0,0,.7); }

/* Accessible circular focus style (shows on Tab, not on click) */
.mm-close:focus-visible{
    box-shadow:
            0 0 0 2px #fff,                   /* outer white ring */
            0 0 0 4px rgba(0,0,0,.35),        /* subtle contrast */
            0 2px 8px rgba(0,0,0,.35);        /* keep drop shadow */
}

/* Draw the × and nudge it up slightly */
.mm-close::after{
    content:"×";
    color:#fff;
    font-size:22px;
    line-height:1;
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%;
    transform: translate(-7px, -2px);   /* tiny optical tweak */
}


.title_spec
{
    display: inline-block;
    padding-bottom: 5px;
}

.title_loc
{
    font-size: 12pt;
}

.min-inline { display:flex; align-items:cent\er; gap:.5rem; }

/* Let the input give room for the button (Bootstrap sets width:100%) */
.min-inline .form-control { flex:1 1 auto; width:auto; }

/* Don't let the small button wrap or stretch */
.min-inline .btn { white-space:nowrap; }