/* ===========================
   Header / Bars / Sheet / Tabs
   =========================== */
.app-header{
  position: sticky; top: 0; z-index: 60;
  height: calc(var(--bar-h) + var(--safe-top));
  padding-top: var(--safe-top);
  background:
    linear-gradient(110deg,
      color-mix(in oklab, var(--brand-700) 100%, #fff 0%) 0%,
      var(--brand) 60%,
      color-mix(in oklab, var(--brand) 96%, #fff 4%) 100%);
  color: #fff;
  border-bottom: var(--hairline);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  backdrop-filter: saturate(1.2) blur(8px);
}
.hdr-wrap{ height: 100%; }
.hdr-row{
  height: var(--bar-h);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: .5rem; padding: 0 var(--sp-4);
}
.brand{ display:inline-flex; align-items:center; gap:.6rem; min-width:0; max-width:100% }
.brand .logo{ width:28px; height:28px; object-fit:contain; }
.brand .name{ font-weight: var(--fw-bold); letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.svc-btn, .user-chip{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding: 0 .9rem; border-radius: 14px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.24);
  color:#fff; transition: transform var(--dur-fast), background var(--dur-fast), opacity var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
}
.svc-btn{ width:44px; padding:0; }
.svc-btn:active{ transform: scale(.96); opacity:.9 }
.user-chip{ max-width:52vw; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:.95rem; }

.sheet-backdrop[aria-hidden="true"]{ display:none }
.sheet-backdrop{
  position:fixed; inset:0; z-index: 70;
  background: rgba(2,6,23,.40);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.sheet{
  position: fixed; inset-inline: .9rem;
  top: calc(var(--safe-top) + .9rem); bottom: .9rem;
  background: var(--surface); border: var(--hairline); border-radius: var(--r-xl);
  display:flex; flex-direction:column; z-index: 71;
  transform: translateY(8px); opacity:0; pointer-events:none;
  transition: opacity var(--dur-med), transform var(--dur-med);
  overflow: hidden;
}
.sheet[data-open="true"]{ opacity:1; transform:none; pointer-events:auto }
.sheet-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: .8rem .85rem; border-bottom: var(--hairline); font-weight: var(--fw-bold);
}
.sheet-content{ padding:.6rem .85rem .9rem; overflow:auto }
.sec{ margin-top:.7rem; border: var(--hairline); background: var(--surface-2); border-radius: var(--r-lg); overflow:hidden; }
.sec-title{ padding:.65rem .85rem; font-weight:700; background: color-mix(in oklab, var(--surface) 92%, var(--bg) 8%); border-bottom: var(--hairline) }
.grid{ display:grid; gap:.45rem; padding:.7rem; grid-template-columns: repeat(2,minmax(0,1fr)) }
.item{
  display:flex; align-items:center; gap:.55rem;
  padding:.7rem .75rem; border-radius: 14px;
  background: var(--surface); border: var(--hairline);
  transition: transform var(--dur-fast), background var(--dur-fast);
}
.item:active{ transform: scale(.98) }
.ic{ width:1.5rem; text-align:center; font-size:1.1rem }

/* Bottom tabs */
.app-tabs{ display: none; }
@media (hover: none) and (pointer: coarse), (max-width: 1024px){
  .app-tabs{
    position: fixed; left:0; right:0; bottom:0; z-index: 65;
    height: calc(var(--tab-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--surface); border-top: var(--hairline); display:block;
  }
  body.has-bottom-nav{ padding-bottom: calc(var(--tab-h) + var(--safe-bottom) + 8px); }
  .sheet{ bottom: calc(var(--safe-bottom) + .9rem + var(--tab-h)); }
}
.tabs-wrap{ height:100% }
.tabs-row{
  height:100%; display:grid; grid-template-columns: repeat(var(--tabs, 4), 1fr);
  align-items:stretch; gap:.25rem; padding: .25rem .5rem;
}
.tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.15rem; border-radius: 14px; min-width:0;
  transition: background var(--dur-fast), transform var(--dur-fast), color var(--dur-fast);
}
.tab:active{ transform: translateY(1px) }
.tab .t-ic{ font-size:1.2rem; line-height:1 }
.tab .t-lbl{ font-size:.78rem; line-height:1; font-weight:700; opacity:.9; white-space:nowrap }
.tab.is-active{
  background: color-mix(in oklab, var(--surface) 90%, var(--bg) 10%);
  position: relative;
}
.tab.is-active::after{
  content:""; position:absolute; inset-inline: 28%; bottom: 6px; height: 3px;
  background: var(--brand); border-radius: 999px;
}
@media print{
  .app-tabs{ display:none !important }
  body.has-bottom-nav{ padding-bottom: 0 !important }
}
.page-container{ max-width:1160px; margin-inline:auto; padding: var(--sp-4); }

/* ===========================
   Cards / Buttons / Badges / Tables / Accordion / Modal / Lightbox
   =========================== */
/* Cards */
.card-sport{
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--r-lg);
  position:relative; overflow:hidden;
}
.card-accent::before{
  content:""; position:absolute; inset:auto auto 0 0; width:160px; height:6px;
  background:repeating-linear-gradient(45deg, var(--brand), var(--brand) 10px, var(--brand-700) 10px, var(--brand-700) 20px)
}
.card-title{ font-weight: var(--fw-bold); letter-spacing:.2px; font-size: var(--fs-lg) }

/* Buttons */
.btn-primary{
  background: var(--brand); color:#fff; border-radius: 14px; padding:.65rem 1rem;
  transition: transform var(--dur-fast), background var(--dur-fast);
  display:inline-flex; align-items:center; gap:.55rem; font-weight:700; font-size:var(--fs-md);
  border:1px solid color-mix(in oklab, var(--brand) 75%, #000 25%);
}
.btn-primary:hover{ background: var(--brand-700) }
.btn-primary:active{ transform: translateY(1px); background: color-mix(in oklab, var(--brand-700) 86%, #000 14%) }

.btn-dark{ background:#0f172a; color:#fff; border:1px solid #0f172a; }

/* أخضر موحّد */
.btn-green{
  background: var(--brand); color:#fff;
  border:1px solid color-mix(in oklab, var(--brand) 75%, #000 25%);
}
.btn-green:hover,.btn-green:focus{ background: var(--brand-700); }
.btn-green:active{
  background: color-mix(in oklab, var(--brand-700) 86%, #000 14%);
  transform: translateY(1px);
}

/* Badge */
.rb-badge{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:var(--fs-sm); font-weight:800;
  color:#045229;
  background:linear-gradient(180deg,#bbf7d0,#ecfdf5);
  border:1px solid #bbf7d0; border-radius:999px; padding:.28rem .65rem
}

/* Avatars */
.p-avatar, .avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid #e5e7eb;background:#fafafa}
.p-initials, .initials{
  width:56px;height:56px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand-50); color:#045229; font-weight:800;
  border:2px solid var(--brand)
}

/* Accordion */
.rb-accordion{ border: var(--hairline); border-radius: var(--r-md); background: var(--surface); overflow:hidden; }
.rb-accordion + .rb-accordion{ margin-top:.75rem; }
.rb-accordion > summary{
  list-style:none; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:14px 16px; cursor:pointer; user-select:none;
  font-weight:800; color:var(--text);
  background: color-mix(in oklab, var(--surface) 92%, var(--bg) 8%);
  font-size:var(--fs-md);
}
.rb-accordion > summary::-webkit-details-marker{display:none}
.rb-accordion > summary::marker{content:""}
.rb-accordion > summary .acc-sub{ font-weight:400; color:var(--muted); font-size:var(--fs-sm); }
.rb-accordion > summary::after{
  content:""; width:10px; height:10px; flex:0 0 auto;
  border-inline-start:2px solid color-mix(in oklab, var(--text) 78%, transparent);
  border-bottom:2px solid color-mix(in oklab, var(--text) 78%, transparent);
  transform:rotate(-45deg); transition:transform var(--dur-med), opacity var(--dur-med); opacity:.9;
}
.rb-accordion[open] > summary::after{ transform:rotate(135deg); }
.rb-accordion > summary:hover{ background: color-mix(in oklab, var(--surface) 86%, var(--bg) 14%) }
.rb-accordion > summary:focus-visible{ outline:2px solid #bbf7d0; outline-offset:2px }
.rb-accordion .acc-content{ border-top: var(--hairline); padding:14px 16px; animation:accFade var(--dur-med) ease; font-size:var(--fs-md); }
@keyframes accFade{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:translateY(0)} }

/* Tables */
.sport-table{width:100%;border-collapse:separate;border-spacing:0}
.sport-table th{
  background:var(--brand-50);
  font-weight:800; font-size:var(--fs-sm);
}
.sport-table th,.sport-table td{
  padding:.75rem; border-bottom: var(--hairline);
  font-size:var(--fs-md);
}
.sport-table tr:hover td{background:color-mix(in oklab, var(--surface) 92%, var(--bg) 8%)}

/* Modal (login) */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(2,6,23,.55);
  backdrop-filter: blur(2px); z-index:1000;
}
.modal-wrap{ position:fixed; inset:0; z-index:1001; display:flex; align-items:center; justify-content:center; padding:16px }
.modal-card{
  width:min(520px, 100%); background:var(--surface); border:var(--hairline);
  border-radius:var(--r-lg);
  transform:scale(.98) translateY(10px); opacity:0;
  transition:transform var(--dur-med), opacity var(--dur-med)
}
.modal-wrap.modal-open .modal-card{ transform:scale(1) translateY(0); opacity:1 }

/* Lightbox */
.lightbox-image{ max-width:95vw; max-height:90vh; object-fit:contain; border-radius:12px; }

/* ===========================
   Splash — لون صافي
   =========================== */
:root{ --splash-bg: var(--brand); } /* يمكن تغييرها لو أردت لوناً خاصاً للسلاش */

html.no-splash #app-splash,
html.no-splash .splash,
html.no-splash .splash-bg,
html.no-splash .splash-overlay{ display: none !important; }

.splash{
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--splash-bg) !important;
  background-image: none !important;
  background: var(--splash-bg) !important;
  opacity: 1; transition: opacity .35s ease;
}
.splash.fade-out{ opacity: 0; pointer-events: none; }
.splash--cover{ padding: 0; }

/* أوقف صورة الخلفية تمامًا إن وُجدت */
.splash-bg{
  display: none !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
}

/* ألغِ الـ overlay */
.splash-overlay{
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.splash-inner{
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center;
  min-height: 100dvh; padding: max(16px, env(safe-area-inset-top)) 16px;
}
.splash-mark{
  width: 96px; height: 96px; border-radius: 18px;
  background: rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  display:flex; align-items:center; justify-content:center;
}
.splash-title{
  font-size: 18px; color: #ffffff; letter-spacing: .3px; font-weight: 800;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}