{
   --aside-w: 200px;

}
 html {
   height: 100%;

}
 body {
   min-height: 100vh;
   margin: 0;
   display: flex;
   flex-direction: column;
   font-family: 'Poppins', sans-serif;
   background-image: url('images.jpg');
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
   background-repeat: no-repeat;
   color: white;
   position: relative;
   padding-right: var(--aside-w);

}
 body {
   padding-right: var(--aside-w);

}
 body::before {
   content: "";
   position: fixed;
   inset: 0;
   pointer-events: none;
   z-index: 0;
   background: linear-gradient(to left, rgba(0,0,0,.48), rgba(0,0,0,0) 320px);

}
 header {
   background-color: rgba(0, 0, 0, 0.7);
   padding: 1rem 2rem;
   height: 100px;
   display: flex;
   align-items: center;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
   padding-right: calc(var(--aside-w) + 20px);

}
 header h1 {
   margin: 0;
   font-size: 3rem;

}
 aside {
   position: fixed;
   top: 0;
   right: 0;
   height: 100%;
   width: 200px;
   background-color: rgba(0, 0, 0, 0.6);
   padding-top: 120px;
   box-shadow: -2px 0 4px rgba(0, 0, 0, 0.5);

}
 nav ul {
   list-style: none;
   padding: 0;
   margin: 0;
   text-align: center;

}
 nav li {
   margin: 2rem 0;

}
 nav a {
   color: white;
   text-decoration: none;
   font-size: 1.5rem;
   font-weight: 600;
   transition: color 0.3s ease;

}
 nav a:hover, nav a.active {
   color: #00ff99;
   text-decoration: underline;

}
 main {
   flex: 1 0 auto;
   display: block;
   padding: 20px;

}
 .center-panel {
   display: block;
   width: min(1400px, calc(100% - 40px));
   min-width: 1240px;
   margin: 24px auto 32px;
   padding: 24px;
   background: rgba(0,0,0,.58);
   border-radius: 14px;
   box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
   position: relative;
   z-index: 1;
   overflow: visible;
   box-sizing: border-box;

}
 .center-panel > * {
   max-width: 100%;

}
 @media (max-width: 1240px) {
   .center-panel {
     width: calc(100% - 24px);
     margin-left: auto;
     margin-right: auto;

  }

}
.player-position{
  --slot-top: 14px;
  --empty:   56px;
  --img:     92px;
  --img-b:    2px;
  --nudge:    0px;

  position: relative;
  box-sizing: border-box;
  width: 90px;
  height: 140px;
  flex: 0 0 90px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 0;
}

 .position-row {
   display: grid;
   align-items: center;
   padding: 6px 10px;

}
 .gk-rad {
   grid-template-columns: 1fr;
   justify-items: center;

}

/* fyra kolumner – backar och mittfält */
 .def-rad {
   grid-template-columns: repeat(4, 1fr);
   justify-items: center;

}
 .mid-rad {
   grid-template-columns: repeat(4, 1fr);
   justify-items: center;

}

/* två kolumner – anfallare */
 .fwd-rad {
   grid-template-columns: repeat(2, 1fr);
   justify-items: center;

}
 .player-list {
   background-color: white;
   color: black;
   padding: 1.5rem;
   border-radius: 10px;
   max-height: 650px;
   overflow-y: auto;
   box-shadow: 0 0 10px rgba(0,0,0,0.4);
   display: flex;
   flex-direction: column;
   gap: 1rem;
   position: relative;
   padding-bottom: 12px;

}
 .player-list .budget {
   font-weight: bold;
   font-size: 1.2rem;

}
 .player-list select {
   padding: 0.5rem;
   margin-right: 10px;

}
 .player-list ul {
   margin-top: 10px;
   padding-left: 20px;

}
 .league-table, .rules-list {
   margin-top: 20px;

}
 .league-table table {
   width: 100%;
   border-collapse: collapse;
   color: white;

}
 .league-table th, .league-table td {
   border: 1px solid white;
   padding: 0.5rem;
   text-align: left;

}
 footer {
   background-color: rgba(0, 0, 0, 0.8);
   color: white;
   text-align: center;
   padding: 1rem;
   padding-right: var(--aside-w);
   margin-top: auto;
   font-size: 0.9rem;

}
 .team-layout {
   display: flex;
   gap: 2rem;
   align-items: flex-start;

}
 .football-field {
   position: relative;
   width: min(820px, 100%);
   aspect-ratio: 8 / 5;
   background: url('half-rotate.png') center top / 100% 100% no-repeat;
   border: 2px solid rgba(255, 255, 255, 0.9);
   border-radius: 12px;
   flex: 1 1 620px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   gap: 5%;
   padding-top: 5%;
   padding-bottom: 12%;

}
 .football-field .position-row {
   display: grid;
   align-items: center;
   justify-items: center;
   height: 140px;

}
 .gk-rad {
   grid-template-columns: 1fr;

}
 .def-rad {
   grid-template-columns: repeat(4, 1fr);

}
 .mid-rad {
   grid-template-columns: repeat(4, 1fr);

}
 .fwd-rad {
   grid-template-columns: repeat(2, 1fr);

}
 .football-field .gk-rad {
   transform: translateY(-8%);

}
 .football-field .def-rad {
   transform: translateY( -10%);

}
 .football-field .mid-rad {
   transform: translateY( -14%);

}
 .football-field .fwd-rad {
   transform: translateY(-12%);

}

.football-field .fwd-rad{
  grid-template-columns: repeat(2, 90px); 
  justify-content: center;                 
  column-gap: 25%;                  
}

 #återställ-knapp {
   margin-top: 1rem;
   padding: 0.5rem 1rem;
   font-weight: bold;
   background: #e60000;
   color: white;
   border: none;
   border-radius: 5px;
   cursor: pointer;

}
 #återställ-knapp:hover {
   background: #cc0000;

}
 .validation-message {
   width: 100%;
   text-align: center;
   margin-top: 520px;
   position: static;
   font-weight: bold;
   font-size: 1.1rem;
   color: red;

}
 .validation-message.ok {
   color: limegreen;

}
 .validation-message.fel {
   color: red;

}
 .lag-knappar {
   margin-top: 1rem;
   display: flex;
   gap: 1rem;

}
 .lag-knappar button {
   padding: 0.5rem 1rem;
   font-weight: bold;
   border: none;
   border-radius: 5px;
   cursor: pointer;

}
 #återställ-knapp {
   background: #e60000;
   color: white;

}
 #återställ-knapp:hover {
   background: #cc0000;

}
 #bekräfta-knapp {
   background: #007bff;
   color: white;
   padding: 0.5rem 1rem;
   font-weight: bold;
   border: none;
   border-radius: 5px;
   cursor: pointer;

}
 #bekräfta-knapp:hover {
   background: #0056b3;

}
 .omgång-panel {
   margin: 1rem 0;
   padding: 1rem;
   background-color: rgba(255, 255, 255, 0.15);
   border: 1px solid white;
   border-radius: 8px;
   font-size: 1rem;
   color: white;

}

 .player-position .spelare-namn {
   position:absolute;
   top: calc(100% + 4px);
   left: 50%;
   transform: translateX(-50%);
   width: max-content;
   max-width: 90px;
   text-align:center;
   font-size:.9rem;
   font-weight:700;
   color:#fff;
   text-shadow:0 1px 2px rgba(0,0,0,.6);
   pointer-events:none;

}
.player-position:not(.fylld)::before{
  content:"";
  position:absolute;
  top: var(--slot-top);
  left:50%; transform:translateX(-50%);
  width: var(--empty); height: var(--empty);
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 4px rgba(0,0,0,.5);
}
.player-position:not(.fylld)::after{
  content:"+";
  position:absolute;
  top: var(--slot-top);
  left:50%; transform:translate(-50%, 12px);
  font-size: 24px; font-weight: 800; color:#000;
}

.player-position.fylld img.spelare-bild{
  display: block;  
  margin-top: calc(
    var(--slot-top)
    + (var(--empty) / 2)
    - ((var(--img) + (2 * var(--img-b))) / 2)
    + var(--nudge)
  );
  width: var(--img);
  height: var(--img);
  border-radius: 50%;
  object-fit: cover;
  border: var(--img-b) solid #fff;
  box-shadow: 0 0 6px rgba(0,0,0,.45);
}

.player-position .spelare-namn{
  position: absolute;
  top: calc(
    var(--slot-top)
    + (var(--empty) / 2)
    + ((var(--img) + (2 * var(--img-b))) / 2)
    + 10px
    + var(--nudge)
  );
  left:50%; transform:translateX(-50%);
  max-width: 120px;
  padding: 0 2px;
  text-align: center;
  font-size: .95rem;
  font-weight: 700;
  color: #111;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
  white-space: nowrap;
  pointer-events: none;
}

.player-position.fylld:hover{ 
img.spelare-bild,
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

 .spelarkort {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 0.4rem 0.7rem;
   background: rgba(255, 255, 255, 0.95);
   color: #000;
   border-radius: 10px;
   box-shadow: 0 1px 4px rgba(0,0,0,0.15);
   cursor: pointer;
   transition: transform 0.2s ease;
   min-height: 40px;
   margin-bottom: 6px;
   transition: transform 0.2s ease, box-shadow 0.3s ease;

}
 .spelarkort:hover {
   box-shadow: 0 0 10px rgba(0, 255, 153, 0.4);

  /* mintgrön glöd */
   transform: scale(1.01);

}
 .spelarkort-bild {
   width: 70px;
   height: 70px;
   border-radius: 50%;
   object-fit: cover;
   flex-shrink: 0;

}
 .spelarkort-info {
   display: flex;
   flex-direction: column;
   font-size: 0.95rem;

}
 .spelarkort-info h3 {
   margin: 0 0 5px;
   font-size: 1.2rem;

}
 .spelarkort-info p {
   margin: 2px 0;
   font-size: 0.95rem;

}

/* Förbättrad stil för spelarlistan */
 #spelarlista {
   list-style: none;
   padding: 0;
   margin: 1rem 0;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;

}
 #spelarlista li {
   background: rgba(255, 255, 255, 0.95);
   color: #222;
   padding: 0.8rem 1rem;
   border-radius: 8px;
   box-shadow: 0 2px 6px rgba(0,0,0,0.25);
   font-weight: 500;
   font-size: 1rem;
   cursor: pointer;
   transition: transform 0.2s ease, background 0.3s ease;

}
 #spelarlista li:hover {
   background: #e0ffe8;
   transform: scale(1.02);

}
 .spelare-rad {
   display: flex;
   align-items: center;
   gap: 1rem;

}
 .spelare-bild {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   object-fit: cover;
   flex-shrink: 0;

}
 .spelare-info {
   display: flex;
   flex-direction: column;
   font-size: 0.95rem;

}
 .spelare-info .pris {
   font-weight: bold;
   color: #007b00;

}
 .budget-overlay {

  /* OLD */
   position: absolute;
   top: 10px;
   left: 10px;
   background-color: rgba(255, 255, 255, 0.85);
   color: black;
   padding: 8px 12px;
   border-radius: 8px;
   font-weight: bold;
   z-index: 10;

}
 .football-field .budget-overlay {
   position: absolute;
   top: 10px;
   left: 10px;
   background-color: rgba(255, 255, 255, 0.85);
   color: black;
   padding: 8px 12px;
   border-radius: 8px;
   font-weight: bold;
   z-index: 10;

}
 .football-field .corner-button {
   position: absolute;
   bottom: 10px;
   padding: 0.5rem 1rem;
   font-weight: bold;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   z-index: 10;

}
 .football-field .left-corner {
   left: 10px;
   background: #e60000;
   color: white;

}
 .football-field .left-corner:hover {
   background: #cc0000;

}
 .football-field .right-corner {
   right: 10px;
   background: #007bff;
   color: white;

}
 .football-field .right-corner:hover {
   background: #0056b3;

}

/* Placera filtren i rad och minska avstånd */
 .filter-rad {
   display: flex;
   flex-wrap: nowrap;
   gap: 1rem;
   margin-bottom: 0.5rem;
   align-items: center;

}
 .filter-rad label {
   display: flex;
   flex-direction: column;
   font-size: 0.9rem;
   white-space: nowrap;

}
 .filter-rad select {
   width: auto;
   min-width: 120px;
   padding: 0.3rem;

}

/* Minska mellanrum mellan spelare */
 #spelarlista {
   padding-left: 0;

}
 #spelarlista li {
   margin-bottom: 0.5rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.95rem;
   padding: 0.25rem 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);

}
 .spelare-info span {
   display: block;
   font-size: 0.85rem;

}
 .login-container {
   max-width: 400px;
   margin: auto;
   background-color: rgba(255, 255, 255, 0.1);
   padding: 2rem;
   border-radius: 8px;
   box-shadow: 0 0 10px rgba(0,0,0,0.4);

}
 .login-container h2 {
   text-align: center;
   color: white;

}
 .login-container label {
   display: block;
   margin-bottom: 1rem;
   color: white;

}
 .login-container input {
   width: 100%;
   padding: 0.5rem;
   margin-top: 0.25rem;
   border: none;
   border-radius: 4px;

}
 .login-container button {
   width: 100%;
   padding: 0.75rem;
   background-color: #00cc88;
   color: white;
   border: none;
   border-radius: 4px;
   font-weight: bold;
   cursor: pointer;

}
 .login-container button:hover {
   background-color: #00aa77;

}
 .team-name-overlay {
   position: absolute;
   top: 10px;
   right: 10px;
   background-color: rgba(255,255,255,0.85);
   color: black;
   padding: 5px 10px;
   font-weight: bold;
   border-radius: 5px;
   font-size: 1rem;
   z-index: 5;

}
 .mitt-lag-container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 2rem;
   align-items: flex-start;
   justify-content: space-between;

}
 #filterrad {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 30px;

}
 .filter-rad-sok {
   display: flex;
   flex: 1;
   margin-bottom: 10px;

}
 .filter-rad-dropdowns {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;

}
 #filterrad input {
   height: 30px;

  /* lite lägre */
   line-height: 1.4;
   padding: 4px 10px;
   border-radius: 6px;
   border: 1px solid rgba(0,0,0,0.18);
   background: #fff;
   font-size: 14px;
   color: #111;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.06);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;

}
 #filterrad select {
   height: 36px;

  /* lite högre för att inte klippa texten */
   line-height: 1.4;
   padding: 6px 12px;
   border-radius: 6px;
   border: 1px solid rgba(0,0,0,0.18);
   background: #fff;
   font-size: 14px;
   color: #111;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.06);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;

}
 #filterrad input:focus, #filterrad select:focus {
   outline: none;
   border-color: rgba(0,202,160,0.6);
   box-shadow: 0 0 0 2px rgba(0,202,160,0.15);
   background: #fff;

}
 .filter-rad-sok input {
   width: 100%;

}
 #spelarlistecontainer {
   max-height: 750px;
   overflow-y: auto;
   padding: 20px 14px 14px 14px;
   box-sizing: border-box;

}
 .knapp-höger {
   position: absolute;
   bottom: 10px;
   right: 10px;
   z-index: 1;

}
 .knapp-vänster {
   position: absolute;
   bottom: 10px;
   left: 10px;
   z-index: 1;

}
 .football-field .budget {
   position: absolute;
   top: 10px;
   left: 10px;
   background-color: rgba(255, 255, 255, 0.85);
   color: black;
   padding: 8px 12px;
   border-radius: 8px;
   font-weight: bold;
   z-index: 10;

}
 #spelarlistekolumn {
   flex: 0 0 420px;
   max-width: 420px;
   min-width: 420px;
   padding-left: 10px;
   padding-top: 15px;

}
 .player-list {
   width: 100%;

}
 #logout-btn {
   position: absolute;
   top: 20px;
   right: 20px;
   background-color: #cc0000;
   color: white;
   padding: 0.5rem 1rem;
   border: none;
   border-radius: 6px;
   font-weight: bold;
   cursor: pointer;
   z-index: 1000;

}
 #logout-btn:hover {
   background-color: #a10000;

}

/* === Tillagda eller uppdaterade klasser för knappar === */
 .corner-button {
   position: absolute;
   bottom: 10px;
   padding: 0.5rem 1rem;
   font-weight: bold;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   z-index: 10;

}
 .left-corner {
   left: 10px;
   background: #e60000;
   color: white;

}
 .left-corner:hover {
   background: #cc0000;

}
 .right-corner {
   right: 10px;
   background: #007bff;
   color: white;

}
 .right-corner:hover {
   background: #0056b3;

}
 .corner-button:hover {
   opacity: 0.8;

}
 .plan-container {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   flex: 1 1 700px;
   min-width: 620px;

}
 .info-rad {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 2rem;

  /* avstånd mellan lagnamn och budget */
   margin-bottom: 1rem;

}
 .lagnamn {
   font-size: 1.4rem;
   font-weight: bold;

}
 .budget {
   font-size: 1.2rem;

}
 .login-container input[type="email"], .login-container input[type="password"], .login-container input[type="text"] {
   width: 100%;
   padding: 10px;
   margin-top: 5px;
   border: none;
   border-bottom: 2px solid #007bff;

  /* markerande linje under */
   background: transparent;
   color: #fff;
   font-size: 1rem;

}
 .login-container input:focus {
   outline: none;
   border-bottom: 2px solid #00ffcc;

  /* ljus turkos på fokus */

}
 .login-container label {
   color: #fff;

}
 .login-container button {
   margin-top: 1.5rem;
   width: 100%;
   padding: 10px;
   background-color: #007bff;
   color: white;
   border: none;
   border-radius: 4px;
   font-size: 1rem;
   cursor: pointer;
   transition: background-color 0.3s ease;

}
 .login-container button:hover {
   background-color: #0056b3;

}
 .validation-message {
   margin-top: 1rem;
   text-align: center;
   color: #ff4d4f;

  /* röd för felmeddelanden */
   font-weight: bold;

}
 .poang-badge {
   position: absolute;
   top: 2px;
   right: -10px;
   background-color: #007bff;
   color: white;
   font-size: 12px;
   padding: 2px 6px;
   border-radius: 10px;
   font-weight: bold;
   z-index: 2;

}
 #planerade-byten-lista {
   list-style: none;
   padding: 0;
   margin: 0;

}
 .planerat-byte {
   background-color: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.2);
   padding: 1rem;
   margin-bottom: 0.8rem;
   border-radius: 8px;
   color: white;
   font-size: 0.95rem;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   flex-wrap: wrap;

}
 .planerat-byte div {
   max-width: 80%;

}
 .planerat-byte button.ångra-byte-knapp {
   background-color: #b30000;
   color: white;
   border: none;
   padding: 0.4rem 0.7rem;
   font-size: 0.85rem;
   border-radius: 6px;
   cursor: pointer;
   transition: background-color 0.3s;

}
 .planerat-byte button.ångra-byte-knapp:hover {
   background-color: #ff1a1a;

}
 .lagpanel {
   background-color: rgba(255, 255, 255, 0.07);
   padding: 1rem 1.5rem;
   border-radius: 10px;
   margin-bottom: 1.5rem;
   border: 1px solid rgba(255,255,255,0.2);

}
 .lagpanel h3 {
   font-size: 1.3rem;
   margin-bottom: 0.5rem;
   border-bottom: 1px solid rgba(255,255,255,0.2);
   padding-bottom: 0.3rem;

}
 .laginfo-kolumn {
   flex: 1;
   display: flex;
   flex-direction: column;

}
 @media screen and (max-width: 1100px) {
   .football-field {
     width: 100%;
     height: auto;

  }

}
 .spelarkort-info .pris-poang {
   display: flex;
   justify-content: space-between;
   font-weight: bold;
   font-size: 0.85rem;
   margin-top: 4px;
   gap: 10px;

}
 #spelarlistecontainer::-webkit-scrollbar {
   width: 6px;

}
 #spelarlistecontainer::-webkit-scrollbar-track {
   background: rgba(0, 0, 0, 0.2);
   border-radius: 10px;

}
 #spelarlistecontainer::-webkit-scrollbar-thumb {
   background: #00cc88;
   border-radius: 10px;
   border: 2px solid rgba(0, 0, 0, 0.2);

}
 #spelarlistecontainer::-webkit-scrollbar-thumb:hover {
   background: #00aa70;

}
 .rubrik-till-spelare {
   font-size: 22px;
   font-weight: 600;
   color: white;
   text-align: center;
   margin-bottom: 20px;
   margin-top: 10px;
   padding-left: 4px;

}
 #sok-spelare {
   flex: 1;
   min-width: 200px;

}
 #position-filter, #lag-filter {
   padding: 10px 12px;
   border-radius: 12px;
   border: none;
   font-size: 15px;
   background-color: #ffffff;
   color: #111;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
   transition: box-shadow 0.2s ease, transform 0.2s ease;

}
 #sok-spelare:focus, #position-filter:focus, #lag-filter:focus {
   outline: none;
   box-shadow: 0 0 0 2px #00ff99;
   transform: scale(1.02);

}
 .info-rail {
   display: flex;
   justify-content: space-between;
   gap: 2rem;
   background: rgba(0, 0, 0, 0.5);
   padding: 1rem 1.5rem;
   border-radius: 8px;
   margin-bottom: 1rem;
   flex-wrap: wrap;

}
 .info-rail .info-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   min-width: 100px;

}
 .info-rail .info-item span {
   font-size: 1rem;
   color: #ddd;
   margin-bottom: 0.3rem;

}
 .info-rail .info-item strong {
   font-size: 1.2rem;
   font-weight: 700;
   color: #fff;

}

/* För små skärmar: stapla rader */
 @media (max-width: 768px) {
   .info-rail {
     flex-direction: column;
     align-items: center;

  }
   .info-rail .info-item {
     width: 100%;
     align-items: flex-start;
     padding: 0.4rem 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  }
   .info-rail .info-item:last-child {
     border-bottom: none;

  }

}
 .lag-rubrik {
   font-size: 1.6rem;
   font-weight: bold;
   color: #fff;
   text-align: center;
   margin-bottom: 0.5rem;

}
 .planned-panel {
   margin-top: 1.25rem;
   padding: 1rem 1.25rem;
   background: rgba(0,0,0,0.55);
   border: 1px solid rgba(255,255,255,0.08);
   border-radius: 12px;

}

/* === Header med titel och byten kvar === */
 .planned-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 0.75rem;

}
 .planned-title {
   font-size: 1.15rem;
   font-weight: 700;
   letter-spacing: 0.2px;
   margin: 0;

}
 .transfers-left {
   font-size: 0.95rem;
   color: #ddd;

}
 #byten-kvar-badge {
   display: inline-block;
   min-width: 26px;
   padding: 2px 8px;
   border-radius: 999px;
   background: linear-gradient(180deg, #1ea672, #16895d);
   color: #fff;
   font-weight: 700;
   font-size: 0.85rem;
   text-align: center;

}

/* === Tom-state === */
 .empty-state {
   text-align: center;
   color: #ddd;
   font-size: 0.95rem;
   padding: 0.75rem 0.5rem 0.25rem;
   opacity: 0.9;

}

/* === Listan === */
 .planned-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: 1fr;
   gap: 0.6rem;

}

/* === Byte-kort === */
 .planned-item {
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
   gap: 0.75rem;
   padding: 0.9rem 1rem;
   background: rgba(255,255,255,0.06);
   border: 1px solid rgba(255,255,255,0.12);
   border-radius: 10px;
   transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;

}
 .planned-item:hover {
   transform: translateY(-1px);
   background: rgba(255,255,255,0.08);
   border-color: rgba(255,255,255,0.2);

}

/* Vänster innehåll */
 .planned-item .players {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;

}
 .planned-item .from, .planned-item .to {
   display: flex;
   flex-direction: column;
   gap: 0.2rem;

}
 .planned-item .label {
   font-size: 0.8rem;
   color: #bfc7cf;
   opacity: 0.9;

}
 .planned-item .name {
   font-weight: 700;
   color: #fff;

}
 .planned-item .meta {
   color: #cfd6dd;
   font-size: 0.9rem;
   opacity: 0.95;

}
 .arrow {
   font-size: 1.2rem;
   font-weight: bold;
   color: #aaa;
   align-self: center;

}

/* Omgångsbadge */
 .round-badge {
   display: inline-block;
   padding: 2px 8px;
   border-radius: 999px;
   font-size: 0.75rem;
   background: rgba(255,255,255,0.12);
   border: 1px solid rgba(255,255,255,0.18);

}

/* Ångra-knapp */
 .btn-undo {
   appearance: none;
   border: 1px solid rgba(255,255,255,0.18);
   background: rgba(255,255,255,0.08);
   color: #fff;
   border-radius: 8px;
   padding: 6px 10px;
   font-size: 0.85rem;
   cursor: pointer;
   transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;

}
 .btn-undo:hover {
   background: rgba(255,255,255,0.15);
   border-color: rgba(255,255,255,0.26);

}
 .btn-undo:active {
   transform: translateY(1px);

}

/* Responsiv */
 @media (max-width: 768px) {
   .planned-header {
     flex-direction: column;
     gap: 0.5rem;

  }
   .planned-item {
     grid-template-columns: 1fr;

  }
   .planned-item .players {
     flex-direction: column;

  }

}
 .transfers-left-bar {
   margin-top: 1.25rem;
   margin-bottom: 0.5rem;
   text-align: right;
   font-size: 0.95rem;
   color: #ddd;

}
 .transfers-left-bar #byten-kvar-badge {
   display: inline-block;
   min-width: 26px;
   padding: 2px 8px;
   border-radius: 999px;
   background: linear-gradient(180deg, #1ea672, #16895d);
   color: #fff;
   font-weight: 700;
   font-size: 0.85rem;
   text-align: center;

}

/* Lite extra luft i panelen så det inte känns hoptryckt */
 .planned-panel {
   padding: 1.1rem 1.3rem;

}
 #byten-kvar-badge {
   background: none !important;
   border: none !important;
   padding: 0 !important;
   min-width: 0 !important;
   font-weight: 700;
   font-family: 'Poppins', 'Segoe UI Symbol', 'Apple Symbols', system-ui, sans-serif
}
 #byten-kvar-badge.infinite {
   font-size: 1.35rem;

  /* aning större än dina 1.2rem */
   line-height: 1;
   display: inline-block;
   transform: translateY(1px);

  /* lyft upp en pixel för optisk centrering */

}
.avatar-wrapper {
  position: relative;
  width: auto;
  height: auto;
}
 .avatar-wrapper .spelare-bild {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   object-fit: cover;

}
 #notification-container {
   position: fixed;
   top: 1rem;
   right: 1rem;
   z-index: 9999;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;

}
 .notification {
   padding: 0.8rem 1.2rem;
   border-radius: 8px;
   color: white;
   font-weight: 500;
   box-shadow: 0 4px 8px rgba(0,0,0,0.15);
   animation: slideIn 0.3s ease-out, fadeOut 0.3s ease-in forwards;
   animation-delay: 0s, 3s;

  /* försvinner efter 3 sek */

}
 .notification.success {
   background-color: #2ecc71;

  /* grön */

}
 .notification.error {
   background-color: #e74c3c;

  /* röd */

}
 @keyframes slideIn {
   from {
     transform: translateX(150%);
     opacity: 0;

  }
   to {
     transform: translateX(0);
     opacity: 1;

  }

}
 @keyframes fadeOut {
   to {
     opacity: 0;
     transform: translateX(150%);

  }

}

/* === LIGA-VYN === */
 #liga-skapad-vy {
   max-width: 880px;
   margin: 0 auto;
   padding: 18px 22px;
   background: rgba(0,0,0,.55);
   border: 1px solid rgba(255,255,255,.08);
   border-radius: 16px;
   box-shadow: 0 18px 40px rgba(0,0,0,.45);
   backdrop-filter: blur(6px) saturate(1.05);

}

/* ID-rad */
 .liga-id-row {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: .5rem;
   margin: .25rem 0 1.25rem;

}
 .badge-code {
   background: rgba(255,255,255,.12);
   border: 1px solid rgba(255,255,255,.22);
   padding: .42rem .7rem;
   border-radius: 10px;
   font-weight: 800;

}

/* Lista */
 #liga-ranking-lista {
   margin-top: 1.2rem;
   display: grid;
   gap: 0.9rem;
   background: rgba(0,0,0,.35);
   border: 1px solid rgba(255,255,255,.08);
   border-radius: 14px;
   padding: 10px;

}

/* Rad */
 #liga-ranking-lista .liga-rad {
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: 0.9rem;
   padding: 1rem 1.2rem;
   border-radius: 14px;
   background: rgba(0,0,0,0.45);
   border: 1px solid rgba(255,255,255,0.12);
   backdrop-filter: blur(8px);
   font-size: 1.06rem;
   font-weight: 600;
   box-shadow: 0 4px 8px rgba(0,0,0,0.3);

}

/* Rank-pill (ljusare för bättre läsbarhet) */
 #liga-ranking-lista .liga-rad .rank {
   min-width: 2.4rem;
   text-align: center;
   padding: 0.2rem 0.6rem;
   border-radius: 999px;
   background: linear-gradient(135deg, rgba(0, 180, 255, 0.6), rgba(0, 220, 255, 0.8));
   color: #05231a;
   border: 1px solid rgba(255, 255, 255, 0.25);
   font-weight: 800;

}

/* Poäng-pill */
 #liga-ranking-lista .liga-rad .pts {
   padding: 0.3rem 0.7rem;
   border-radius: 999px;
   background: rgba(0, 0, 0, 0.4);
   border: 1px solid rgba(255, 255, 255, 0.18);
   font-weight: 700;

}

/* Ditt lag markerat */
 #liga-ranking-lista .liga-rad.din-rad, #liga-ranking-lista .liga-rad[aria-current="true"], #liga-ranking-lista .liga-rad[data-mitt-lag="true"] {
   background: linear-gradient(180deg, rgba(0,225,167,.18), rgba(0,225,167,.10));
   border-color: rgba(0,225,167,.45);
   box-shadow: 0 10px 26px rgba(0,225,167,.18);

}

/* Mobil */
 @media (max-width: 720px) {
   #liga-skapad-vy {
     padding: 14px 12px;

  }
   #liga-ranking-lista {
     padding: 8px;

  }
   #liga-ranking-lista .liga-rad {
     grid-template-columns: 56px 1fr auto;

  }

}
 #liga-namn-visning {
   font-size: clamp(2rem, 3.4vw, 2.8rem);
   font-weight: 900;
   letter-spacing: .4px;
   margin: .25rem 0 .9rem;
   text-shadow: 0 2px 6px rgba(0,0,0,.35);

}

/* ID-raden: gör “kopiera ID”-knappen snygg och konsekvent */
 .liga-id-row button {
   appearance: none;
   border: 1px solid rgba(255,255,255,.25);
   background: rgba(255,255,255,.12);
   color: #fff;
   padding: .35rem .7rem;
   border-radius: 999px;
   font-weight: 800;
   font-size: .9rem;
   line-height: 1;
   cursor: pointer;

}
 .liga-id-row button:hover {
   filter: brightness(1.08);
   border-color: rgba(255,255,255,.35);

}

/* Lilla runda “antal deltagare”-badgen (om du visar en siffra bredvid) */
 .liga-id-row .count, .liga-id-row .badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 28px;
   height: 24px;
   padding: 0 .5rem;
   border-radius: 999px;
   background: rgba(0,0,0,.45);
   border: 1px solid rgba(255,255,255,.2);
   color: #fff;
   font-weight: 800;
   font-size: .9rem;

}

/* “Gå ur liga”-knappen längst till höger */
 .liga-actions .btn.danger, #liga-skapad-vy .liga-actions button {
   appearance: none;
   border: 1px solid rgba(255,255,255,.18);
   background: #dc3545;
   color: #fff;
   padding: .55rem .9rem;
   border-radius: 12px;
   font-weight: 800;
   cursor: pointer;

}
 .liga-actions .btn.danger:hover, #liga-skapad-vy .liga-actions button:hover {
   filter: brightness(1.06);

}

/* Rank-pill: ljusare så siffran syns bättre */
 #liga-ranking-lista .liga-rad .rank {
   min-width: 2.4rem;
   text-align: center;
   padding: .2rem .6rem;
   border-radius: 999px;
   background: linear-gradient(135deg, rgba(0, 200, 255, .85), rgba(0, 255, 255, .9));
   color: #05231a;
   border: 1px solid rgba(255,255,255,.35);
   font-weight: 900;

}
 #liga-skapad-vy .btn.danger {
   display: block;
   margin: 1.2rem 6px 0 auto;

}
 .center-panel:has(#matcher-lista) {
   max-width: 880px;
   margin: 0 auto;
   padding: 18px 22px;
   background: rgba(0,0,0,.55);
   border: 1px solid rgba(255,255,255,.08);
   border-radius: 16px;
   box-shadow: 0 12px 30px rgba(0,0,0,.45);
   backdrop-filter: blur(6px) saturate(1.05);
   text-align: center;

}

/* Rubriker */
 .center-panel:has(#matcher-lista) h2 {
   font-size: clamp(2rem, 3.2vw, 2.8rem);
   font-weight: 900;
   letter-spacing: .4px;
   margin: .25rem 0 1.1rem;
   text-shadow: 0 2px 6px rgba(0,0,0,.35);

}

/* Kontrollraden (överstyr inline flex-justering) */
 .center-panel:has(#matcher-lista) > div:has(#omgang-rubrik) {
   display: flex !important;
   justify-content: center !important;
   align-items: center !important;
   gap: .75rem !important;
   margin-bottom: .9rem;

}

/* Omgångsnamnet i mitten */
 #omgang-rubrik {
   font-size: 1.15rem;
   font-weight: 800 !important;
   letter-spacing: .2px;
   opacity: .95;

}

/* Piltangenter/knappar */
 #omgang-tillbaka, #omgang-fram {
   appearance: none;
   border: 1px solid rgba(255,255,255,.24);
   background: rgba(255,255,255,.12);
   color: #fff;
   padding: .42rem .7rem;
   border-radius: 999px;
   font-weight: 800;
   line-height: 1;
   cursor: pointer;

}
 #omgang-tillbaka:hover, #omgang-fram:hover {
   filter: brightness(1.08);
   border-color: rgba(255,255,255,.34);

}

/* Matchlistan */
 #matcher-lista {
   list-style: none;
   padding: 0 !important;
   margin: 1rem auto 0 !important;
   display: grid;
   gap: .8rem;
   max-width: 720px;

}

/* Radstil för varje match */
 #matcher-lista li {
   font-size: clamp(1.1rem, 1.7vw, 1.35rem);
   font-weight: 600;
   padding: .85rem 1rem;
   border-radius: 12px;
   background: rgba(0,0,0,.45);
   border: 1px solid rgba(255,255,255,.12);
   text-align: center;

}
 #matcher-lista li.matcher-item {
   display:flex;
   justify-content:center;
   align-items:center;
   gap:.75rem;

}
 #matcher-lista li .resultat {
   padding: 0.25rem 0.6rem;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 8px;
   font-weight: 700;
   color: #fff;
   font-size: 0.95em;

}
 #matcher-lista li.matcher-item .matchlag {
   font-weight:700;
   letter-spacing:.2px;

}

/* valfritt: lite mer tydlig badge */
 #matcher-lista li .resultat {
   padding:.3rem .7rem;
   background: rgba(255,255,255,.1);
   border:1px solid rgba(255,255,255,.22);
   border-radius:10px;
   font-weight:800;
   font-size:1em;

  /* behåll samma höjd som texten */

}
 #matcher-lista li.matcher-item {
   justify-content: space-between;

  /* i stället för center */
   padding: .9rem 1.1rem;

}

/* Lagnamnet får lite tyngd */
 #matcher-lista li.matcher-item .matchlag {
   font-weight: 800;
   letter-spacing: .2px;

}

/* Resultat-badge: monospaced siffror + tydligare kant */
 #matcher-lista li .resultat {
   font-feature-settings: "tnum" 1, "lnum" 1;

  /* tabular, lining */
   -webkit-font-smoothing: antialiased;
   padding: .32rem .7rem;
   background: rgba(255,255,255,.10);
   border: 1px solid rgba(255,255,255,.22);
   border-radius: 10px;
   font-weight: 800;

}

/* Subtil hover på varje rad (endast för skärmpekare) */
 @media (hover:hover) {
   #matcher-lista li.matcher-item {
     transition: transform .12s ease, box-shadow .12s ease, background .12s ease;

  }
   #matcher-lista li.matcher-item:hover {
     transform: translateY(-1px);
     background: rgba(255,255,255,.08);
     box-shadow: 0 6px 14px rgba(0,0,0,.25);

  }

}
 #liga-välj-vy {
   max-width: 820px;
   margin: 0 auto;
   padding: 18px 22px;
   background: rgba(0,0,0,.55);
   border: 1px solid rgba(255,255,255,.08);
   border-radius: 16px;
   box-shadow: 0 12px 30px rgba(0,0,0,.45);
   backdrop-filter: blur(6px) saturate(1.05);

}

/* Rubriker */
 #liga-välj-vy h2 {
   font-size: clamp(1.8rem, 3vw, 2.4rem);
   font-weight: 900;
   letter-spacing: .4px;
   margin: .25rem 0 1.1rem;
   text-shadow: 0 2px 6px rgba(0,0,0,.35);

}
 #liga-välj-vy h3 {
   font-size: clamp(1.1rem, 2vw, 1.35rem);
   font-weight: 800;
   margin: 1.1rem 0 .6rem;

}

/* Rader med input + knapp */
 #liga-välj-vy .formrad, #liga-välj-vy div:has(> input):has(> button) {
   display: flex;
   align-items: center;
   gap: .6rem;
   margin: .35rem 0 .9rem;

}

/* Inputs */
 #liga-välj-vy input[type="text"], #liga-välj-vy input[type="search"], #liga-välj-vy input[type="number"] {
   height: 38px;
   padding: 0 .8rem;
   border-radius: 10px;
   border: 1px solid rgba(255,255,255,.18);
   background: #fff;
   color: #111;
   font-size: 15px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,.06);
   min-width: 220px;

}
 #liga-välj-vy input:focus {
   outline: none;
   border-color: rgba(0,225,167,.6);
   box-shadow: 0 0 0 2px rgba(0,225,167,.18);

}

/* Knappar */
 #liga-välj-vy button {
   appearance: none;
   border: 1px solid rgba(255,255,255,.18);
   background: linear-gradient(180deg,#1ea672,#16895d);
   color: #fff;
   padding: .55rem .9rem;
   border-radius: 12px;
   font-weight: 800;
   cursor: pointer;
   transition: transform .08s ease, filter .12s ease;

}
 #liga-välj-vy button:hover {
   filter: brightness(1.06);

}
 #liga-välj-vy button:active {
   transform: translateY(1px);

}

/* Hjälptext/description */
 #liga-välj-vy p {
   margin: .25rem 0 1rem;
   color: #d9e1e7;
   opacity: .9;
   font-size: .98rem;

}

/* Små skärmar */
 @media (max-width: 640px) {
   #liga-välj-vy .formrad, #liga-välj-vy div:has(> input):has(> button) {
     flex-direction: column;
     align-items: stretch;
     gap: .5rem;

  }
   #liga-välj-vy input[type="text"], #liga-välj-vy input[type="search"], #liga-välj-vy input[type="number"] {
     width: 100%;
     min-width: 0;

  }
   #liga-välj-vy button {
     width: 100%;

  }

}
 #liga-välj-vy {
   max-width:760px;
  margin:0 auto;
  padding:22px 26px;
   background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.08);
   border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
   backdrop-filter:blur(6px) saturate(1.05)
}
 #liga-välj-vy .liga-titel {
   font-size:clamp(1.9rem,3.2vw,2.6rem);
  font-weight:900;
  letter-spacing:.3px;
   margin:.25rem 0 1.2rem;
  text-shadow:0 2px 6px rgba(0,0,0,.35)
}
 #liga-välj-vy .liga-sektion {
  margin:1.5rem 0 1.8rem
}
 #liga-välj-vy .liga-sektion h3 {
   font-size:clamp(1.1rem,2vw,1.35rem);
  font-weight:800;
  margin:0 0 .6rem
}
 #liga-välj-vy .liga-skapa,#liga-välj-vy .liga-ga-med {
   display:flex;
  align-items:center;
  gap:.6rem;
  margin:.35rem 0 .7rem
}

/* Inputs */
 #liga-välj-vy .liga-input {
   height:44px;
  min-width:260px;
  padding:0 .9rem;
  border-radius:12px;
   border:1px solid rgba(0,0,0,.2);
  background:rgba(255,255,255,.9);
   color:#111;
  font-size:1rem;
  font-weight:600;
   transition:background .2s,border-color .2s,box-shadow .2s
}
 #liga-välj-vy .liga-input::placeholder {
  color:rgba(0,0,0,.55)
}
 #liga-välj-vy .liga-input:hover,#liga-välj-vy .liga-input:focus {
   background:#fff;
  border-color:rgba(0,225,167,.8);
   box-shadow:0 0 0 2px rgba(0,225,167,.18);
  outline:0
}

/* Buttons */
 #skapa-liga-btn,#join-liga-btn {
   height:44px;
  padding:0 1rem;
  border-radius:999px;
  font-weight:800;
   border:1px solid rgba(255,255,255,.25);
  color:#fff;
  cursor:pointer;
   transition:transform .12s,filter .12s
}
 #skapa-liga-btn {
  background:linear-gradient(135deg,#00c67a,#009e61)
}
 #join-liga-btn {
  background:linear-gradient(135deg,#007bff,#005dc1)
}
 #skapa-liga-btn:hover,#join-liga-btn:hover {
  transform:translateY(-1px);
  filter:brightness(1.08)
}

/* Hint */
 #liga-välj-vy .liga-hint {
  color:#d9e1e7;
  opacity:.9;
  font-size:.98rem;
  margin:.2rem 0 0
}

/* Mobile */
 @media (max-width:640px) {
   #liga-välj-vy .liga-skapa,#liga-välj-vy .liga-ga-med {
     flex-direction:column;
    align-items:stretch;
    gap:.55rem
  }
   #liga-välj-vy .liga-input {
    min-width:0;
    width:100%
  }
   #skapa-liga-btn,#join-liga-btn {
    width:100%
  }

}
 .center-panel:has(.rules-list) {
   max-width: 980px;
   margin: 0 auto;
   padding: 22px 28px;
   background: rgba(0,0,0,.55);
   border: 1px solid rgba(255,255,255,.08);
   border-radius: 16px;
   box-shadow: 0 12px 30px rgba(0,0,0,.45);
   backdrop-filter: blur(6px) saturate(1.05);

}
 .center-panel:has(.rules-list) > h2 {
   text-align: center;
   font-size: clamp(2rem, 3.2vw, 2.8rem);
   font-weight: 900;
   letter-spacing: .4px;
   margin: .25rem 0 1.1rem;
   text-shadow: 0 2px 6px rgba(0,0,0,.35);

}

/* Sektioner */
 .rules-list {
   background: rgba(0,0,0,.35);
   border: 1px solid rgba(255,255,255,.08);
   border-radius: 14px;
   padding: 14px 18px;
   margin: 14px 0;
   box-shadow: 0 8px 22px rgba(0,0,0,.22);

}
 .rules-list h3 {
   font-size: clamp(1.2rem, 1.8vw, 1.5rem);
   font-weight: 800;
   margin: 0 0 .6rem;

}

/* Listor */
 .rules-list ul {
   list-style: none;
   padding: 0;
   margin: 0;
   display: grid;
   gap: .55rem;

}
 .rules-list li {
   position: relative;
   padding-left: 1.15rem;
   line-height: 1.6;
   color: #eaf1f6;

}
 .rules-list li::before {
   content: "";
   position: absolute;
   left: 0;
   top: .7em;
   width: .45rem;
   height: .45rem;
   border-radius: 999px;
   background: #00e1a7;
   box-shadow: 0 0 0 3px rgba(0,225,167,.15);

}

/* Betoning */
 .rules-list strong {
   color: #fff;
   font-weight: 800;

}
 .rules-list em {
   color: #cfe7ff;
   opacity: .95;

}

/* Lite extra rytm i täta listor */
 .rules-list li + li {
   margin-top: .2rem;

}

.spelarkort {
  background: #fff;         
  border-radius: 8px;       
  padding: 10px;            
  margin-bottom: 10px;      
  display: flex;           
  align-items: center;      
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  color: #111;         
  font-size: 16px;      
}

.spelarkort-info h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #111;
}
.spelarkort-info p {
  margin: 2px 0;
  font-size: 0.95rem;
  color: #333;
}

.pris-badge {
  position: absolute;
  bottom: -6px;
  left: -6px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 700;
  pointer-events: none;
  z-index: 2;
  text-shadow: 0 1px 1px rgba(0,0,0,.7);
}

.player-position.fylld.pending-out img.spelare-bild {
  border-color: #ff3b3b !important;     
  box-shadow: 0 0 6px rgba(0,0,0,.45),  
              0 0 0 2px rgba(255,59,59,.55); 
}

/* utkastets draft-rader */
.planned-item.draft {
  opacity: .95;
  border-left: 4px solid #999;
}

/* rubriker i panelen */
.planned-subtitle {
  margin: .25rem 0 .5rem;
  font-size: .95rem;
  opacity: .9;
}

.planned-panel {
  margin-top: 1rem;
  padding: .9rem 1rem 1.1rem;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
}

/* Header + liten info */
.planned-subtitle {
  margin: .1rem 0 .6rem;
  font-size: .92rem;
  opacity: .85;
}

/* Listan: lite tätare radavstånd */
.planned-list {
  display: grid;
  gap: .5rem;
}

/* Kortet: kompakt, chip-känsla */
.planned-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .6rem;
  padding: .65rem .75rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
}

/* Vänstersidan: liggande chips */
.planned-item .players {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

/* Små etiketter UT/IN */
.planned-item .from .label {
  display: inline-block;
  padding: 2px 6px;
  font-size: .72rem;
  text-transform: uppercase;
  color: #fff;
  background: #dc3545;
  border: 1px solid rgba(220,53,69,.85);
  border-radius: 999px;
}
.planned-item .to .label {
  display: inline-block;
  padding: 2px 6px;
  font-size: .72rem;
  text-transform: uppercase;
  color: #fff;
  background: #28a745;
  border: 1px solid rgba(40,167,69,.85);
  border-radius: 999px;
}

/* Namn-chips: färgsatta UT/IN */
.planned-item .from .name {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(220, 53, 69, 0.16);
  border: 1px solid rgba(220, 53, 69, 0.45);
  font-weight: 700;
  line-height: 1;
}
.planned-item .to .name {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(40, 167, 69, 0.16);
  border: 1px solid rgba(40, 167, 69, 0.45);
  font-weight: 700;
  line-height: 1;
}

/* Position + pris ner-tonas */
.planned-item .meta {
  margin-left: .4rem;
  font-size: .82rem;
  color: #cfd6dd;
  opacity: .9;
}

/* Pilen */
.planned-item .arrow {
  font-size: 1.1rem;
  font-weight: 800;
  color: rgba(255,255,255,.6);
  margin: 0 .2rem;
}

/* Omgångsbadge */
.round-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .74rem;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
}

/* Ångra: röd ikonknapp */
.btn-undo {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  background: rgba(220, 53, 69, .16);
  border: 1px solid rgba(220, 53, 69, .45);
  color: #fff;
  position: relative;
}
.btn-undo::before {
  content: "✕";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .95rem;
  color: #ffefef;
}
.btn-undo:hover {
  background: rgba(220, 53, 69, .28);
  border-color: rgba(220, 53, 69, .65);
}

/* Utkast-rader markerade */
.planned-item.draft { border-left: 4px solid #8fdcc3; }

/* Tom-state */
.empty-state {
  text-align: center;
  opacity: .9;
  color: #d6e6e0;
  font-size: .95rem;
  padding: .35rem 0 .2rem;
}
.empty-state::before {
  display: block;
  font-size: 1.1rem;
  margin-bottom: .25rem;
  opacity: .9;
}

/* Bekräfta-knappen */
#confirm-byten-btn {
  margin-top: .6rem;
  width: 100%;
  padding: .7rem 1rem;
  border-radius: 10px;
  font-weight: 800;
  background: linear-gradient(180deg,#1ea672,#16895d);
  border: 1px solid rgba(0,0,0,.12);
}
#confirm-byten-btn:disabled {
  filter: grayscale(0.2) opacity(.55);
  cursor: not-allowed;
}

.mitt-lag-container{
  display: grid;
  grid-template-columns: 420px minmax(620px, 1fr) 320px; /* vänster | mitt | höger */
  gap: 24px;
  align-items: start;
}

/* Vänster lista (redan 420px i din CSS, vi låser den här också) */
#spelarlistekolumn{
  flex: 0 0 420px;         /* för säkerhets skull om legacy flex skulle slå in */
  max-width: 420px;
  min-width: 420px;
}

/* Mittkolumnen (plan) – samma storlek som du haft */
.plan-container{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 620px;        /* behåll planens upplevda storlek */
  flex: 1 1 auto;
}

/* Högerspalten – inom center-panel, inte över menyn */
#transfers-col{
  width: 320px;
  max-width: 320px;
  min-width: 320px;
}

/* Själva "Planerade byten"-kortet i högerspalten */
#transfers-col .planned-panel{
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  /* Gör panelen "sticky" inom center-panelen */
  position: sticky;
  top: 110px; /* justera så den hamnar snyggt under infolisten */
}

/* Gör att center-panelen inte klipper sticky-elementen */
.center-panel{
  overflow: visible; /* du har redan detta – bra! */
}

/* Små skärmar: lägg panelerna under varandra */
@media (max-width: 1200px){
  .mitt-lag-container{
    grid-template-columns: 1fr; /* en kolumn */
  }
  #transfers-col,
  #spelarlistekolumn,
  .plan-container{
    max-width: none;
    min-width: 0;
    width: 100%;
  }
  #transfers-col .planned-panel{
    position: static; /* ingen sticky i mobil-läge */
    margin-top: .75rem;
  }
}

#transfers-col {
  position: static;   /* not fixed */
  top: auto;
  right: auto;
  height: auto;
  width: 320px;
  max-width: 320px;
  min-width: 320px;
}

/* make the planned panel look/behave like a card inside the center panel */
#transfers-col .planned-panel{
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  position: sticky;
  top: 110px; /* sits under the info rail */
}

.mitt-lag-container{
  display: grid;
  grid-template-columns: 420px minmax(760px, 1fr) 320px; /* left / center / right */
  column-gap: 24px;
  align-items: start;
}

/* left column (player list) — fixed width */
#spelarlistekolumn{
  grid-column: 1;
  max-width: 420px;
}

/* center column (field + rail) — grows */
.plan-container{
  grid-column: 2;
  min-width: 760px;              /* protects the pitch from being squashed */
}

/* right column (planned transfers) — fixed width */
#transfers-col{
  grid-column: 3;
  width: 320px;
  max-width: 320px;
  min-width: 320px;
  position: static;               /* make sure it doesn't inherit the global aside:fixed */
}

/* planned transfers panel looks like the other cards + sticks under the rail */
#transfers-col .planned-panel{
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  position: sticky;
  top: 110px; /* sits just below the info rail */
}

/* the pitch can use the full center column width but keep its nice max size */
.football-field{
  width: 100%;
  max-width: 860px;   /* tweak to taste */
  margin-left: auto;
  margin-right: auto;
}

/* optional: tighten the center panel so three columns fit comfortably */
.center-panel{
  width: min(1600px, calc(100% - 40px)); /* was 1400px */
}

/* responsive fallback: stack on narrower screens */
@media (max-width: 1400px){
  .mitt-lag-container{
    grid-template-columns: 1fr;   /* stack */
    row-gap: 18px;
  }
  #transfers-col{ width:auto; max-width:none; }
  .plan-container{ min-width: 0; }
}

:root { --aside-w: 200px; }

.center-panel{
  /* subtract the aside from the available width */
  width: min(1600px, calc(100% - (40px + var(--aside-w))));
  margin-left: auto;
  margin-right: auto; /* still centered but now never underlaps the aside */
}

/* keep the planned transfers panel sticky under the rail */
#transfers-col .planned-panel{ top: 110px; }

:root{
  --panel-left-gutter: 24px;          /* luft mot vänster */
  --panel-right-gutter: 24px;         /* luft mellan panel och höger-meny */
  --aside-w: 200px;                   /* (du har redan denna – lämna den kvar) */
  --col-left: 420px;                  /* spelarlistan */
  --col-right: 320px;                 /* planerade byten */
}

/* Gör panelen bred nog och förskjut den lite åt vänster,
   men lämna plats för högermenyn */
.center-panel{
  /* ta hela bredden minus högermenyn + lite luft */
  width: calc(100% - (var(--aside-w) + var(--panel-left-gutter) + var(--panel-right-gutter)));
  margin-left: var(--panel-left-gutter);
  margin-right: calc(var(--aside-w) + var(--panel-right-gutter));
  /* se till att skuggan omsluter alla tre kolumner */
  overflow: visible;
}

/* Själva tre-kolumnsraden */
.mitt-lag-container{
  display: grid;
  grid-template-columns: var(--col-left) minmax(680px, 1fr) var(--col-right);
  gap: 24px;
  align-items: start;
}

/* Vänster kolumn (spelarlistan) */
#spelarlistekolumn{
  min-width: var(--col-left);
  max-width: var(--col-left);
  position: sticky;
  top: 110px;               /* så den “stannar” snyggt när man scrollar */
}

/* Mitten: planen behåller sin storlek utan att klämmas */
.plan-container{
  min-width: 680px;
}

/* Höger kolumn (planerade byten) – stannar fint vid scroll */
#transfers-col{
  min-width: var(--col-right);
  max-width: var(--col-right);
  position: sticky;
  top: 110px;
}

/* Gör planerade-byten-panelen lika “panelig” som resten */
#transfers-col .planned-panel{
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}

/* För att undvika att planen krymper av misstag */
.football-field{
  max-width: 860px;   /* samma visuella storlek som du vill ha */
  margin: 0 auto;     /* centrerad inom mittenkolumnen */
}

:root{
  /* flytta panelen en bit HÖGER (större vänstermarginal) */
  --panel-left-gutter: 48px;     /* var 24 – öka/minska efter smak */
  --panel-right-gutter: 24px;

  /* kolumnbredder – mittenkolumnen större så railen ryms på en rad */
  --col-left: 380px;             /* spelarlistan (var 420) */
  --col-mid-min: 820px;          /* minst så railen inte bryts */
  --col-right: 300px;            /* planerade byten (var 320) */
}

/* panel-bredd + placering (inne i skuggad yta) */
.center-panel{
  width: calc(100% - (var(--aside-w) + var(--panel-left-gutter) + var(--panel-right-gutter)));
  margin-left: var(--panel-left-gutter);
  margin-right: calc(var(--aside-w) + var(--panel-right-gutter));
  overflow: visible;
  position: relative;
  z-index: 1;
}

/* tre-kolumnsraden */
.mitt-lag-container{
  display: grid;
  grid-template-columns: var(--col-left) minmax(var(--col-mid-min), 1fr) var(--col-right);
  gap: 24px;
  align-items: start;
}

/* VÄNSTER & HÖGER ska INTE vara sticky längre (de ska scrolla bort) */
#spelarlistekolumn,
#transfers-col{
  position: static !important;
  top: auto !important;
}

/* Mittenkolumnen: lås minbredd & låt planen ta plats utan att klämmas */
.plan-container{
  min-width: var(--col-mid-min);
}

/* Själva planen – håll normal storlek och centrera inom mittenkolumnen */
.football-field{
  max-width: 860px;
  margin: 0 auto;
}

/* Planerade byten – se till att den får samma “panel-känsla” och ligger i skuggan */
#transfers-col .planned-panel{
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}

/* Info-rail: tvinga en rad i den här layouten */
.info-rail{
  flex-wrap: nowrap;
  gap: 2rem;
}

#transfers-col{
  margin-top: 180px; /* justera höjden så den börjar i nivå med planen */
  background: rgba(0,0,0,.55); 
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px;
  height: fit-content;   /* gör att den växer med innehållet */
}

/* Själva panelen behöver inte egen bakgrund längre, den ärvs från col */
#transfers-col .planned-panel{
  background: transparent;
  border: none;
  box-shadow: none;
}

.center-panel {
  /* behåll dina befintliga värden här om du vill, detta är trygga defaults */
  display: block;
  width: min(1400px, calc(100% - 40px));
  min-width: 1240px;
  margin: 24px auto 32px;
  padding: 20px;                    /* lite inre luft */
  background: rgba(0,0,0,.58);      /* den “gamla” skuggan */
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
  position: relative;
  overflow: visible;                 /* så klisterpaneler kan sticka ut lite */
  box-sizing: border-box;
}

/* --- Grid-layouten: gör den TRANSPARENT, ingen egen bakgrund/skugga --- */
.mitt-lag-container {
  display: grid;
  grid-template-columns: 360px 1fr 320px;   /* vänsterlista | plan | byten */
  gap: 22px;
  align-items: start;
  background: transparent !important;       /* <— viktigt */
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;                                /* låt .center-panel sköta padding */
}

/* Spelarlistan kan gärna vara sticky också (valfritt): */
#spelarlistekolumn {
  position: sticky;
  top: 120px;          /* ungefär under header/rail */
  align-self: start;
}

/* Mittenkolumnen (planen) – ingen ändring här normalt,
   men säkra att den får plats så railen inte bryts: */
.plan-container {
  min-width: 820px;    /* samma som din planbredd */
}

/* Högerspalten med planerade byten – sticky + nedflyttning */
#transfers-col {
  position: sticky;
  top: 120px;          /* klibbar under header */
  align-self: start;
  margin-top: 180px;   /* din “börja i höjd med planen”-justering */
}

.mitt-lag-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 420px minmax(760px,1fr) 320px;
  column-gap: 24px;
  align-items: start;
}

.center-panel:has(.mitt-lag-container) {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.center-panel{
  /* lämna plats för högermenyn när panelen centreras */
  width: calc(100% - var(--aside-w) - 40px) !important;
  margin-left: 20px !important;
  margin-right: calc(var(--aside-w) + 20px) !important;
  overflow: visible !important;
}

.mitt-lag-container{
  display: grid !important;
  grid-template-columns: 420px minmax(760px, 1fr) 320px !important; /* vänster | plan | byten */
  column-gap: 24px !important;
  align-items: start !important;
}

/* vänsterkolumn */
#spelarlistekolumn{
  grid-column: 1 !important;
  max-width: 420px !important;
  min-width: 420px !important;
}

/* mittkolumn (plan) */
.plan-container{
  grid-column: 2 !important;
  min-width: 760px !important;     /* skyddar planen från att “tryckas ihop” */
}

/* planen själv – fyll mittkolumn snyggt, ingen överlapp */
.football-field{
  width: 100% !important;
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative;
  z-index: 1;                       /* under planerade-bytens kort */
}

/* högerspalt */
#transfers-col{
  grid-column: 3 !important;
  width: 320px !important;
  max-width: 320px !important;
  min-width: 320px !important;
  position: relative !important;    /* absolut/fixed får inte smita in */
  z-index: 2;
}

/* planerade byten – kort som railen + sticky under rail */
#transfers-col .planned-panel{
  position: sticky !important;
  top: 140px !important;            /* flytta ner så den startar ungefär vid planen */
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) !important;
  z-index: 3;
}

/* gör kortets header lite “rail-ig” */
#transfers-col .planned-panel .planned-header,
#transfers-col .planned-panel .planned-subtitle{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  padding: .5rem .6rem;
}

/* responsiv fallback – stapla allt */
@media (max-width: 1400px){
  .center-panel{
    width: calc(100% - 40px) !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  .mitt-lag-container{
    grid-template-columns: 1fr !important;
    row-gap: 18px !important;
  }
  #spelarlistekolumn, .plan-container, #transfers-col{
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  #transfers-col .planned-panel{
    position: static !important;
    top: auto !important;
  }
}

body.layout-topnav { --aside-w: 0px; }

/* Header som bär logga + top-nav */
body.layout-topnav header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding-right: 20px; /* inte aside-luft längre */
  height: 88px;        /* lite lägre header funkar ofta bättre när nav flyttas upp */
}

/* Gör om aside till top-nav */
body.layout-topnav aside{
  position: static;
  top: auto; right: auto;
  width: auto; height: auto;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

/* Navigationslistan horisontell i headern */
body.layout-topnav nav ul{
  display:flex;
  gap: 1.2rem;
  align-items:center;
  justify-content:flex-end;
}

body.layout-topnav nav li{ margin: 0; }
body.layout-topnav nav a{
  font-weight: 800;
  font-size: 1.05rem;
  padding: .45rem .7rem;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
body.layout-topnav nav a:hover,
body.layout-topnav nav a.active{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.2);
  color:#00ff99;
}

/* Centerpanelen behöver inte reservera plats för aside */
body.layout-topnav .center-panel{
  width: calc(100% - 40px) !important;
  margin-left: 20px !important;
  margin-right: 20px !important;
}


.center-panel{
  background: rgba(0,0,0,.52);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
}
#transfers-col .planned-panel{
  background: rgba(0,0,0,.58) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) !important;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: rgba(0,0,0,0.65);
}

header h1.site-title {
  font-size: 1.8rem;
  margin: 0;
  white-space: nowrap;
}

/* Menyn i mitten */
#top-nav ul {
  display: flex;
  list-style: none;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

#top-nav ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

#top-nav ul li a:hover,
#top-nav ul li a.aktiv {
  color: #00e6a8;
}

/* Logga ut-knappen till höger */
#logout-btn {
  margin-left: 2rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  background: #e63946;
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: bold;
}
#logout-btn:hover {
  background: #c53030;
}

body.layout-topnav {
  padding-right: 0 !important;
}
body.layout-topnav::before {
  background: none !important;
}

/* Dölj ev. kvarvarande <aside> om den råkar finnas */
body.layout-topnav aside {
  display: none !important;
}

/* Header som 3-kolumners grid: vänster = titel, mitten = meny, höger = logout */
body.layout-topnav header {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 20px !important;
  height: auto !important;
  background: rgba(0,0,0,0.65); /* samma stil som tidigare */
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Vänster: titel */
body.layout-topnav header .site-title {
  margin: 0;
  font-size: 2.2rem;
  white-space: nowrap;
  justify-self: start;
}

/* Mitten: meny — centreras oberoende av titel/logout-bredd */
body.layout-topnav header #top-nav {
  justify-self: center;
}
body.layout-topnav header #top-nav ul {
  display: flex;
  list-style: none;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
}
body.layout-topnav header #top-nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
}
body.layout-topnav header #top-nav a:hover,
body.layout-topnav header #top-nav a.aktiv {
  background: rgba(0,230,168,.2);
  border-color: rgba(0,230,168,.45);
  color: #fff;
}

/* Höger: logout */
body.layout-topnav #logout-btn {
  justify-self: end;
  margin: 0;
  padding: .5rem 1rem;
  border-radius: 8px;
  border: none;
  background: #e63946;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
body.layout-topnav #logout-btn:hover { background: #c53030; }

/* Ge innehållet lite luft under den nya headern om det behövs */
body.layout-topnav main#vy {
  margin-top: 8px;
}

#spelarlistekolumn{
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px 14px 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.30);
}

#spelarlistekolumn .rubrik-till-spelare{
  margin: 2px 2px 10px;
}

#spelarlistekolumn #filterrad{
  margin: 0 2px 12px;
}

#spelarlistekolumn #spelarlistecontainer{
  padding: 6px 0 0;
}

/* gör listkortens hörn lite mjukare så de passar panelen */
#spelarlistekolumn .spelarkort{
  border-radius: 12px;
}

/* ============= 2) Planerade byten: undvik dubbla skuggor ============= */
/* Låt själva panelen ha skuggan, och ta bort ev. skuggor på inre rutor */
.planned-panel{
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* Om du råkar ha skuggor på inre element – nollställ dem här */
.planned-panel .planned-header,
.planned-panel .draft-subpanel,
.planned-panel .planned-item,
.planned-panel .empty-state{
  box-shadow: none !important;
}

/* ============= 3) Regler & Spelschema: ta bort bakre skugga + centrera ============= */
/* Släck center-panelens bakgrund/skugga på dessa vyer */
.center-panel:has(.rules-list),
.center-panel:has(#matcher-lista){
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 980px;     /* lagom bredd */
  margin: 0 auto;       /* centrera */
}

/* Rubrikerna centreras och får lite luft */
.center-panel:has(.rules-list) > h2,
.center-panel:has(#matcher-lista) > h2{
  text-align: center;
  margin: 10px 0 18px;
}

/* Själva kortlådorna får stå för “kort”-känslan */
.rules-list{
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}

/* Matchlistan (spelschema) centreras och får en tydlig container */
#matcher-lista{
  max-width: 760px;
  margin: 10px auto 24px !important;
}
#matcher-lista li{
  border-radius: 12px;
}

/* ============= 4) Små justeringar för konsekvens ============= */
/* Toppmeny-pillens skugga och z-index så de alltid syns över paneler */
.topnav{ z-index: 50; }
.topnav .topnav-menu .pill{
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

/* Lite tydligare header-rail ovanför planen (om du vill tona ner – sänk opacitet) */
.info-rail{
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}

#spelarlistekolumn{
  flex: 0 0 420px;          /* exakt samma bredd som tidigare */
  max-width: 420px;
  min-width: 420px;
  box-sizing: border-box;   /* padding/border räknas in i 420px */
  align-self: flex-start;   /* börja uppe, hoppa inte upp/ner */
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px 14px 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.30);
}

/* mjukare kort i listan */
#spelarlistekolumn .spelarkort{ border-radius: 12px; }

/* --- 2) Planerade byten: en skugga, inte två --- */
.planned-panel{
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.planned-panel .planned-header,
.planned-panel .draft-subpanel,
.planned-panel .planned-item,
.planned-panel .empty-state{
  box-shadow: none !important;
}

/* --- 3) Regler & Spelschema: ta bort blur + centrera --- */
/* släck center-panelens bakgrund/blur just på dessa sidor */
.center-panel:has(.rules-list),
.center-panel:has(#matcher-lista){
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  max-width: 980px;
  margin: 0 auto !important;   /* centrera hela panelen */
  padding: 0 !important;
}

/* centrera rubriken */
.center-panel:has(.rules-list) > h2,
.center-panel:has(#matcher-lista) > h2{
  text-align: center;
  margin: 10px 0 18px;
}

/* själva boxarna står för “kort-känslan” */
.rules-list{
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}

/* spelschema-listan centreras och får ren “kort”-look */
#matcher-lista{
  max-width: 760px;
  margin: 10px auto 24px !important;
}
#matcher-lista li{ border-radius: 12px; }

/* centrera kontrollraden med omgång-rubrik/pilar om den finns */
.center-panel:has(#matcher-lista) > div:has(#omgang-rubrik){
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: .75rem !important;
  margin-bottom: .9rem !important;
}

/* --- 4) små konsekvensjusteringar --- */
.mitt-lag-container{ align-items: flex-start; } /* säkerställ gemensam topplinje */

.topnav{ z-index: 50; } /* meny över paneler */
.topnav .topnav-menu .pill{ box-shadow: 0 4px 12px rgba(0,0,0,.25); }

#spelarlistekolumn{
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  padding: 14px;
  margin-top: 12px;           /* justera vid behov (t.ex. 8–18px) */
}

/* (behåll den vita kortstilen på varje .spelarkort som du redan har) */


/* 2) Planerade byten: säkerställ EN skugga (inte dubbel) */
#transfers-col .planned-panel{
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  position: sticky;
  top: 110px;                 /* ligger snyggt under railen */
}

/* 3) Centrera regler/spelschema-paneler och ta bort “bakomliggande”
      center-panel-skugga så det inte ser dubbelt ut */
#vy > .center-panel{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* När en center-panel bara omsluter en intern sektion, gör bakgrunden neutral */
.center-panel:has(#liga-skapad-vy),
.center-panel:has(.rules-list),
.center-panel:has(#matcher-lista){
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Själva korten för Min liga / Regler / Spelschema har redan egna stilar
   (t.ex. #liga-skapad-vy, .rules-list, #matcher-lista). Lägg lite luft ovanför */
#liga-skapad-vy,
.center-panel:has(.rules-list) > h2,
.center-panel:has(#matcher-lista) > h2{
  margin-top: 16px;
}

/* 4) Spelarliste-containeren stack upp – ge den ett litet inre tak och
      lås att hela kolumnen inte “klibbar” mot headern */
#spelarlistecontainer{ padding-top: 6px; }
.mitt-lag-container{ align-items: flex-start; }

/* 5) Liten optisk justering: railen kan ibland trycka ned planen, så
      låt planen själv centreras inom mittenkolumnen */
.plan-container{ align-items: center; }

#spelarlistekolumn{
  margin-top: 70px;            /* prova 100–130px om du vill finjustera */
}

/* 2) Centrera Regler-vyn (behåll egen kort-stil, ingen bakre skugga) */
#vy > .center-panel:has(.rules-list){
  max-width: 980px;
  margin: 0 auto 24px !important;   /* centrera panelen */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Rubrik i Regler centreras och får lite luft */
#vy > .center-panel:has(.rules-list) > h2{
  text-align: center;
  margin: 16px auto 18px;
}

#vy .rules-list {
  max-width: 720px;        /* lagom bredd för läsbarhet */
  margin: 0 auto;          /* centrera horisontellt */
  text-align: left;        /* texten ska fortfarande vara vänsterjusterad inuti */
}

/* Rubriken centreras ovanför */
#vy .rules-list h3,
#vy .rules-list h2 {
  text-align: center;
}

#vy .center-panel:has(.rules-list) {
  max-width: 1100px;      /* kontrollerad totalbredd */
  margin: 0 auto;         /* centrera mot viewport */
  padding-left: 0;        /* ta bort ev. vänster-offset */
  padding-right: 0;
  display: grid;          /* enklast sätt att centrera barn */
  justify-content: center;
}

/* Själva regellistan (innehållet) – fix bredd + centrerad container,
   men behåll vänsterställd brödtext för läsbarhet */
#vy .rules-list {
  width: min(880px, 100%);
  margin: 0 auto;         /* centrera */
  text-align: left;       /* brödtext vänsterställd */
  backdrop-filter: none;  /* säkerställ att ingen blur smyger sig in */
}

/* Rubriker inne i regellistan får gärna vara centrerade */
#vy .rules-list h2,
#vy .rules-list h3 {
  text-align: center;
}

/* Säkerställ att inga sektioner drar ut åt vänster pga tidigare regler */
#vy .rules-list > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.rules-page .center-panel {
  width: 100% !important;
  max-width: 980px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.rules-page .rules-list {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
}

.rules-page .rules-list h2,
.rules-page .rules-list h3 {
  text-align: center;
}

.center-panel:has(.rules-list) {
   max-width: 980px;
   margin: 0 auto;
   padding: 22px 28px;
   background: rgba(0,0,0,.55);
   border: 1px solid rgba(255,255,255,.08);
   border-radius: 16px;
   box-shadow: 0 12px 30px rgba(0,0,0,.45);
   backdrop-filter: blur(6px) saturate(1.05);

   /* fix för centrering */
   display: flex;
   flex-direction: column;
   align-items: center;
}

.rules-list {
   max-width: 720px;   /* gör listan smalare än panelen */
   width: 100%;
}

.rules-list {
   max-width: 720px;
   margin: 0 auto; /* centrerar själva boxen */
   text-align: left; /* texten inuti blir vänsterställd */
}

.rules-list ul {
   display: grid;
   justify-items: start; /* tvingar vänsterjustering i grid */
}

.rules-list ul {
   display: block; /* ta bort grid så textcentrering fungerar */
   padding-left: 0; 
}

.rules-list {
  max-width: 720px;    /* begränsar bredden */
  margin-left: auto;   /* centrerar */
  margin-right: auto;  /* centrerar */
}
.rules-list ul {
  display: grid;
  justify-items: start; /* texten i varje punkt vänsterställd */
}

.center-panel:has(.rules-list) {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.center-panel:has(.rules-list) > .rules-list {
  max-width: 720px;
  width: 100%;
}

body:has(.rules-list) {
  --aside-w: 0px;
  padding-right: 0 !important;              /* ta bort body-padding mot "aside" */
}

/* 2) Dölj ev. aside på just den här vyn (om den råkar ligga kvar i DOM) */
body:has(.rules-list) aside {
  display: none !important;
}

/* 3) Överstyr den globala .center-panel-override med !important */
body:has(.rules-list) .center-panel {
  width: min(980px, calc(100% - 40px)) !important;
  min-width: 0 !important;                  /* slå ut tidigare min-width:1240px */
  margin-left: auto !important;             /* riktig centrering */
  margin-right: auto !important;
  padding: 22px 28px !important;            /* valfri, behåll din panelkänsla */
}

/* 4) Själva regler-boxen: centrerad container, vänsterställd text */
body:has(.rules-list) .rules-list {
  max-width: 720px;
  width: 100%;
  margin: 14px auto;                         /* centrera boxen */
  text-align: left;
}

/* 5) Om du vill ha fin spacing i listan men vänsterjusterat innehåll */
body:has(.rules-list) .rules-list ul {
  display: grid;
  gap: .55rem;
  justify-items: start;                      /* vänsterjustera raderna */
}

#spelarlistekolumn,
#spelarlistecontainer,
.player-list {
  overflow-x: hidden;       /* behåll vertikal scroll, stäng av horisontell */
}

/* 2) Se till att kortens hover-skalning inte påverkar layouten utanför listan */
.player-list { contain: paint; }  /* skapar en egen paint-kontekst som klipper */
.spelarkort {
  transform-origin: center;
  will-change: transform;
}

/* 3) Om du vill vara extra säker att inget sticker ut åt vänster */
.spelarkort .pris-badge { left: 0; transform: translateX(-6px); }

.planned-header { 
  display:flex; justify-content:space-between; align-items:center; 
  margin-bottom:.6rem; 
}
.planned-title { font-weight:800; margin:0; }
#byten-kvar-badge { 
  padding:2px 8px; border-radius:999px; font-weight:800; 
  background:linear-gradient(180deg,#1ea672,#16895d); color:#fff;
}

/* Dölj instruktionsstycket i normalläget */
.planned-panel .help-text { display:none; }

/* Tom-state ersätter långa instruktioner */
.empty-state { 
  text-align:center; opacity:.9; color:#d6e6e0; font-size:.95rem; 
  padding:.4rem 0 .2rem;
}
.empty-state::before { display:block; margin-bottom:.25rem; }

/* Lista – kompakt chips-look */
.planned-list { 
  display:grid; gap:.5rem; margin:0; padding:0; list-style:none;
}
.planned-item { 
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:.6rem; padding:.65rem .75rem; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}
.planned-item .players { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.planned-item .from .label,
.planned-item .to .label {
  display:inline-block; padding:2px 6px; font-size:.72rem; border-radius:999px; color:#fff;
}
.planned-item .from .label { background:#dc3545; border:1px solid rgba(220,53,69,.85); }
.planned-item .to .label   { background:#28a745; border:1px solid rgba(40,167,69,.85); }

.planned-item .name { font-weight:800; }
.planned-item .meta { font-size:.82rem; color:#cfd6dd; opacity:.9; }

/* Ångra-knappen: liten cirkel med X */
.btn-undo { 
  width:32px;height:32px;border-radius:999px; padding:0; 
  background:rgba(220,53,69,.16); border:1px solid rgba(220,53,69,.45); 
  position:relative; color:#fff; cursor:pointer;
}
.btn-undo::before{ content:"✕"; position:absolute; inset:0; display:grid; place-items:center; font-weight:800; }

/* Utkast-chip (syns bara när osparat) */
.draft-chip {
  display:inline-block; margin-left:.5rem; padding:2px 8px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  font-size:.78rem; font-weight:700;
}

/* Primär knapp i panelens botten */
#confirm-byten-btn { 
  margin-top:.6rem; width:100%; padding:.7rem 1rem; border-radius:10px; font-weight:800;
  background:linear-gradient(180deg,#1ea672,#16895d); border:1px solid rgba(0,0,0,.12);
}
#confirm-byten-btn:disabled { filter: grayscale(.2) opacity(.55); cursor:not-allowed; }

.planned-panel {
  padding: 16px;
  border-radius: 14px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.08);
}

.planned-panel{
  background: rgba(10,12,14,.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* Header */
.planned-header{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:10px;
}
.planned-title{ font-size:18px; color:#fff; letter-spacing:.2px; }

/* Lista */
.planned-list{
  display:flex; flex-direction:column; gap:12px;
  max-height: 420px; overflow:auto; padding-right:6px;
}

/* Kort */
.planned-item{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding:12px;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.planned-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* Innehåll i kortet */
.planned-item .players{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
}
.planned-item .arrow{ opacity:.6; }

.planned-item .label{
  font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  padding:3px 8px; border-radius:999px; font-weight:700; color:#fff; width:fit-content;
}
.planned-item .from .label{ background: linear-gradient(180deg,#ff5d6c,#d6404d); }
.planned-item .to   .label{ background: linear-gradient(180deg,#47d787,#2fb06e); }

.planned-item .name{ color:#fff; font-weight:700; margin-top:4px; }
.planned-item .meta{ color: rgba(255,255,255,.70); font-size:12px; }

/* Rad med omgång + X */
.planned-item .meta-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px;
}
.round-badge{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  padding:4px 8px; border-radius:999px; font-size:12px; color:#ddd;
}

/* X-knappen */
.btn-undo{
  width:28px; height:28px; border-radius:999px;
  display:inline-grid; place-items:center; cursor:pointer;
  border:1px solid rgba(255,255,255,.12); background:transparent; color:#eee;
}
.btn-undo::before{ content:"✕"; font-size:14px; line-height:1; }
.btn-undo:hover{ background: rgba(255,255,255,.08); }

/* Tomt-läge */
.empty-state{
  text-align:center; color:rgba(255,255,255,.75);
  background: transparent; border:none; padding:10px 8px;
}

/* Bekräfta-knappen */
#confirm-byten-btn{
  width:100%; margin-top:12px; padding:12px; border-radius:10px;
  font-weight:700; border:none; cursor:pointer;
  background: linear-gradient(90deg,#2be38f,#17b1ff); color:#06231d;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
#confirm-byten-btn:hover:enabled{ filter: brightness(1.05); }
#confirm-byten-btn:disabled{
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.08); cursor:not-allowed; box-shadow:none;
}

/* Snyggare smal scrollbar i panelen (Chromium/WebKit) */
.planned-list::-webkit-scrollbar{ width:6px; }
.planned-list::-webkit-scrollbar-track{ background: transparent; }
.planned-list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18); border-radius:999px;
}
.planned-list::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.26); }

.planned-header .round-badge.small{
  font-size:12px;
  padding:3px 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  color:#ddd;
}

.planned-item {
  position: relative;
  padding-right: 44px;   /* ger luft till X-knappen */
}

/* Vi visar inte per-rad "Omgång …" längre (den ligger i headern) */
.planned-item .meta-row .round-badge {
  display: none;
}

/* Flytta in X-knappen i hörnet på kortet */
.planned-item .btn-undo {
  position: absolute;
  top: 8px;
  right: 10px;           /* <— var tidigare ofta -12px */
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  transform: none;       /* ifall du tidigare använde translate() */
  z-index: 2;
}

/* (valfritt) Lite kompaktare meta-rad när "Omgång" är borta */
.planned-item .meta-row {
  justify-content: flex-start;
  gap: .5rem;
  padding-right: 0;
}

.hydrating { opacity: 0; }

/* Visa mjukt när klar */
.hydrate-ready { 
  opacity: 1; 
  transition: opacity .18s ease;
}

/* Hjälper GPU att förbereda (ingen färgändring) */
#spelarlistecontainer, .football-field, .planned-panel {
  will-change: opacity;
}

.captain-box {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;         
  pointer-events: auto;  
  background: rgba(0,0,0,0.6);
  padding: 4px 6px;
  border-radius: 4px;
  color: white;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 8px;
}

.captain-box select {
  pointer-events: auto;
}

.captain-box select {
  margin-left: 4px;
}

.captain-badge {
  position: absolute;
  top: -7px;
  left: -7px;
  background: gold;
  color: black;
  font-weight: bold;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 2;
}

.poang-badge.captain-current {
  background-color: gold;
  color: black;
  border: 2px solid #d4af37; /* extra snyggt */
  z-index: 3; /* över allt annat */
}

/* Guldig outline runt spelarbilden/kortet */
.player-position.fylld.captain-current img.spelare-bild {
  border-color: gold;     
  box-shadow: 0 0 6px rgba(0,0,0,.45),
              0 0 0 2px rgba(255,215,0,.65);
}

/* Pending out ska alltid ha företräde (röd) */
.player-position.fylld.pending-out img.spelare-bild {
  border-color: #ff3b3b !important;     
  box-shadow: 0 0 6px rgba(0,0,0,.45),
              0 0 0 2px rgba(255,59,59,.55) !important;
}

.player-position.fylld img.spelare-bild {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.player-position.fylld img.spelare-bild.loaded {
  opacity: 1;
}

.football-field .player-position{
  display: flex;               /* behåll ditt flex-beteende */
  align-items: flex-start;
  justify-content: center;
}

/* ringen */
.football-field .player-position:not(.fylld)::before{
  top: var(--slot-top);
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 54px;
  background: rgba(255,255,255,.55);
  border: 2px solid rgba(0,0,0,.40);
  box-shadow: 0 8px 16px rgba(0,0,0,.18);
}

/* pluset: samma top som ringen, men exakt centrerat i ringen */
.football-field .player-position:not(.fylld)::after{
  top: calc(var(--slot-top) + (54px / 2));
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  font-weight: 900;
  color: rgba(0,0,0,.75);
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}

root{ --aside-w: 200px; }

/* 2) Fixa trasig hover-syntax */
.player-position.fylld:hover img.spelare-bild{
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* 3) Stabil layout på planen: raderna blir alltid horisontella */
.football-field .position-row{
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 90px !important;           /* default-gap för 4:or (DEF/MID) */
  height: 140px;                  /* behåll din höjd */
  padding: 6px 10px;
  box-sizing: border-box;
}

/* specifika rader */
.football-field .gk-rad{ gap: 0 !important; }
.football-field .def-rad{ gap: 90px !important; }
.football-field .mid-rad{ gap: 90px !important; }
.football-field .fwd-rad{ gap: 220px !important; } /* 2 anfallare längre isär */

/* se till att varje slot inte kan “växa” */
.football-field .position-row > .player-position{
  flex: 0 0 90px !important;
}

/* (valfritt men tryggt) om något råkar lägga grid på dessa rader senare */
.football-field .position-row{
  grid-template-columns: none !important;
}

.football-field { --pos-x-nudge: -10px; }   /* prova -6px till -14px */

.football-field .position-row{
  margin-left: var(--pos-x-nudge) !important;
}

.football-field .player-position:not(.fylld)::after{
  content: ""; /* default tom, sätts per rad nedan */
  top: calc(var(--slot-top) + (54px / 2));
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  letter-spacing: .06em;
  font-weight: 900;
  color: rgba(0,0,0,.75);
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}

/* Etiketter per rad */
.football-field .gk-rad  .player-position:not(.fylld)::after{ content: "G"; }
.football-field .def-rad .player-position:not(.fylld)::after{ content: "D"; }

/* Om din “mid-rad” egentligen också är backar i hockeylayouten */
.football-field .mid-rad .player-position:not(.fylld)::after{ content: "D"; }

.football-field .fwd-rad .player-position:not(.fylld)::after{ content: "FWD"; }

.football-field .player-position:not(.fylld)::after{
  top: calc(var(--slot-top) + (54px / 2)) !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .06em;
  color: rgba(0,0,0,.78) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);

  z-index: 2;          /* över ringen */
  display: block;
}

.football-field .position-row:nth-of-type(1) .player-position:not(.fylld)::after{ content:"FWD" !important; }
.football-field .position-row:nth-of-type(2) .player-position:not(.fylld)::after{ content:"FWD"   !important; }
.football-field .position-row:nth-of-type(3) .player-position:not(.fylld)::after{ content:"D"   !important; }
.football-field .position-row:nth-of-type(4) .player-position:not(.fylld)::after{ content:"G"   !important; }

.football-field .player-position:not(.fylld)::after{
  color: rgba(0,0,0,.85) !important;
}