/* Organization panel and public organization page, tournaments, scrims and results
   Moved out of styles.css on 2026-11-05 (one big file split by section; the rules are unchanged and in the same order).
   Every page links this file right after css/panel.css. */

/* ═════════════════════════════════════════════════════════════
   ORGANIZATION PANEL (panel.html) AND PUBLIC ORGANIZATION PAGE (org.html)
   ═════════════════════════════════════════════════════════════ */
.panel-wrap { max-width: 1000px; }
.panel-state { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 70px 16px; color: var(--t2); }
.panel-state > i { font-size: 34px; }
.panel-state h2 { font-size: 20px; font-weight: 900; color: var(--t1); }
.panel-state p { font-size: 14px; line-height: 1.9; max-width: 34em; }
.panel-state-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

.panel-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px; background: var(--card); border: 1px solid var(--b1); border-radius: 16px; margin-bottom: 14px; }
.panel-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.panel-logo { width: 68px; height: 68px; border-radius: 16px; object-fit: cover; background: var(--s); border: 1px solid var(--b2); flex-shrink: 0; }
.panel-logo-ph { display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--gold); }
.panel-id-text { min-width: 0; }
.panel-id-text h1, .org-hero-text h1 { font-size: 22px; font-weight: 900; color: var(--t1); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel-check { color: var(--green); font-size: 17px; }
.panel-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.panel-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.panel-pick { min-width: 160px; }
.panel-alert { flex-basis: 100%; margin: 0; padding: 10px 14px; border-radius: 10px; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.35); color: #f87171; font-size: 13px; font-weight: 700; display: flex; gap: 8px; align-items: center; }

.panel-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 14px; margin-bottom: 4px; scrollbar-width: thin; }
.panel-tab { display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 10px 16px; border-radius: 10px; background: var(--s); border: 1px solid var(--b1); color: var(--t2); font-family: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.panel-tab:hover { color: var(--t1); border-color: var(--b2); }
.panel-tab.active { background: rgba(212, 160, 23, 0.12); border-color: var(--gold); color: var(--gold); }
/* the number of requests waiting for the host (scrims / tournaments tab, and the "الطلبات" button of each one) */
.req-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font-size: 11px; font-weight: 900; line-height: 1; box-shadow: 0 0 0 2px var(--bg); }
.panel-tab .req-count { margin-inline-start: 2px; }
.req-btn { position: relative; }
.req-btn .req-count { position: absolute; top: -9px; inset-inline-end: -9px; }

/* الفون: نفس الشريط العائم الدائري بتاع لوحة الإدارة — القسم النشط بس أيقونته بترفع لفقاعة عايمة فوق */
@media (max-width: 900px) {
  .page-container:has(.panel-tabs) { padding-bottom: 104px; }
  .panel-tabs {
    position: fixed; bottom: 10px; inset-inline: 14px; z-index: 60;
    overflow: visible; gap: 0; margin-bottom: 0; height: 72px;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    padding: 0;
  }
  .panel-tab {
    position: relative; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center;
    justify-content: space-between; text-align: center; white-space: normal;
    padding: 12px 2px 8px; font-size: 9px; background: transparent; border-color: transparent;
  }
  .panel-tab i { width: auto; font-size: 15px; }
  .panel-tab span {
    max-width: 100%; line-height: 1.15; overflow: hidden; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .panel-tab.active { background: transparent; border-color: transparent; }
  .panel-tab .req-count { position: absolute; top: 2px; inset-inline-end: 12%; min-width: 18px; height: 18px; font-size: 10px; margin: 0; z-index: 2; }
  .panel-tab.active .req-count { top: -34px; inset-inline-end: 20%; }
  .panel-tab.active i { visibility: hidden; }
  .panel-tab.active span { color: var(--gold); font-weight: 900; }
}
/* seven tabs on a narrow phone (the card tab was added): a word is never broken in the middle, the text just gets a little smaller */
@media (max-width: 420px) {
  .panel-tab { padding-inline: 0; font-size: 8.5px; }
  .panel-tab span { word-break: normal; overflow-wrap: normal; }
}

/* Liquid bottom nav parts (js/liquid-nav.js injects these into .admin-groups / .panel-tabs at phone widths) */
.liquid-bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 -6px 18px rgba(0, 0, 0, 0.4)); }
.liquid-path { fill: var(--card); stroke: var(--gold); stroke-opacity: .3; stroke-width: 1.2; transition: d .38s cubic-bezier(.34, 1.56, .64, 1); }
.liquid-bubble {
  position: absolute; top: 0; left: 0; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; border: 2px solid var(--gold); box-shadow: 0 8px 18px rgba(212, 160, 23, .35);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  transition: transform .38s cubic-bezier(.34, 1.56, .64, 1); will-change: transform;
}
.liquid-bubble i { color: var(--bg); font-size: 18px; }
.panel-loading { text-align: center; padding: 50px 0; color: var(--t3); font-size: 22px; }

.panel-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.panel-stat { background: var(--card); border: 1px solid var(--b1); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.panel-stat b { font-size: 28px; font-weight: 900; color: var(--t1); font-variant-numeric: tabular-nums; line-height: 1.1; }
.panel-stat .panel-stat-sm { font-size: 17px; direction: ltr; text-align: right; }
.panel-stat span { font-size: 12.5px; color: var(--t2); font-weight: 600; }
.panel-card { margin-bottom: 16px; }
.panel-h2 { font-size: 17px; font-weight: 900; color: var(--t1); margin: 22px 0 12px; display: flex; align-items: center; gap: 8px; }
.panel-h2 i { color: var(--gold); }
.panel-steps { list-style: none; padding: 6px 16px 16px; display: flex; flex-direction: column; }
.panel-steps li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--b1); font-size: 14px; color: var(--t1); }
.panel-steps li:last-child { border-bottom: 0; }
.panel-steps li > i { color: var(--t3); }
.panel-steps li.is-done > i { color: var(--green); }
.panel-steps li.is-done span { color: var(--t3); text-decoration: line-through; }
.panel-steps li span { flex: 1; }

.panel-form { padding: 16px; border-bottom: 1px solid var(--b1); display: flex; flex-direction: column; gap: 14px; background: rgba(212, 160, 23, 0.03); }
.panel-card > .panel-form:last-child { border-bottom: 0; background: none; }
.panel-form h3 { font-size: 15px; font-weight: 900; color: var(--gold); }
.panel-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.panel-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* the settings are already saved: the button is dark and cannot be pressed (js/panel.js refreshSettingsSave) */
.btn-primary.is-saved, .btn-primary.is-saved:disabled { background: #26272d; color: #6b6e78; border-color: #26272d; opacity: 1; filter: none; cursor: default; }
.panel-list { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.org-section .panel-list { padding: 0; }
.panel-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--b1); border-radius: 12px; background: var(--s); flex-wrap: wrap; }
.panel-row-main b { font-size: 15px; color: var(--t1); }
.panel-row-sub { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 5px; font-size: 12.5px; color: var(--t2); }
/* a member's card: each fact (game id / position / status) on its own full-width line inside panel-row-sub */
.panel-row-line { flex: 1 0 100%; display: flex; align-items: center; gap: 8px; }
.panel-row-line .prl-l { color: var(--t3); font-size: 11.5px; min-width: 78px; flex-shrink: 0; }
.panel-row-line-name b { font-size: 15px; color: var(--t1); }
.panel-note { color: var(--t3); }
.panel-more { text-align: center; padding: 0 16px 16px; }
.panel-more:empty { display: none; }
.panel-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 16px; }
.panel-facts dt { font-size: 12px; color: var(--t3); margin-bottom: 3px; }
.panel-facts dd { margin: 0; font-size: 15px; font-weight: 800; color: var(--t1); }
.panel-card > .adm-hint { padding: 0 16px 16px; }

.org-post { background: var(--card); border: 1px solid var(--b1); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.panel-list .org-post { background: var(--s); }
.org-post.is-hidden { opacity: .6; border-style: dashed; }
.org-post-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.org-post-date { font-size: 12px; color: var(--t3); }
.org-post-title { font-size: 17px; font-weight: 900; color: var(--t1); }
.org-post-body { font-size: 14px; line-height: 1.9; color: var(--t2); white-space: pre-line; }
.org-post-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.org-post-imgs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--b2); cursor: zoom-in; background: var(--s); }
.org-hidden-note { font-size: 12.5px; color: #f87171; display: flex; gap: 6px; align-items: center; }
.org-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.org-hero { display: flex; gap: 18px; align-items: center; padding: 22px; background: var(--card); border: 1px solid var(--b1); border-top: 3px solid var(--gold); border-radius: 16px; margin-bottom: 16px; }
.org-hero-logo { width: 96px; height: 96px; border-radius: 22px; }
.org-bio { font-size: 14.5px; line-height: 1.9; color: var(--t2); margin-top: 10px; white-space: pre-line; }
.org-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.org-section { margin-top: 22px; }
.org-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.org-chip { display: inline-flex; flex-direction: column; padding: 8px 14px; background: var(--card); border: 1px solid var(--b1); border-radius: 12px; }
.org-chip b { font-size: 14px; color: var(--t1); }
.org-chip small { font-size: 11.5px; color: var(--t3); }
.reg-page-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12.5px; font-weight: 800; color: var(--gold); }
.reg-page-link:hover { text-decoration: underline; }
.org-back { margin-bottom: 14px; }
.reg-wa { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: var(--gold); color: #000; font-size: 13px; font-weight: 800; }
.reg-wa:hover { filter: brightness(1.08); }
.reg-wa i { font-size: 16px; }

@media (max-width: 720px) {
  .panel-stats { grid-template-columns: 1fr 1fr; }
  .panel-form-grid, .panel-facts { grid-template-columns: 1fr; }
  .org-hero { flex-direction: column; text-align: center; }
  .org-hero .panel-meta, .org-hero .org-links { justify-content: center; }
  .org-post-imgs { grid-template-columns: 1fr 1fr; }
  .panel-bar { padding: 14px; }
  .panel-id-text h1 { font-size: 18px; }
}

/* Admin cards: who did the last action, linked account */
.idc-audit { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 8px 14px 0; padding: 7px 10px; font-size: 12px; color: var(--t2); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--b1); border-radius: 9px; }
.idc-audit i { color: var(--gold); }
.idc-audit b { color: var(--t1); }

/* ─── Tournaments (منظم ORG panel + public page) ─── */
.org-tour-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; margin: 10px 0; }
.org-tour-facts dt { font-size: 11.5px; color: var(--t3); font-weight: 700; margin-bottom: 2px; }
.org-tour-facts dt i { color: var(--gold); margin-inline-end: 4px; }
.org-tour-facts dd { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--t1); word-break: break-word; }
.org-tour .btn { margin-top: 8px; }

/* ─── Admin screen stays hidden until the account is confirmed as an administrator ─── */
html[data-gate="admin"]:not([data-admin-ok]) body { visibility: hidden; }
.file-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; opacity: 0; }

/* ─── Panel screen (panel.html): the site shell for an ESPORTS organization, the admin-style capsule for a منظم ORG ─── */
body.panel-page .panel-topbar { display: none; }
html[data-panel-kind="organizer"] body.panel-page .panel-topbar { display: block; }
html[data-panel-kind="organizer"] body.panel-page .site-header { display: none; }
/* Short footer of the panel: "لوحة منظمة ESPORTS" or "لوحة منظم ORG" depending on the kind of panel */
.panel-footer .pf-kind-organizer { display: none; }
html[data-panel-kind="organizer"] .panel-footer .pf-kind-org { display: none; }
html[data-panel-kind="organizer"] .panel-footer .pf-kind-organizer { display: inline; }
@media (max-width: 900px) {
  /* the tab bar is pinned to the bottom of the phone screen: the footer keeps the room under the content instead,
     so its line stays readable above the bar */
  body.panel-page .page-container:has(.panel-tabs) { padding-bottom: 12px; }
  body.panel-page .panel-footer { padding-bottom: 104px; }
}
.panel-topbar.admin-capsule-wrapper { max-width: 1000px; margin-top: 16px; margin-bottom: 8px; padding: 0 16px; }
.panel-meta-solo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }

/* ─── Social links in the panel settings ─── */
.link-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.link-row { display: grid; grid-template-columns: 118px 1fr auto; align-items: center; gap: 8px; }
.link-row .fmsg { grid-column: 1 / -1; }
.link-name { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--t1); }
.link-name i { color: var(--gold); font-size: 16px; width: 18px; text-align: center; }
.link-row input { min-width: 0; }
.link-row.has-error input { border-color: rgba(239, 68, 68, 0.7); }
.link-row.has-error .fmsg { color: #f87171; font-weight: 700; }
.link-x { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--b2); background: var(--s); color: var(--t2); cursor: pointer; }
.link-x:hover { color: #f87171; border-color: rgba(239, 68, 68, 0.6); }
.link-chooser { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.link-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--b2); background: var(--s); color: var(--t1); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.link-chip i { color: var(--gold); }
.link-chip:hover { border-color: var(--gold); }
@media (max-width: 520px) { .link-row { grid-template-columns: 1fr auto; } .link-name { grid-column: 1 / -1; } }

/* ─── Squad member row (panel.js "روسترات السكريمات") ─── */
.squad-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.squad-card { border: 1px solid var(--b1); border-radius: 12px; padding: 14px; background: var(--s); }
.squad-card-hdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.squad-card-hdr b { font-size: 14px; color: var(--t1); }
.squad-member-row { display: grid; grid-template-columns: 1fr 120px 140px auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.squad-member-row input { min-width: 0; }
.squad-member-row.has-error input { border-color: rgba(239, 68, 68, 0.7); }
.squad-add-member { margin-top: 4px; }
@media (max-width: 640px) { .squad-member-row { grid-template-columns: 1fr 1fr; } .squad-member-row input:first-child { grid-column: 1 / -1; } }

/* ─── Scrims (js/scrims.js, js/scrim-page.js, js/admin-scrims.js) ─── */
.scrim-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.scrim-body > .add-check, .scrim-body > .adm-hint, .scrim-body > .scrim-sub { margin: 0; }
.scrim-hero { padding: 0; }
.scrim-hero-banner { border-radius: 0; }
.scrim-card-banner { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 10px; margin-bottom: 10px; background: var(--s); }
.scrim-times { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px; }
.scrim-time { display: inline-flex; flex-direction: column; align-items: center; min-width: 74px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--b2); background: var(--s); }
.scrim-time b { font-size: 16px; color: var(--t1); }
.scrim-time small { font-size: 11px; color: var(--t3); font-weight: 700; }
.scrim-sub { font-size: 14px; font-weight: 900; color: var(--t1); margin: 6px 0 0; display: flex; align-items: center; gap: 8px; }
.scrim-banner-box { border: 1px dashed var(--b2); border-radius: 12px; background: var(--s); overflow: hidden; margin-bottom: 10px; }
.scrim-banner-box img { display: block; width: 100%; max-height: 320px; object-fit: contain; }
.scrim-banner-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 170px; padding: 16px; color: var(--t3); text-align: center; font-size: 13px; }
.scrim-banner-ph i { font-size: 46px; }
.scrim-wide-btn { width: 100%; justify-content: center; }
.scrim-auto { background: var(--bg) !important; color: var(--t2) !important; cursor: default; }
.scrim-preview { margin: 0; padding: 14px; border-radius: 10px; border: 1px solid var(--b1); background: #0a0a0c; color: #4ade80; font-family: 'Courier New', monospace; font-size: 15px; font-weight: 700; line-height: 1.8; white-space: pre-wrap; word-break: break-word; text-align: left; max-height: 420px; overflow: auto; }
.scrim-reason { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.25); color: #fca5a5; font-size: 13px; }
.scrim-ok { margin: 8px 0 0; padding: 10px; border-radius: 8px; background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.3); color: #86efac; font-size: 13px; font-weight: 700; }
.scrim-req .org-chips { margin: 8px 0; }
.scrim-save-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 16px 14px; }
.scrim-canvas-wrap { margin: 10px 0; border-radius: 12px; overflow: hidden; background: var(--s); border: 1px solid var(--b1); }
.scrim-banner-img { display: block; width: 100%; height: auto; cursor: pointer; }
.scrim-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.scrim-slot-row { display: grid; grid-template-columns: 38px 1fr; gap: 6px 8px; align-items: center; padding: 6px; border-radius: 10px; border: 1px solid transparent; }
.scrim-slot-row input { grid-column: 2; min-width: 0; }
.scrim-slot-row select { min-width: 0; }
.scrim-slot-row.is-bad { border-color: rgba(239, 68, 68, 0.5); }
.scrim-slot-row.is-off { border-color: rgba(212, 160, 23, 0.5); }
.scrim-slot-no { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--s); border: 1px solid var(--b2); color: var(--gold); font-weight: 900; font-size: 14px; }
.scrim-builder-actions { flex-wrap: wrap; }
.scrim-apply-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.scrim-hero-banner { display: block; width: 100%; max-height: 420px; object-fit: contain; background: var(--s); border-radius: 12px; cursor: zoom-in; }
.scrim-hero-body { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.scrim-hero-body h1 { font-size: 22px; font-weight: 900; color: var(--t1); }
.scrim-register { align-self: flex-start; }
.scrim-list-info { margin: 10px 0; }
.scrim-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.scrim-list-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--b1); background: var(--card); }
.scrim-list-no { color: var(--gold); font-weight: 900; font-size: 20px; min-width: 38px; text-align: left; }
.scrim-team { color: var(--t1); font-weight: 800; font-size: 18px; overflow-wrap: anywhere; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.tpl-pick { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; border: 2px solid var(--b2); background: var(--s); color: var(--t1); font-family: inherit; font-weight: 800; font-size: 13px; cursor: pointer; text-align: center; }
.tpl-pick img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; background: var(--bg); }
.tpl-pick small { color: var(--t3); font-weight: 700; }
.tpl-pick.is-on, .tpl-pick:hover { border-color: var(--gold); }
.tpl-admin { cursor: default; }
.tpl-admin.is-off img { opacity: .45; }
.tpl-draw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.tpl-draw-bar select { width: 90px; }
.tpl-draw { position: relative; user-select: none; touch-action: none; border-radius: 10px; overflow: hidden; background: var(--s); cursor: crosshair; }
.tpl-draw img { display: block; width: 100%; height: auto; pointer-events: none; }
.tpl-box { position: absolute; border: 2px solid #facc15; background: rgba(250, 204, 21, 0.18); color: #facc15; font-weight: 900; font-size: 13px; display: flex; align-items: flex-start; justify-content: flex-start; padding: 2px 4px; cursor: move; touch-action: none; text-shadow: 0 0 3px #000; box-sizing: border-box; }
.tpl-box.is-sel { border-color: #fff; background: rgba(250, 204, 21, 0.32); box-shadow: 0 0 0 2px #facc15, 0 0 12px rgba(0, 0, 0, .6); z-index: 2; }
.tpl-h { position: absolute; width: 14px; height: 14px; background: #fff; border: 2px solid #111; border-radius: 3px; z-index: 3; }
.tpl-h-nw { left: -8px; top: -8px; cursor: nwse-resize; } .tpl-h-se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.tpl-h-ne { right: -8px; top: -8px; cursor: nesw-resize; } .tpl-h-sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
@media (pointer: coarse) { .tpl-h { width: 24px; height: 24px; } .tpl-h-nw, .tpl-h-sw { left: -13px; } .tpl-h-ne, .tpl-h-se { right: -13px; } .tpl-h-nw, .tpl-h-ne { top: -13px; } .tpl-h-sw, .tpl-h-se { bottom: -13px; } .tpl-keys { display: none; } }
.tpl-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; padding: 10px; border: 1px solid var(--b2); border-radius: 10px; background: var(--s); min-height: 44px; }
.tpl-sel-name { color: var(--gold); font-weight: 900; }
.tpl-num { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--t2); }
.tpl-num input { width: 76px; padding: 6px 8px; direction: ltr; }
.tpl-chip-pick { background: none; border: 0; color: inherit; font: inherit; font-weight: 900; cursor: pointer; padding: 0 2px; }
#tpl-slots .org-chip.is-on { border-color: var(--gold); color: var(--gold); }
.tpl-box.is-vip { border-color: var(--purple); background: rgba(139, 92, 246, 0.2); color: #c4b5fd; }
.tpl-box.is-ghost { border-style: dashed; pointer-events: none; }
#tpl-slots { margin-top: 10px; }
#tpl-slots .org-chip { display: inline-flex; align-items: center; gap: 6px; }
#tpl-slots .link-x { width: 24px; height: 24px; border-radius: 7px; font-size: 11px; }
/* roster card: the roster's name on the right, the organization's logo on the left (panel requests + the scrim page) */
.roster-card { border: 1px solid var(--b2); border-radius: 14px; padding: 14px; background: linear-gradient(135deg, rgba(212,160,23,.07), rgba(139,92,246,.05)), var(--s); }
.roster-card-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.roster-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.roster-card-name { font-size: 19px; font-weight: 900; color: var(--t1); letter-spacing: .4px; text-align: right; overflow-wrap: anywhere; }
.roster-card-org { font-size: 13px; color: var(--gold); font-weight: 800; }
.roster-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.roster-card-logo { flex: none; width: 58px; height: 58px; border-radius: 14px; border: 2px solid rgba(212,160,23,.55); background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--t3); font-size: 24px; }
.roster-card-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.roster-card .org-actions { margin-top: 12px; }
.roster-card-solo { padding: 12px; }
.roster-players { margin-top: 10px; font-size: 13px; color: var(--t2); }
.roster-players summary { cursor: pointer; font-weight: 800; color: var(--t2); }
.roster-players .org-chips { margin-top: 8px; }
.roster-picks { display: flex; flex-direction: column; gap: 10px; }
.roster-pick { position: relative; display: block; cursor: pointer; }
.roster-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.roster-pick-body { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--b2); background: linear-gradient(135deg, rgba(212,160,23,.05), rgba(139,92,246,.04)), var(--s); transition: border-color .15s, box-shadow .15s; }
.roster-pick:hover .roster-pick-body { border-color: rgba(212,160,23,.6); }
.roster-pick input:checked + .roster-pick-body { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,160,23,.18); }
.roster-pick input:focus-visible + .roster-pick-body { outline: 2px solid var(--blue); outline-offset: 2px; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; }
.slot-pick { padding: 12px 0; border-radius: 12px; border: 2px solid var(--b2); background: var(--s); color: var(--t1); font-family: inherit; font-size: 16px; font-weight: 900; cursor: pointer; }
.slot-pick:hover { border-color: var(--gold); color: var(--gold); }
.scrims-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 18px; }
.scrims-item { display: flex; flex-direction: column; gap: 6px; }
.scrims-item .scrim-card { flex: 1; }
.scrims-host { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--t2); padding: 0 4px; }
.scrims-host a { color: var(--t1); }
@media (max-width: 640px) {
  .scrims-grid { grid-template-columns: 1fr; }
  .scrim-slots { grid-template-columns: 1fr; }
  .scrim-time { min-width: 64px; }
}

/* ─── Scrim results (js/scrims-results.js, js/scrim-page.js) ─── */
.results-table-wrap { overflow-x: auto; border: 1px solid var(--b1); border-radius: 12px; background: var(--s); -webkit-overflow-scrolling: touch; }
.results-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 360px; }
.results-table th, .results-table td { padding: 8px 8px; text-align: center; border-bottom: 1px solid var(--b1); white-space: nowrap; }
.results-table thead th { color: var(--t3); font-size: 12px; font-weight: 800; background: var(--bg); }
.results-table tbody tr:last-child td { border-bottom: 0; }
.results-table .rt-rank { color: var(--gold); font-weight: 900; width: 36px; }
.results-table .rt-name { text-align: right; color: var(--t1); font-weight: 800; white-space: normal; min-width: 110px; }
.results-table .rt-sum { color: var(--gold); font-weight: 900; font-size: 15px; }
.results-table .rt-sub { font-size: 11px; font-weight: 700; padding: 4px 4px; }
.results-table tr.is-first td { background: rgba(212, 160, 23, 0.1); }
.results-entry .rt-in { width: 44px; min-width: 0; padding: 7px 4px; text-align: center; border-radius: 8px; border: 1px solid var(--b2); background: var(--bg); color: var(--t1); font-family: inherit; font-size: 14px; }
.results-entry .rt-in:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.sr-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sr-shot { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; border: 1px dashed var(--b2); background: var(--s); }
.sr-shot strong { font-size: 13px; color: var(--t1); }
.sr-shot-img { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; overflow: hidden; }
.sr-shot-img img { display: block; width: 100%; max-height: 180px; object-fit: contain; background: #000; }
.sr-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; width: 100%; }
.sr-thumb { position: relative; display: block; }
.sr-thumb .sr-shot-img img { max-height: 54px; }
.sr-thumb-x { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.75); color: #fff; font-size: 11px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
/* dropdown lists: the options of a select were white text on the browser's white list (unreadable); now dark like the site */
select { color-scheme: dark; }
select option, select optgroup { background-color: #1a1a1e; color: #f0f0f2; }
.swal2-popup select { background-color: #0f0f12; color: #f0f0f2; border: 1px solid #333338; border-radius: 8px; }
.sr-shot-pick { cursor: pointer; }
.sr-shot-pick.is-disabled { opacity: 0.5; pointer-events: none; }
.wa-box .wa-sub { margin: 2px 0 0; color: var(--t3); font-size: 12px; }
@media (max-width: 480px) {
  .results-table { min-width: 300px; }
  .results-table th, .results-table td { padding: 7px 5px; }
  .results-table .rt-name { min-width: 84px; }
  .results-entry .rt-in { width: 38px; }
}

/* ─── Photo on an application card ─── */
.idc-photo-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.idc-photo-actions { display: flex; gap: 4px; }
.idc-photo-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--b2); background: var(--s); color: var(--t2); font-family: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.idc-photo-btn:hover { color: var(--gold); border-color: var(--gold); }
.idc-photo-btn.is-danger:hover { color: #f87171; border-color: rgba(239, 68, 68, 0.6); }