/* Rahmah v2: photo lightbox, JS-built toasts and dialogs opened from restyled screens.
   These elements are built in JavaScript with inline styles and no classes, so they are matched by their
   serialised inline style (the browser writes "rgba(20, 12, 10, 0.92)" with spaces) and by id. Scoped selectors only. */

/* ---- Photo lightbox (openPhotoLightbox) ---- */
body > div[style*="rgba(20, 12, 10, 0.92)"] { background: rgba(48, 34, 46, 0.94) !important; font-family: var(--font-ui, "Afacad Flux", system-ui, sans-serif); }
body > div[style*="rgba(20, 12, 10, 0.92)"] > img { border-radius: 8px !important; }
body > div[style*="rgba(20, 12, 10, 0.92)"] > button { border-radius: 4px !important; background: var(--bym-canvas) !important; color: var(--bym-primary) !important; border: 1px solid var(--bym-primary) !important; min-width: 44px; min-height: 44px; width: 44px !important; height: 44px !important; font-family: var(--font-ui, "Afacad Flux", system-ui, sans-serif); font-weight: 600; }
body > div[style*="rgba(20, 12, 10, 0.92)"] > button[aria-label="Close"] { top: 12px !important; right: 12px !important; }
body > div[style*="rgba(20, 12, 10, 0.92)"] > button:hover { background: var(--bym-surface-soft) !important; }
body > div[style*="rgba(20, 12, 10, 0.92)"] > button:focus-visible { outline: 3px solid var(--bym-canvas); outline-offset: 2px; }
body > div[style*="rgba(20, 12, 10, 0.92)"] > div { color: var(--bym-canvas) !important; font-size: .875rem !important; font-weight: 500; }

/* ---- Toasts ---- */
#app-toast { border-radius: 4px !important; box-shadow: none !important; background: var(--bym-primary) !important; color: var(--bym-on-primary) !important; font-family: var(--font-ui, "Afacad Flux", system-ui, sans-serif) !important; font-size: .9375rem !important; font-weight: 600 !important; line-height: 1.4; padding: 12px 20px !important; max-width: calc(100vw - 32px); text-align: center; }
body > div[style*="bottom: 24px"][style*="right: 24px"][style*="z-index: 10001"] { border-radius: 4px !important; box-shadow: none !important; background: var(--bym-primary) !important; color: var(--bym-on-primary) !important; font-family: var(--font-ui, "Afacad Flux", system-ui, sans-serif); font-size: 1rem !important; line-height: 1.5; max-width: min(340px, calc(100vw - 32px)) !important; }
@media (max-width: 480px) { body > div[style*="bottom: 24px"][style*="right: 24px"][style*="z-index: 10001"] { left: 16px !important; right: 16px !important; max-width: none !important; } }

/* ---- Dialog opened from a restyled screen: "Ready for a new match" code dialog ---- */
body > div[style*="rgba(26, 24, 22, 0.6)"] { background: rgba(48, 34, 46, 0.6) !important; font-family: var(--font-ui, "Afacad Flux", system-ui, sans-serif); }
body > div[style*="rgba(26, 24, 22, 0.6)"] > div { background: var(--bym-surface) !important; border: 1px solid var(--bym-rule) !important; border-radius: 4px !important; box-shadow: none !important; color: var(--bym-text); }
body > div[style*="rgba(26, 24, 22, 0.6)"] h3 { font-family: var(--font-display, "Afacad Flux", system-ui, sans-serif) !important; color: var(--bym-primary) !important; font-weight: 600; }
body > div[style*="rgba(26, 24, 22, 0.6)"] p { color: var(--bym-text) !important; font-style: normal !important; }
body > div[style*="rgba(26, 24, 22, 0.6)"] p[style*="font-size: 11px"], body > div[style*="rgba(26, 24, 22, 0.6)"] p[style*="font-size: 12px"] { color: var(--bym-text-muted) !important; font-size: .875rem !important; }
body > div[style*="rgba(26, 24, 22, 0.6)"] > div > div[style*="letter-spacing"] { font-family: var(--font-display, "Afacad Flux", system-ui, sans-serif) !important; color: var(--bym-primary) !important; background: var(--bym-canvas) !important; border: 1px solid var(--bym-rule) !important; border-radius: 4px !important; }
body > div[style*="rgba(26, 24, 22, 0.6)"] .btn { min-height: 44px; padding: 0 20px; border-radius: 4px; font-family: var(--font-display, "Afacad Flux", system-ui, sans-serif); font-size: 1rem; font-weight: 600; background-image: none; transform: none; }
body > div[style*="rgba(26, 24, 22, 0.6)"] .btn.btn-gold { background: var(--bym-primary); color: var(--bym-on-primary); border: 1px solid var(--bym-primary); }
body > div[style*="rgba(26, 24, 22, 0.6)"] .btn.btn-outline { background: transparent; color: var(--bym-primary); border: 1px solid var(--bym-primary); }
body > div[style*="rgba(26, 24, 22, 0.6)"] :focus-visible { outline: 3px solid var(--bym-focus); outline-offset: 2px; }

/* ---- Report a photo or the video (panel on Pool Match and Look Up cards) ---- */
button[onclick^="toggleMediaReportPanel"] { color: var(--bym-text-muted) !important; font-family: var(--font-ui, "Afacad Flux", system-ui, sans-serif); font-size: .9375rem !important; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 2px; }
[id^="media-report-panel-"] { background: var(--bym-surface-soft) !important; border: 1px solid var(--bym-rule); border-radius: 4px !important; padding: 12px 14px !important; }
[id^="media-report-panel-"] select, [id^="media-report-panel-"] textarea { font-family: var(--font-ui, "Afacad Flux", system-ui, sans-serif); font-size: 1rem !important; border: 1px solid var(--bym-border) !important; border-radius: 4px !important; background: var(--bym-surface); color: var(--bym-text); min-height: 44px; }
[id^="media-report-panel-"] textarea { min-height: 72px; }
[id^="media-report-panel-"] .btn { min-height: 44px; border-radius: 4px; font-weight: 600; padding: 0 18px; background: transparent; background-image: none; color: var(--bym-primary); border: 1px solid var(--bym-primary); font-family: var(--font-ui, "Afacad Flux", system-ui, sans-serif); font-size: 1rem; }
[id^="media-report-panel-"] button[onclick^="toggleMediaReportPanel"] { font-size: .9375rem !important; }

/* ---- Review flag box (analysis) ---- */
.flag-review-box { border: 1px solid var(--bym-error) !important; border-radius: 4px !important; background: var(--bym-error-surface) !important; }
.flag-review-box .flag-review-label { color: var(--bym-error) !important; font-size: .9375rem !important; }
.flag-review-box textarea { border: 1px solid var(--bym-border); border-radius: 4px; font-family: var(--font-ui, "Afacad Flux", system-ui, sans-serif); font-size: 1rem; background: var(--bym-surface); color: var(--bym-text); }
.flag-review-box .btn { min-height: 44px; border-radius: 4px; font-weight: 600; padding: 0 18px; background: transparent; background-image: none; color: var(--bym-primary); border: 1px solid var(--bym-primary); font-family: var(--font-ui, "Afacad Flux", system-ui, sans-serif); font-size: 1rem; }