/* ====== Core UI ====== */ #dropzone.dragover { border-color: #0f172a; background: #f8fafc; } #thumbGrid .card { border: 1px solid #e5e7eb; } /* Header/Footer stickiness + layout helpers */ :root { --header-h: 0px; } /* JS sets this dynamically */ .site-header { position: sticky; top: 0; z-index: 90; } .site-footer { position: sticky; bottom: 0; z-index: 90; } /* Generic sticky helper if you need to use it anywhere */ .sticky { position: sticky; } /* --- If any content ever tucks under the sticky header, you can opt-in: .main-under-sticky { padding-top: var(--header-h); } */ /* ====== SweetAlert2 – Slate/White Theme ====== */ /* Keep SweetAlert2’s CDN CSS in , but theme it here */ .swal2-popup.slate { border-radius: 0.75rem; border: 1px solid #e2e8f0; /* slate-200 */ box-shadow: 0 10px 20px rgba(0,0,0,0.08); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: #fff; } .swal2-title { color: #0f172a; /* slate-900 */ font-weight: 600; } .swal2-html-container { color: #334155; /* slate-700 */ } /* Buttons (used via customClass in JS) */ .swal2-confirm-btn { background: #0f172a !important; /* slate-900 */ color: #fff !important; border-radius: 0.5rem !important; padding: 0.625rem 1rem !important; border: none !important; } .swal2-cancel-btn { background: transparent !important; color: #334155 !important; /* slate-700 */ border: 1px solid #cbd5e1 !important; /* slate-300 */ border-radius: 0.5rem !important; padding: 0.625rem 1rem !important; } /* Toast look & placement */ .swal2-container.swal2-bottom-end { padding: 0 0.75rem 4.5rem 0.75rem; /* keep clear of sticky footer */ } /* Toast card */ .swal2-toast { border: 1px solid #e2e8f0; /* slate-200 */ border-radius: 0.75rem; box-shadow: 0 8px 18px rgba(0,0,0,0.08); background: rgba(255,255,255,0.95); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* Ensure toasts sit above sticky header/footer and sticky actions */ .swal2-container { z-index: 2000 !important; } /* ====== Optional: thumbnail sizing guardrails ====== */ /* If you want to ensure thumbs don’t get *too* small, uncomment: #thumbGrid > .card { min-width: 120px; } */