/* =============================================================================
   JoPlay Tournament — public app styles              web/public/public.css
   -----------------------------------------------------------------------------
   Small app-specific additions ONLY. All core visuals (tokens, cards, pills,
   nav, hdr, tables, modals…) come from /shared/tokens.css + components.css.
   ============================================================================= */

/* ---- header: Tasaddi identity primary (clickable→home), JoPlay in strip ---- */
/* full التصدي logo (transparent PNG) — no white box, sits straight on the header */
.hdr-evt{height:60px;width:auto;max-width:72vw;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.brandrow:active{opacity:.7}
@media(min-width:700px){.hdr-evt{height:78px;max-width:360px}}
/* legacy event-strip bits (still used on the About card) */
.evt-logo{width:28px;height:28px;border-radius:8px;object-fit:cover;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.evt-nm{font-size:11.5px;font-weight:800;color:var(--ch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evt-sub{font-size:9px;font-weight:700;color:var(--grey);white-space:nowrap}

/* ---- match card (fixtures / results lists): logo ABOVE team name ---- */
.mrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:8px;padding:13px 2px;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:none}
.mrow.click{cursor:pointer}
.mrow.click:active{opacity:.6}
.mteam{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;text-align:center}
.mteam span.nm{font-size:12px;font-weight:700;line-height:1.25;max-width:100%;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mteam.win span.nm{font-weight:800}
.mmid{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:74px;align-self:center}
.msc{font-size:16px;font-weight:800;color:var(--ch);letter-spacing:.5px}
.mtime{font-size:13px;font-weight:800;color:var(--ch)}
.msub{font-size:9.5px;color:var(--grey);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.mvenue{text-decoration:underline;cursor:pointer;color:var(--red)}
/* list-row chevron must never stretch in flex rows */
.chev-ic{width:20px;height:20px;flex-shrink:0;color:var(--grey)}
.dhead{font-size:11px;font-weight:800;color:var(--grey-dark);letter-spacing:.4px;margin:16px 2px 8px;display:flex;align-items:center;gap:8px}
.dhead::after{content:"";flex:1;height:1px;background:var(--line)}
.dhead:first-child{margin-top:0}

/* ---- calendar date strip (matches page) ---- */
.cal-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 0 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cal-strip::-webkit-scrollbar{display:none}
.cal-day{flex:0 0 auto;min-width:50px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 9px;border-radius:13px;background:#fff;box-shadow:var(--shadow);color:var(--ch);cursor:pointer}
.cal-day:active{opacity:.65}
.cal-day .cw{font-size:9.5px;font-weight:700;color:var(--grey);white-space:nowrap}
.cal-day .cn{font-size:16px;font-weight:800;line-height:1}
.cal-day .cdot{width:5px;height:5px;border-radius:50%;background:var(--green)}
.cal-day.on{background:var(--ch);color:#fff}
.cal-day.on .cw{color:#cfd4da}
.cal-day.on .cdot{background:#fff}
.cal-day.today .cn{color:var(--red)}
.cal-day.on.today .cn{color:#fff}
.cal-all{justify-content:center;font-size:11.5px;font-weight:800;min-width:auto;padding:8px 14px}

/* ---- standings table ---- */
.tbl .pos{color:var(--grey);font-weight:800;width:22px}
.tbl tr.qrow td:first-child{border-inline-start:3px solid var(--green)}
.tbl tr.qrow{background:#F4FBF7}
.tbl .tm{display:flex;align-items:center;gap:8px;min-width:0}
.tbl .tm .nm{font-weight:700;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:34vw}
.tbl td.num,.tbl th.num{text-align:center}
.tbl .pts{font-weight:800;color:var(--ch)}
@media(max-width:430px){.tbl .colga{display:none}}

/* ---- big scoreboard (match centre) ---- */
.score-card{text-align:center}
.sb{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:8px;margin:10px 0 4px}
.sb .side{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.sb .side .nm{font-size:13px;font-weight:800;line-height:1.3}
.sb .side .fav{color:var(--grey)}
.sb .side .fav.on{color:var(--amber)}
.sb .big{font-size:34px;font-weight:800;color:var(--ch);letter-spacing:2px;align-self:center}
.sb .big.ko-time{font-size:22px;letter-spacing:0}
.goal-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.goal-cols .gcol{min-width:0}
.goal-line{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--grey-dark);padding:3px 0;justify-content:center}
.goal-line svg{width:13px;height:13px;flex-shrink:0;color:var(--grey)}

/* ---- bracket ---- */
.brk-scroll{overflow-x:auto;padding-bottom:10px;-webkit-overflow-scrolling:touch}
.brk-cols{display:flex;gap:14px;align-items:stretch;min-width:max-content}
.brk-col{width:225px;flex-shrink:0;display:flex;flex-direction:column}
.brk-col .rname{font-size:11px;font-weight:800;color:var(--red);letter-spacing:.5px;text-transform:uppercase;text-align:center;margin-bottom:10px;position:sticky;top:0}
.brk-col .rstack{display:flex;flex-direction:column;justify-content:space-around;flex:1;gap:10px}
.brk-m{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px;cursor:pointer}
.brk-m:active{opacity:.65}
.brk-m .l{display:flex;align-items:center;gap:7px;padding:4px 0;min-width:0}
.brk-m .l .nm{font-size:11.5px;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.brk-m .l.tbd .nm{color:var(--grey);font-weight:600}
.brk-m .l.win .nm{font-weight:800}
.brk-m .l .sc{font-weight:800;font-size:12.5px;color:var(--ch)}
.brk-m .meta{font-size:9.5px;color:var(--grey);display:flex;gap:6px;align-items:center;border-top:1px solid var(--line);margin-top:4px;padding-top:5px;flex-wrap:wrap}
/* mobile accordion */
.acc-h{display:flex;align-items:center;gap:10px;width:100%;padding:13px 2px;font-weight:800;font-size:13.5px;color:var(--ch);text-align:start}
.acc-h .cnt{margin-inline-start:auto;font-size:10.5px;color:var(--grey);font-weight:700}
.acc-h svg{width:16px;height:16px;color:var(--grey);transition:transform .15s}
.acc-h.open svg{transform:rotate(90deg)}
html[dir="rtl"] .acc-h svg{transform:scaleX(-1)}
html[dir="rtl"] .acc-h.open svg{transform:scaleX(-1) rotate(-90deg)}
/* mini bracket (QF→F) */
.mini-brk{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;align-items:center}
.mini-col{display:flex;flex-direction:column;gap:8px;justify-content:space-around;height:100%}
.mini-m{background:#fff;border:1.5px solid var(--line);border-radius:9px;padding:5px 7px;cursor:pointer;font-size:10px}
.mini-m .l{display:flex;justify-content:space-between;gap:5px;padding:2px 0;min-width:0}
.mini-m .l .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;min-width:0}
.mini-m .l.tbd .nm{color:var(--grey);font-weight:600}
.mini-m .l b{font-weight:800}

/* ---- groups grid (compact visual previews: logos + team names) ---- */
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.gcell{background:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:12px 13px;cursor:pointer}
.gcell:active{opacity:.65}
.gcell .gc-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.gcell .gn{font-weight:800;font-size:13.5px;color:var(--ch)}
.gcell .gm{font-size:10.5px;color:var(--grey);font-weight:700}
.gc-teams{display:flex;flex-direction:column;gap:7px}
.gc-t{display:flex;align-items:center;gap:7px;min-width:0}
.gc-t .gc-nm{font-size:11.5px;font-weight:700;color:var(--ch);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.gc-t .inline-star{color:var(--green);flex-shrink:0}
.gc-t .inline-star svg{width:13px;height:13px}

/* ---- home ---- */
.urgent-card{display:flex;align-items:center;gap:12px;cursor:pointer;border-inline-start:4px solid var(--red);background:var(--red-tint)}
.urgent-card:active{opacity:.7}
.urgent-ic{width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.urgent-ic svg{width:19px;height:19px}
.news-row{padding:10px 0;border-bottom:1px solid var(--line)}
.news-row:last-child{border-bottom:none}
.hero-count{display:flex;align-items:baseline;gap:8px;justify-content:center;margin:6px 0 2px}
.hero-count .n{font-size:40px;font-weight:800;color:var(--red);line-height:1}
.hero-count .u{font-size:13px;font-weight:700;color:var(--grey-dark)}
.champ-card{background:linear-gradient(135deg,var(--ch) 0%,#3A414B 100%);color:#fff;text-align:center}
.champ-card .label{color:#FF8B96}
.champ-card .muted{color:#AEB5BE}
.champ-card .tr-ic{width:44px;height:44px;color:#F6C453;margin:4px auto 8px}
.champ-card .tr-ic svg{width:44px;height:44px}
.shortcut-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:10px}
.sc-btn{background:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11.5px;font-weight:800;color:var(--ch);cursor:pointer}
.sc-btn svg{width:22px;height:22px;color:var(--red)}
.sc-btn:active{opacity:.65}

/* ---- team page ---- */
.team-head{display:flex;align-items:center;gap:14px}
.team-head .tt{min-width:0;flex:1}
.team-head .tt .h1{line-height:1.25}
.star-btn{width:42px;height:42px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--grey);flex-shrink:0}
.star-btn.on{color:var(--amber);background:#FBEEDC}
.star-btn svg{width:22px;height:22px}

/* ---- media ---- */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.md-item{background:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow);overflow:hidden;cursor:pointer}
.md-item:active{opacity:.7}
.md-thumb{position:relative;aspect-ratio:16/10;background:#E4E7EB;display:flex;align-items:center;justify-content:center;color:var(--grey)}
.md-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.md-thumb .plc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(35,39,46,.28)}
.md-thumb .plc span{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:var(--red)}
.md-thumb .plc svg{width:18px;height:18px;margin-inline-start:2px}
.md-cap{padding:8px 10px;font-size:11px;font-weight:700;color:var(--ch);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yt-frame{aspect-ratio:16/9;width:100%;border:none;border-radius:var(--radius-sm);display:block;background:#000}
.lightbox img{width:100%;border-radius:var(--radius-sm);display:block}

/* ---- account / toggles ---- */
.tog-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.tog-row:last-child{border-bottom:none}
.tog-row .tt{flex:1;min-width:0}
.tog-row .tt b{font-size:13px;display:block}
.tog-row .tt span{font-size:11px;color:var(--grey)}
.tog{width:44px;height:26px;border-radius:999px;background:#D5D9DE;position:relative;flex-shrink:0;transition:background .15s;cursor:pointer}
.tog::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.tog.on{background:var(--green)}
html[dir="rtl"] .tog.on::after{transform:translateX(-18px)}
html[dir="ltr"] .tog.on::after{transform:translateX(18px)}
.notif-row{opacity:.62}
.notif-row.unread{opacity:1}
.notif-row .dot2{width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0}

/* ---- fields list ---- */
.field-row{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line)}
.field-row:last-child{border-bottom:none}
.field-row.click{cursor:pointer}
.field-row.click:active{opacity:.6}
.field-row .fr-main{min-width:0;flex:1}
.field-row .fr-nm{font-weight:800;font-size:14px;color:var(--ch)}
.field-row .fr-loc{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--grey);margin-top:3px;min-width:0}
.field-row .fr-loc svg{width:13px;height:13px;flex-shrink:0;color:var(--red)}
.field-row .fr-loc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.field-row .fr-loc.muted-loc svg{color:var(--grey)}
.field-row .fr-dir{flex-shrink:0;font-size:11.5px;font-weight:800;color:var(--red);background:var(--red-tint);padding:7px 12px;border-radius:999px;text-decoration:none}
.field-row .fr-dir:active{opacity:.65}

/* ---- venue map ---- */
.vmap{height:240px;border-radius:var(--radius-sm);overflow:hidden;background:#E4E7EB}

/* ---- JoPlay footer link on every public page ----
   #view is display:contents (the .pad bottom padding is dropped), and the nav is
   fixed at the bottom, so the footer needs its own bottom clearance or it hides
   behind the nav on scrolling pages. */
.site-footer{margin-top:22px;padding:16px 0 4px;border-top:1px solid var(--line);display:flex;justify-content:center;
  margin-bottom:calc(84px + env(safe-area-inset-bottom, 0px))}
.site-footer a{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.site-footer img{height:20px;width:auto;display:block}
.site-footer span{font-size:11px;font-weight:700;color:var(--grey)}
.site-footer a:active{opacity:.6}

/* ---- JoPlay footer link (About / عن التطبيق only) ---- */
.jp-footer{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);text-decoration:none}
.jp-footer img{height:24px;width:auto;display:block}
.jp-footer span{font-size:11.5px;font-weight:700;color:var(--grey)}
.jp-footer:active{opacity:.65}

/* ---- misc ---- */
.retry-box{text-align:center;padding:26px 0}
.retry-box .btn{margin:12px auto 0}
.inline-star{color:var(--amber);vertical-align:-2px}
.inline-star svg{width:14px;height:14px}
.q-note{font-size:11px;color:var(--grey);margin-top:8px;display:flex;align-items:center;gap:6px}
.q-note svg{width:13px;height:13px;flex-shrink:0}
.badge-q{background:#DDF3E7;color:var(--green)}
.pick-row .gsub{font-size:10.5px;color:var(--grey)}
.pick-star-off{color:var(--grey);display:inline-flex}
.pick-star-off svg{width:16px;height:16px}

/* ---- account forms (register/login/profile — JoPlay .fld pattern) ---- */
.fld{margin-bottom:12px}
.fld label{display:block;font-size:11.5px;font-weight:800;color:var(--grey-dark);margin-bottom:5px}
.fld .hint{font-size:11px;color:var(--grey);margin-top:4px}
.fld-err{color:var(--danger);font-size:11.5px;font-weight:700;margin-top:4px}
.fld-err:empty{display:none}
.pass-wrap{position:relative}
/* password text is always dir="ltr", so the eye lives on the PHYSICAL right
   in both languages (logical props would flip it under the text in RTL) */
.pass-wrap input{padding-right:44px;padding-left:12px}
.pass-eye{position:absolute;right:6px;left:auto;top:50%;transform:translateY(-50%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--grey-dark);cursor:pointer;border-radius:8px}
.pass-eye:active{background:var(--bg)}
.pass-eye svg{width:19px;height:19px}
.type-pill{padding:8px 15px;font-size:12px;cursor:pointer}
/* .info-prose — official Tournament Information page typography (mdLite output).
   Mobile-first; uses logical properties so it reads correctly in RTL & LTR. */
.info-prose{font-size:14px;line-height:1.8;color:var(--ch)}
.info-prose h3{font-size:18px;font-weight:800;color:var(--ch);margin:18px 0 8px;line-height:1.35}
.info-prose h4{font-size:15.5px;font-weight:800;color:var(--ch);margin:16px 0 6px;line-height:1.4}
.info-prose h5{font-size:13.5px;font-weight:800;color:var(--grey-dark);margin:14px 0 6px;letter-spacing:.3px}
.info-prose > :first-child{margin-top:0}
.info-prose p{margin:0 0 12px;line-height:1.8}
.info-prose ul{margin:0 0 12px;padding-inline-start:22px;list-style:disc}
.info-prose li{margin-bottom:6px;line-height:1.7}
.info-prose strong{font-weight:800;color:var(--ch)}
#view{display:contents}