sidebar
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    button{font:inherit}

    .container{width:100%; margin:auto; padding-left:10px;}

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      margin-bottom:18px;
      
    }
 
#seasonInput:hover,
.control:hover{
  border-color:var(--green);
}

#seasonInput:focus,
.control:focus{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(0,155,77,.15);
}
.team-year{font-weight:700;color:var(--text);}
#seasonInput option{
  background:var(--card);
  color:var(--text);
}
       
       
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .brand-badge{
      width:42px;
      height:42px;
      border-radius:12px;
      background:linear-gradient(135deg,var(--primary),#60a5fa);
      box-shadow:var(--shadow-soft);
    }

    .brand h1{
      font-size:20px;
      margin:0;
      line-height:1.1;
    }

    .brand p{
      margin:3px 0 0;
      color:var(--text-muted);
      font-size:13px;
    }

    .toolbar{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }

    
    .theme-btn,
    .action-btn{
      border:1px solid var(--border);
      background:var(--surface);
      color:var(--text);
      border-radius:var(--btn-radius);
      box-shadow:var(--shadow-soft);
      height:42px;
    }
.control{  background:var(--surface);  color:var(--text); border-radius:var(--btn-radius); float:right; padding-left:5px;padding-left:5px;}
   

    .theme-btn,
    .action-btn{
      padding:0 14px;
      cursor:pointer;
      transition:.2s ease;
    }

    .theme-btn:hover,
    .action-btn:hover{
      background:var(--surface-2);
      border-color:var(--border-strong);
    }

    .layout{
      display:grid;
      grid-template-columns: minmax(0,1fr) 330px;
      gap:18px;
      align-items:start;
    }
.panel-body{padding:4px;}
    .panel,
    .sidebar-card,
    .hero,
    .stat-card,
    .match-card,
    .team-card,
    .info-card{
      background:var(--surface);
      border:1px solid var(--border);
      box-shadow:var(--shadow);
      border-radius:var(--card-radius);
      
    }

    .panel,
.panel-body,
.table-wrap {
  min-width: 0;
  max-width: 100%;
 
}


.grid-2{border:1px solid red;}
.layout{ width:100%; display:flex; margin-bottom:20px;}
.layout main{ width:100%; }
.tab-panel{width:100%; }
 .panel{ margin-bottom:20px;}

    .hero{
      overflow:hidden;
      position:relative;
      margin-bottom:18px;
    }

    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(circle at top left,var(--primary-soft),transparent 40%),linear-gradient(180deg,transparent,rgba(0,0,0,.02));
      pointer-events:none;
    }

    .hero-inner{
      padding:24px;
      display:flex;
      justify-content:space-between;
      gap:18px;
     
      position:relative;
      z-index:1;
      align-items:flex-start;
      flex-wrap:nowrap; /* 🔥 important */
    }

    .league-main{
      display:flex;
      gap:16px;
      align-items:flex-start;
      flex:1;
  min-width:0;
    }

    .league-logo-wrap{
      width:86px;
      height:86px;
      border-radius:20px;
      background:var(--surface-2);
      border:1px solid var(--border);
      display:grid;
      place-items:center;
      padding:14px;
      flex-shrink:0;
    }

    .league-title h2{
      margin:0;
      font-size:29px;
      line-height:1.1;
    }

    .league-meta{
      margin-top:10px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      
    }

    .meta-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      background:var(--surface-2);
      border:1px solid var(--border);
      border-radius:999px;
      color:var(--text-soft);
      font-size:13px;
    }

    .hero-actions{
      display:grid;
      grid-template-columns:repeat(2,minmax(130px,1fr));
      gap:12px;
      min-width:min(100%,300px);
      flex-shrink:0;
  margin-left:auto;
    }

    .stat-card{
      padding:14px;
      box-shadow:var(--shadow-soft);
    }

    .stat-label{
      color:var(--text-muted);
      font-size:12px;
      margin-bottom:8px;
    }

    .stat-value{
      font-size:22px;
      font-weight:700;
      line-height:1.1;
    }

    .stat-note{
      margin-top:6px;
      color:var(--text-soft);
      font-size:12px;
    }

    .tabs{
  display:flex;
  gap:8px;
  padding:8px;
  background:var(--tab-bg);
  border-radius:16px;
  margin-bottom:18px;
  overflow-x:auto;
  overflow-y:hidden;
  border:1px solid var(--border);
  width:100%;
  max-width:100%;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.tabs::-webkit-scrollbar{
  display:none;
}

.tab-btn{
  border:none;
  background:transparent;
  color:var(--text-soft);
  padding:11px 16px;
  border-radius:12px;
  cursor:pointer;
  white-space:nowrap;
  font-weight:600;
  transition:.18s ease;
  flex:0 0 auto;
}

    .tab-btn:hover{background:var(--tab-hover)}
    .tab-btn.active{
      background:var(--tab-active);
      color:var(--tab-active-text);
      box-shadow:var(--shadow-soft);
    }

    .tab-panel{display:none}
    .tab-panel.active{display:block}

    .grid-2{
      display:grid;
      grid-template-columns:1.25fr .95fr;
      gap:18px;
    }

    .section-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:18px 18px 0;
    }

    .section-head h3{
      margin:0;
      font-size:18px;
    }

    .section-head span{
      color:var(--text-muted);
      font-size:13px;
    }

    

    

    .rank-badge.cl{background:rgba(34,197,94,.12);color:var(--success);border-color:rgba(34,197,94,.18)}
    .rank-badge.el{background:rgba(37,99,235,.12);color:var(--primary);border-color:rgba(37,99,235,.18)}
    .rank-badge.rel{background:rgba(239,68,68,.12);color:var(--danger);border-color:rgba(239,68,68,.18)}

    .team-inline{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:210px;
      color:var(--text);
      font-weight:600;
    }
  
    .team-inline img,
    .team-mini img,
    .team-card-head img{
      width:24px;height:24px;object-fit:contain;
      flex-shrink:0;
    }

    .form-badges{
      display:flex;
      align-items:center;
      gap:6px;
      flex-wrap:wrap;
    }

    .form-badge{
      width:24px;height:24px;border-radius:7px;
      display:grid;place-items:center;
      font-size:11px;font-weight:700;
      color:#fff;
    }

    .form-badge.W{background:var(--success)}
    .form-badge.D{background:var(--warning)}
    .form-badge.L{background:var(--danger)}

    .summary-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:14px;
    }

    .info-card{
      padding:16px;
      box-shadow:var(--shadow-soft);
    }

    .info-card small{
      display:block;
      color:var(--text-muted);
      margin-bottom:7px;
    }

    .info-card strong{
      font-size:18px;
    }

    .team-list{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
    }

    .team-card{
      padding:16px;
      box-shadow:var(--shadow-soft);
      transition:.2s ease;
    }

    .team-card:hover{
      transform:translateY(-2px);
      border-color:var(--border-strong);
    }

    .team-card-head{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:14px;
    }

    .team-card h4{
      margin:0 0 4px;
      font-size:16px;
    }

    .team-card p{
      margin:0;
      color:var(--text-muted);
      font-size:13px;
    }

    .team-card-meta{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
    }

    .team-card-meta div{
      background:var(--surface-2);
      border:1px solid var(--border);
      border-radius:12px;
      padding:10px;
    }

    .team-card-meta small{
      color:var(--text-muted);
      display:block;
      margin-bottom:6px;
    }

    .match-list{display:grid;gap:12px}

    .match-card{
      padding:14px;
      box-shadow:var(--shadow-soft);
    }

    .match-top{
      display:flex;
      justify-content:space-between;
      gap:10px;
      margin-bottom:12px;
      color:var(--text-muted);
      font-size:12px;
    }
.match-top-name{font-size:17px;  color:var(--text-soft); font-weight:700;}
    .match-row{
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      gap:12px;
    }

    .team-mini{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
      font-weight:600;
    }

    .team-mini.away{justify-content:flex-end}
    .team-mini span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

    .score-pill{
      min-width:72px;
      text-align:center;
      padding:10px 12px;
      border-radius:12px;
      background:var(--surface-2);
      border:1px solid var(--border);
      font-weight:800;
      color:var(--text);
    }
    
.sidebar.hidden {
  display: none;
 
  gap:18px
}

    .sidebar-card{padding:18px; margin-bottom:14px; }

    .sidebar-card h3{
      margin:0 0 14px;
      font-size:17px;
    }

    .sidebar-list{display:grid;gap:12px}

    .side-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:10px 0;
      border-bottom:1px solid var(--border);
    }

    .side-row:last-child{border-bottom:none;padding-bottom:0}
    .side-row:first-child{padding-top:0}

    .empty-state,
    .loading-state,
    .error-state{
      padding:30px 18px;
      text-align:center;
      color:var(--text-muted);
      background:var(--surface);
      border:1px dashed var(--border-strong);
      border-radius:var(--card-radius);
    }

    .loading-state::after{
      content:"";
      display:block;
      width:32px;height:32px;
      margin:14px auto 0;
      border-radius:50%;
      border:3px solid var(--border);
      border-top-color:var(--primary);
      animation:spin .9s linear infinite;
    }
    .segmented-switch{
  display:flex;
  gap:8px;
  margin-bottom:14px;
  flex-wrap:wrap;
}

.segment-btn{
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-soft);
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  transition:.18s ease;
}

.segment-btn:hover{
  background:var(--tab-hover);
  border-color:var(--border-strong);
}

.segment-btn.active{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}
    
    .toolbar{
        
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  width:100%;
   
}

.toolbar-group{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  position:relative;
}

.toolbar-search{
  flex:1 1 520px;
  min-width:0;
}

.toolbar-actions{
  flex:0 0 auto;
}

.control{
  flex:end;
  width:140px;
}

.action-btn,
.theme-btn{
  min-width:100px;
}



#leagueSearch{
  width:100%;
}

.league-dropdown{
  position:absolute;
  width:400px;
  top:calc(100% + 6px);
  left:0;
  right:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow: var(--shadow-strong);
  max-height:280px;
  overflow:auto;
  z-index:50;
  display:none;
}

.league-dropdown.show{
  display:block;
}

.league-option{
  padding:12px 14px;
  cursor:pointer;
  border-bottom:1px solid var(--border);
  color:var(--text);
  background:var(--surface);
}

.league-option:last-child{
  border-bottom:none;
}

.league-option:hover,
.league-option.active{
  background:var(--surface-2);
}

.league-option small{
  display:block;
  color:var(--text-muted);
  margin-top:3px;
}
.action-btn i,
.theme-btn i{
  margin-right:6px;
}
.league-header > #seasonInput {
  align-self: flex-end;
  width:140px;
  height:25px;
}
.league-header{
  display:flex;
  flex-direction:column;
  gap:10px;
  
  width:100%;
}

/* Row: logo + name in straight line */


/* Row 1: inline */
.league-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  
}

/* Push badge to right */
.pill-note{
  margin-left:auto;
}

/* Title */
.league-name{
  margin:0;
  font-size:26px;
  line-height:1.2;
}

/* Row 2 spacing */
.league-title{
  width:100%;
}




    @keyframes spin{to{transform:rotate(360deg)}}

    .muted{color:var(--text-muted)}
    .pill-note{
      display:inline-flex;
      align-items:center;
      gap:8px;
      background:var(--primary-soft);
      color:var(--primary);
      border-radius:999px;
      padding:8px 12px;
      font-size:12px;
      font-weight:700;
    }

    @media (max-width: 1180px){
      .layout{grid-template-columns:1fr}
      .grid-2{grid-template-columns:1fr}
    }
 
    @media (max-width: 820px){
      .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .team-list{grid-template-columns:1fr}
      .hero-actions{grid-template-columns:1fr 1fr;width:100%}
    }
  @media (max-width: 820px){
      
    .container{padding-left:0px;}  
      
  }
    @media (max-width: 620px){
      .container{width:min(100% - 14px, 100%);margin:14px auto 24px}
      .hero-inner{padding:16px}
      .league-main{width:100%}
      .league-title h2{font-size:22px}
      .topbar{align-items:flex-start;flex-direction:column}
      .toolbar{width:100%}
      select.control,input.control{flex:1;min-width:0}
      .hero-actions{grid-template-columns:1fr}
      .summary-grid{grid-template-columns:1fr}
      .match-row{grid-template-columns:1fr;justify-items:center}
      .team-mini,.team-mini.away{justify-content:center}
      
      .toolbar{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }

  .toolbar-group{
    width:100%;
  }

  .toolbar-search{
    flex-direction:column;
     flex:1 1 100px;
  }

  .toolbar-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  

 
  .action-btn,
  .theme-btn{
    width:100%;
    min-width:0;
    height:48px;
    font-size:15px;
  }

  .league-dropdown{
      top:calc(50% + 6px);
      min-height:150px;
    max-height:340px;
    width:100%;
  }
  
  .hero-inner{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
  }

  .league-main{
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  /* ✅ Make league-meta full width */
  .league-meta{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  /* ✅ Make each item flexible */
  .meta-pill{
    flex:1 1 calc(50% - 8px); /* 2 per row */
    justify-content:center;
    text-align:center;
    padding:10px;
  }

   .league-row{
    gap:10px;
  }

  .league-name{
    font-size:20px;
  }
  
 .tabs{
    flex-wrap:nowrap;
    padding:6px;
    gap:6px;
  }

  .tab-btn{
    padding:10px 14px;
    font-size:14px;
  }
  
    }