/* ============================================================
   desktop.css — שכבת עיצוב ייעודית לדסקטופ (≥1024px)
   ⚠️ המובייל/האפליקציה לא מושפעים כלל — הכל בתוך media query.
   ============================================================ */

/* ────────────────────────────────────────────────
   בסיס גלובלי לדסקטופ
   ──────────────────────────────────────────────── */
@media (min-width: 1024px) {

  html { font-size: 17px; }
  body { padding-bottom: 0 !important; }

  /* בדסקטופ מאפשרים בחירת טקסט (במובייל היה חסום למראה אפליקציה) */
  body, p, h1, h2, h3, span, div, a, li { -webkit-user-select: text; user-select: text; }

  /* פס גלילה מעוצב */
  ::-webkit-scrollbar { width: 12px; }
  ::-webkit-scrollbar-track { background: #04070f; }
  ::-webkit-scrollbar-thumb { background: rgba(94,178,255,.3); border-radius: 6px; border: 3px solid #04070f; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(94,178,255,.55); }

  /* ────────────────────────────────────────────────
     ניווט עליון (עמוד הבית)
     ──────────────────────────────────────────────── */
  nav {
    padding: 16px clamp(32px, 6vw, 80px) !important;
  }
  .brand-logo { width: 48px; height: 48px; }
  .brand-name { font-size: 25px; }
  .nav-cta { font-size: 15px; padding: 12px 26px; }
  .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(245,163,0,.5); }

  /* ────────────────────────────────────────────────
     HERO — פריסת שתי עמודות (רק ה-header של עמוד הבית!
     ⚠️ match_stats.php משתמש גם ב-class="hero" לתצוגת הקבוצות —
     לכן מגבילים כאן ל-header.hero כדי לא לדלוף לשם)
     ──────────────────────────────────────────────── */
  header.hero {
    max-width: 1180px;
    margin: 0 auto;
    min-height: calc(100vh - 74px) !important;
    padding: 40px clamp(32px, 5vw, 64px) !important;
    display: grid !important;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    align-content: center;
    justify-items: start;
    gap: 22px 56px;
    text-align: right !important;
  }
  .hero-logo {
    width: min(400px, 32vw) !important;
    margin: 0 !important;
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    justify-self: center;
  }
  .hero-tagline { grid-column: 1; grid-row: 1; margin-bottom: 8px !important; font-size: 13px; }
  .hero-title  { grid-column: 1; grid-row: 2; font-size: clamp(52px, 5.2vw, 78px) !important; margin-bottom: 20px !important; }
  .hero-sub    { grid-column: 1; grid-row: 3; max-width: 520px !important; font-size: 18px !important; margin-bottom: 30px !important; }
  /* הכפתורים פורצים משתי העמודות ומתמרכזים ביחס לרוחב המלא של ה-hero (לא רק העמודה הימנית) */
  .hero-actions{
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    justify-self: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 10px auto 0 !important;
  }
  .hero-actions > * { width: 100% !important; }
  .scroll-hint { display: none !important; }

  /* כפתורי התחברות — hover */
  .btn-google:hover, .btn-apple:hover, .btn-join:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(0,0,0,.45);
  }

  /* ────────────────────────────────────────────────
     סטטיסטיקות
     ──────────────────────────────────────────────── */
  .stats {
    max-width: 640px;
    margin: 0 auto 72px !important;
  }
  .stat { padding: 30px 14px; }
  .stat-num { font-size: 40px; }
  .stat-label { font-size: 12px; }

  /* ────────────────────────────────────────────────
     סקשנים כלליים
     ──────────────────────────────────────────────── */
  section.block { max-width: 1180px; margin: 0 auto; padding: 0 clamp(32px, 5vw, 64px) 84px !important; }
  .eyebrow { font-size: 12.5px; margin-bottom: 16px; }
  .h2 { font-size: clamp(36px, 3.6vw, 48px) !important; margin-bottom: 50px !important; }

  /* פיצ'רים — רשת 3 עמודות */
  .features {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .feat {
    padding: 26px !important;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .feat:hover {
    transform: translateY(-6px);
    border-color: rgba(94,178,255,.45) !important;
    box-shadow: 0 22px 52px rgba(0,0,0,.42), 0 0 34px rgba(69,184,255,.1) !important;
  }
  .feat-icon { width: 58px; height: 58px; font-size: 27px; }
  .feat-body h3 { font-size: 18px; }
  .feat-body p { font-size: 14.5px; }

  /* ליגות נתמכות */
  .comps { max-width: 820px; margin: 0 auto; gap: 12px; }
  .comp { font-size: 15px; padding: 13px 22px; transition: all .2s ease; cursor: default; }
  .comp:hover { transform: translateY(-3px); border-color: var(--electric); background: var(--glass-bright); box-shadow: 0 0 26px rgba(69,184,255,.22); }

  /* איך זה עובד — 3 עמודות */
  .steps {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1000px !important;
    gap: 18px;
    align-items: stretch;
  }
  .step { flex-direction: column; text-align: center; padding: 30px 22px !important; gap: 14px; }
  .step-n { width: 56px; height: 56px; font-size: 25px; }
  .step-body h3 { font-size: 17px; margin-bottom: 6px; }

  /* CTA */
  .cta-block {
    max-width: 720px; margin: 0 auto 70px !important;
    padding: 58px 40px !important;
  }
  .cta-block h2 { font-size: 36px; }
  .cta-block p { font-size: 17px; }
  .cta-block > div { max-width: 340px !important; }

  /* פוטר */
  footer { padding: 42px 20px !important; }
  .footer-links { gap: 28px; }
  .footer-links a { font-size: 14px; transition: color .2s; }
  .footer-links a:hover { color: var(--gold) !important; }

  /* ────────────────────────────────────────────────
     בסיס לעמודי האפליקציה (דשבורד/הצטרפות/יצירה)
     — ימורכזו יפה עד שנעשה להם פריסת דסקטופ מלאה
     ──────────────────────────────────────────────── */
  header .logout-btn:hover { color: #fff; border-color: var(--electric); background: rgba(69,184,255,.16); }

  /* create-league — אשף (נשאר צר ומרוכז, מוגדל מעט) */
  body:has(.progress) .container { max-width: 560px !important; }
  body:has(.progress) .progress { max-width: 560px; }
  body:has(.progress) .card { padding: 28px !important; }
  body:has(.progress) .btn-ghost:hover, body:has(.progress) .btn-wa:hover { transform: translateY(-2px); }

  /* join — כרטיס מרוכז מוגדל מעט */
  body:has(.code-input) .card { max-width: 460px; }

  /* ════════════════════════════════════════════════
     דשבורד — רשת ליגות רב-עמודתית
     ════════════════════════════════════════════════ */
  body:has(#leagues) header { padding: 16px clamp(28px, 5vw, 64px) !important; }
  body:has(#leagues) .container { max-width: 1060px !important; padding: 34px 24px 70px !important; }
  body:has(#leagues) .welcome { padding: 32px 36px !important; margin-bottom: 28px !important; }
  body:has(#leagues) .welcome-name { font-size: 32px !important; }
  body:has(#leagues) .action-btns { max-width: 520px; }
  body:has(#leagues) .sec-head h2 { font-size: 22px; }
  body:has(#leagues) #leagues {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  body:has(#leagues) #leagues .loader,
  body:has(#leagues) #leagues .empty { grid-column: 1 / -1; }
  .league-card { margin-bottom: 0 !important; padding: 23px 25px !important; }
  .league-card:hover {
    transform: translateY(-4px);
    border-color: var(--electric) !important;
    box-shadow: 0 20px 46px rgba(69,184,255,.2), 0 10px 30px rgba(0,0,0,.35) !important;
  }
  .btn-create:hover, .btn-join-big:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.32); }
  .btn-join-sm:hover, .icon-btn:hover { transform: translateY(-2px); color: var(--ice); }

  /* ════════════════════════════════════════════════
     league.php — ניווט עליון (במקום הדוק הצף התחתון)
     ════════════════════════════════════════════════ */
  body:has(.tabs-wrap) { padding-bottom: 0 !important; }
  body:has(.tabs-wrap) .wrap { display: flex; flex-direction: column; min-height: 100vh; }
  body:has(.tabs-wrap) .app-header { order: 1; position: static !important; }
  body:has(.tabs-wrap) .header-bar { max-width: 1100px; margin: 0 auto; width: 100%; padding: 16px 32px !important; }
  body:has(.tabs-wrap) .tabs-wrap {
    order: 2;
    position: sticky !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(94,178,255,.24) !important;
    background: linear-gradient(180deg, rgba(6,11,25,.97), rgba(4,7,15,.94)) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.4) !important;
    padding: 10px 0 !important;
    z-index: 90 !important;
  }
  body:has(.tabs-wrap) .tabs-bar { max-width: 760px; padding: 0 20px; }
  body:has(.tabs-wrap) .tab-btn { font-size: 14px; padding: 13px 8px; }
  body:has(.tabs-wrap) .tab-btn:hover { color: var(--ice); }
  body:has(.tabs-wrap) .tab-indicator { top: 2px; bottom: 2px; }
  body:has(.tabs-wrap) .container {
    order: 3;
    max-width: 920px !important;
    margin: 0 auto !important;
    width: 100%;
    padding: 28px 24px 70px !important;
  }
  body:has(.tabs-wrap) .toast { bottom: 40px !important; }
  /* טבלת דירוג — מרווח יותר בדסקטופ */
  body:has(.tabs-wrap) .table-wrap { border-radius: 20px; border: 1px solid rgba(94,178,255,.28); }
  body:has(.tabs-wrap) .match-card:hover { border-color: rgba(94,178,255,.45); box-shadow: 0 18px 44px rgba(0,0,0,.45), 0 0 30px rgba(69,184,255,.08); }
  body:has(.tabs-wrap) .stats-btn:hover { background: rgba(69,184,255,.2); }

  /* ════════════════════════════════════════════════
     match_stats.php — פריסת דסקטופ מלאה
     ════════════════════════════════════════════════ */
  body:has(.hero-team) .wrap { max-width: 900px !important; }
  body:has(.hero-team) .hdr { padding: 18px clamp(20px,4vw,40px) !important; }
  body:has(.hero-team) .hero {
    gap: clamp(24px, 6vw, 64px) !important;
    padding: 44px 24px 22px !important;
  }
  body:has(.hero-team) .hero-team img,
  body:has(.hero-team) .hero-team .ph { width: 92px !important; height: 92px !important; margin-bottom: 14px !important; }
  body:has(.hero-team) .hero-name { font-size: 21px !important; margin-bottom: 12px !important; }
  body:has(.hero-team) .hero-vs { font-size: 17px !important; }
  body:has(.hero-team) .fd { width: 23px !important; height: 23px !important; font-size: 11px !important; }
  body:has(.hero-team) .tabs { max-width: 640px; margin: 0 auto; padding: 14px 12px !important; gap: 10px !important; }
  body:has(.hero-team) .tab { padding: 12px 6px !important; font-size: 14px !important; }
  body:has(.hero-team) .tab:hover { color: var(--ice); transform: translateY(-1px); }
  body:has(.hero-team) .panel { padding: 10px 24px !important; }
  body:has(.hero-team) .card { padding: 22px 26px !important; }
  body:has(.hero-team) .cmp-row { padding: 9px 0 !important; font-size: 14px !important; }
  body:has(.hero-team) .cmp-row b { min-width: 64px !important; font-size: 15px !important; }
  body:has(.hero-team) .h2h-row {
    padding: 12px 16px !important; font-size: 13.5px !important;
    transition: border-color .2s, transform .2s;
  }
  body:has(.hero-team) .h2h-row:hover { border-color: rgba(94,178,255,.4); transform: translateY(-1px); }
  body:has(.hero-team) .gm-bars { height: 130px !important; }
  body:has(.hero-team) .gm-bar { max-width: 34px !important; }
  body:has(.hero-team) .gm-val { font-size: 13px !important; }
  body:has(.hero-team) .stbl { font-size: 14px !important; }
  body:has(.hero-team) .stbl th { font-size: 12.5px !important; padding: 10px 6px !important; }
  body:has(.hero-team) .stbl td { padding: 13px 6px !important; }
}

/* מסכים רחבים במיוחד */
@media (min-width: 1500px) {
  header.hero { max-width: 1300px; }
  section.block, .cta-block { max-width: 1300px; }
}