/* Live QR — dark theme (iron-slag), 2026-08-07
 *
 * One sheet for every page in the app, linked rather than pasted: the first pass put this
 * block inline in dashboard.html and event.html, and events-new.html / settings.html /
 * index.html were promptly forgotten — which is exactly how a "still white" page happens.
 *
 * These rules override Tailwind's CDN utilities. Load order does not matter because the
 * utilities are not !important, so specificity settles it wherever the CDN injects itself.
 *
 * Matches Pixsora Studio Suite, which frames this app. Panels sit a step ABOVE the page so
 * cards keep lifting off it.
 */
:root{ --lq-bg:#222b38; --lq-panel:#2c3745; --lq-line:#41505f; --lq-text:#eef2f7; --lq-muted:#a7b2c2; }

body{ background:var(--lq-bg) !important; color:var(--lq-text); }

/* :not(img) is load-bearing — QR images carry bg-white and MUST stay light, or the code
   loses contrast and phones stop reading it. Canvas/SVG fills (the downloadable poster,
   the photo watermark) are out of CSS's reach and stay white by design. */
.bg-white:not(img){ background-color:var(--lq-panel) !important; }
.bg-gray-50{ background-color:#28323f !important; }
.bg-gray-100{ background-color:#303b4a !important; }
.bg-gray-200{ background-color:#3a4757 !important; }
.border-gray-100,.border-gray-200,.border-gray-300,.border-gray-400{ border-color:var(--lq-line) !important; }
.text-gray-900,.text-black{ color:var(--lq-text) !important; }
.text-gray-800,.text-gray-700,.text-gray-600{ color:#d3dbe6 !important; }
.text-gray-500,.text-gray-400,.text-gray-300{ color:var(--lq-muted) !important; }
.divide-gray-200 > * + *{ border-color:var(--lq-line) !important; }
.hover\:bg-gray-50:hover{ background-color:#354252 !important; }
.hover\:bg-gray-100:hover{ background-color:#3b4959 !important; }
.bg-gradient-to-br.from-purple-100{ background-image:linear-gradient(to bottom right,#3b3563,#293349) !important; }

/* A near-black button disappears on a dark page. */
.bg-gray-900{ background-color:#3d4b5d !important; }
.hover\:bg-black:hover{ background-color:#4a5a6e !important; }

/* #6b46c1 was picked for white paper; on slate it sinks. */
.pixsora-purple{ color:#a78bfa !important; }
.pixsora-purple-bg{ background-color:#7c5cd6 !important; }
.pixsora-purple-bg:hover{ background-color:#8b6ee6 !important; }

/* Badges keep their meaning, tinted for a dark surface instead of pastel-on-white. */
.badge-draft    { background:rgba(148,163,184,.16) !important; color:#cbd5e1 !important; }
.badge-active   { background:rgba(34,197,94,.16)   !important; color:#86efac !important; }
.badge-ended    { background:rgba(245,158,11,.16)  !important; color:#fcd34d !important; }
.badge-archived { background:rgba(239,68,68,.16)   !important; color:#fca5a5 !important; }

input,select,textarea{ background:#28323f !important; color:var(--lq-text) !important;
   border-color:var(--lq-line) !important; }
input::placeholder,textarea::placeholder{ color:#8391a4 !important; }

/* Loading shimmers were near-white — a bright flash before every photo on a dark page. */
.skeleton{ background:linear-gradient(90deg,#2b3542 25%,#38455a 50%,#2b3542 75%) !important;
   background-size:200% 100% !important; }