/* ScrimMate v1.9.1 — full-screen image viewer, admin evidence gallery, notification + general polish. */

/* ---------- Image viewer ---------- */
html.sm-iv-open, html.sm-iv-open body { overflow: hidden; }
.sm-iv { position: fixed; inset: 0; z-index: 2147483000; display: grid; grid-template-rows: auto 1fr auto auto; background: rgb(6 6 8 / .97); color: #fff; animation: sm-iv-in .18s ease-out; touch-action: none; }
.sm-iv.is-out { animation: sm-iv-out .16s ease-in forwards; }
@keyframes sm-iv-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes sm-iv-out { to { opacity: 0; } }
.sm-iv__top { display: flex; align-items: center; gap: 6px; padding: calc(8px + env(safe-area-inset-top)) 8px 8px; }
.sm-iv__title { flex: 1 1 auto; min-width: 0; display: grid; }
.sm-iv__title b { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-iv__title small { font-size: 12px; color: rgb(255 255 255 / .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-iv__icon { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(255 255 255 / .08); color: #fff; cursor: pointer; }
.sm-iv__icon svg, .sm-iv__nav svg, .sm-iv__bar svg { width: 22px; height: 22px; fill: currentColor; }
.sm-iv__icon:active { background: rgb(255 255 255 / .18); }
.sm-iv__stage { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 0; }
.sm-iv__img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; will-change: transform; transform-origin: center; border-radius: 4px; box-shadow: 0 20px 60px rgb(0 0 0 / .5); }
.sm-iv.is-zoomed .sm-iv__img { border-radius: 0; cursor: grab; }
.sm-iv__spin { position: absolute; width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgb(255 255 255 / .18); border-top-color: var(--primary, #f6c445); animation: sm-iv-spin .8s linear infinite; display: none; }
.sm-iv.is-loading .sm-iv__spin { display: block; }
@keyframes sm-iv-spin { to { transform: rotate(360deg); } }
.sm-iv__err { color: rgb(255 255 255 / .7); font-size: 14px; }
.sm-iv__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; border-radius: 14px; background: rgb(0 0 0 / .45); color: #fff; display: grid; place-items: center; cursor: pointer; }
.sm-iv__nav.prev { left: 8px; } .sm-iv__nav.next { right: 8px; }
.sm-iv.is-zoomed .sm-iv__nav, .sm-iv.is-zoomed .sm-iv__hint { opacity: 0; pointer-events: none; }
.sm-iv__hint { text-align: center; font-size: 12px; color: rgb(255 255 255 / .5); padding: 6px 12px 2px; transition: opacity .2s; }
.sm-iv__bar { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); justify-content: center; }
.sm-iv__bar::-webkit-scrollbar { display: none; }
.sm-iv__bar button { flex: 0 0 auto; min-width: 64px; display: grid; justify-items: center; gap: 5px; padding: 8px 6px; border: 0; border-radius: 14px; background: transparent; color: #fff; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.sm-iv__bar button > i, .sm-iv__bar button > svg { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 13px; background: rgb(255 255 255 / .1); padding: 11px; box-sizing: border-box; }
.sm-iv__bar button > i { padding: 0; }
.sm-iv__bar .wa > i { background: #25d366; color: #062b14; }
.sm-iv__bar .ig > i { background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.sm-iv__bar .dc > i { background: #5865f2; }
.sm-iv__bar button:disabled { opacity: .5; }
.sm-iv__bar button:active > i, .sm-iv__bar button:active > svg { transform: scale(.94); }

/* Graphics studio: preview is tappable, "View full screen" spans the row */
.v1-gs__preview[role="button"] { cursor: zoom-in; position: relative; }
.v1-gs__preview[role="button"]::after { content: 'Tap to view'; position: absolute; right: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: rgb(0 0 0 / .62); color: #fff; font-size: 11px; font-weight: 700; pointer-events: none; }
.v1-gs__row2 [data-gs-view] { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.v1-gs__row2 [data-gs-view] svg { width: 18px; height: 18px; fill: currentColor; }
.sm-shot-img[role="button"] { cursor: zoom-in; }

/* ---------- Admin → Evidence gallery ---------- */
.v191-ev__search { display: flex; align-items: center; gap: 8px; margin: 12px 0 10px; }
.v191-ev__search input { flex: 1 1 auto; min-width: 0; }
.v191-ev__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.v191-ev__card { display: grid; grid-template-rows: auto 1fr; padding: 0; border: 1px solid var(--outline-variant); border-radius: 16px; overflow: hidden; background: var(--surface-container); color: inherit; text-align: left; font: inherit; cursor: zoom-in; transition: transform .12s ease, border-color .15s ease; }
.v191-ev__card:active { transform: scale(.98); }
.v191-ev__card:hover { border-color: var(--primary); }
.v191-ev__card:disabled { cursor: default; opacity: .65; }
.v191-ev__thumb { position: relative; aspect-ratio: 16 / 10; background: var(--surface-container-high); display: grid; place-items: center; overflow: hidden; }
.v191-ev__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v191-ev__ph { display: grid; justify-items: center; gap: 4px; color: var(--on-surface-variant); font-size: 11px; }
.v191-ev__ph svg { width: 22px; height: 22px; fill: currentColor; }
.v191-ev__ph.is-loading { width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .06), transparent); background-size: 200% 100%; animation: v191-shimmer 1.2s linear infinite; }
@keyframes v191-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.v191-ev__src { position: absolute; left: 6px; top: 6px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .3px; background: rgb(0 0 0 / .66); color: #fff; }
.v191-ev__src.is-public { background: rgb(96 165 250 / .9); color: #04142b; }
.v191-ev__meta { display: grid; gap: 2px; padding: 8px 10px 10px; min-width: 0; }
.v191-ev__meta b { font-size: 13px; }
.v191-ev__meta small { font-size: 11px; color: var(--on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v191-ev__status { justify-self: start; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; text-transform: capitalize; background: var(--surface-container-high); color: var(--on-surface-variant); }
.v191-ev__status.is-approved, .v191-ev__status.is-finalized { background: rgb(52 211 153 / .16); color: #34d399; }
.v191-ev__status.is-pending, .v191-ev__status.is-awaiting_team_review { background: rgb(246 196 69 / .16); color: var(--primary); }
.v191-ev__status.is-rejected { background: rgb(248 113 113 / .16); color: #f87171; }

/* ---------- Admin full data ---------- */
.v191-dossier-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.v191-dossier-actions .btn, .v191-fd__actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.v191-dossier-actions svg, .v191-fd__actions svg { width: 18px; height: 18px; fill: currentColor; }
.v191-fd__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.v191-fd__kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; padding: 8px 0; }
.v191-fd__kv div { display: grid; min-width: 0; }
.v191-fd__kv small { font-size: 11px; color: var(--on-surface-variant); }
.v191-fd__kv b { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.v191-fd__scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.v191-fd__table { border-collapse: collapse; font-size: 11px; min-width: 100%; }
.v191-fd__table th, .v191-fd__table td { padding: 6px 8px; border-bottom: 1px solid var(--outline-variant); text-align: left; vertical-align: top; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v191-fd__table th { position: sticky; top: 0; background: var(--surface-container-high); font-weight: 800; }
#admin-fulldata-modal .auth-card { max-width: min(100%, 44rem); }

/* ---------- Results list: compact two-row cards ---------- */
.sm-result-row.v191-res { display: grid !important; grid-template-columns: 1fr; gap: 10px; padding: 12px 14px; align-items: stretch; }
.v191-res__top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.v191-res__top .sm-result-row__main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.v191-res__top .sm-result-row__main b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v191-res__note { color: var(--on-surface-variant); font-style: italic; }
.v191-res__status { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: capitalize; background: var(--surface-container-high); color: var(--on-surface-variant); }
.v191-res__status.is-ok { background: rgb(52 211 153 / .14); color: #34d399; }
.v191-res__status.is-wait { background: rgb(246 196 69 / .14); color: var(--primary); }
.v191-res__status.is-bad { background: rgb(248 113 113 / .14); color: #f87171; }
.v191-res__actions { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 56px; }
.v191-res__actions .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; font-size: 12px; width: auto !important; }
.v191-res__actions .btn svg { width: 16px; height: 16px; fill: currentColor; }
.v191-res__actions .btn.is-danger { color: #f87171; }
@media (max-width: 360px) { .v191-res__actions { padding-left: 0; } }

/* ---------- Matches list: detail.css forced `display:block` on list cards (date stacked above title). ---------- */
.sm-match-card[data-action="matches.open"] { display: flex; align-items: center; gap: 14px; }
.sm-match-card[data-action="matches.open"] .sm-match-card__main { flex: 1 1 auto; min-width: 0; gap: 6px; }
.sm-match-card[data-action="matches.open"] .sm-match-card__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.sm-match-card[data-action="matches.open"] .sm-match-card__title b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-match-card[data-action="matches.open"] .sm-match-card__meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; color: var(--on-surface-variant); }
.sm-match-card[data-action="matches.open"] .sm-match-countdown { justify-self: start; width: max-content; }
.sm-match-card[data-action="matches.open"] .sm-match-chevron { align-self: center; }

/* ---------- Friends: one row per friend, Message + small unfriend icon ---------- */
.sm-friend-list .sm-friend-card { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: 10px; padding: 10px 12px; }
.sm-friend-list .sm-friend-card .sm-friend-info { flex: 1 1 0 !important; min-width: 0; }
.sm-friend-list .sm-friend-card .sm-friend-main { min-width: 0; }
.sm-friend-list .sm-friend-card .sm-friend-main b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-friend-list .sm-friend-actions { flex: 0 0 auto; display: flex !important; gap: 6px; margin: 0 !important; width: auto !important; }
.v191-fr-msg { display: inline-flex !important; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px !important; width: auto !important; }
.v191-fr-msg svg { width: 16px; height: 16px; fill: currentColor; }
.v191-fr-remove { width: 36px !important; min-width: 36px; height: 36px; min-height: 36px; padding: 0 !important; display: grid !important; place-items: center; border-radius: 50%; color: var(--on-surface-variant); }
.v191-fr-remove svg { width: 18px; height: 18px; fill: currentColor; }
.v191-fr-remove:hover, .v191-fr-remove:focus-visible { color: #f87171; border-color: rgb(248 113 113 / .5); }
@media (max-width: 340px) { .v191-fr-msg span { display: none; } .v191-fr-msg { width: 36px !important; padding: 0 !important; justify-content: center; } }

/* ---------- Teams: stats strip fits 3 or 4 tiles on one row ---------- */
.sm-teams-stats.tm-stats { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important; grid-auto-flow: column; gap: 8px; }
.sm-teams-stats.tm-stats .sm-teams-stat { min-width: 0; }
.sm-teams-stats.tm-stats .sm-teams-stat span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Manage scrim: team action buttons on one tidy row ---------- */
.v18-row .v18-row__side { display: flex; flex-wrap: wrap; gap: 6px; }
.v18-row .v18-row__side .btn { min-height: 32px; padding: 0 10px; font-size: 12px; flex: 1 1 auto; }
.v18-row .v18-row__side .btn.danger,
.v18-row .v18-row__side .v20-ban-btn { background: transparent; color: #f87171; border: 1px solid rgb(248 113 113 / .45); }
.v18-row .v18-row__side .btn.danger:active,
.v18-row .v18-row__side .v20-ban-btn:active { background: rgb(248 113 113 / .12); }