/* kampdag.css – kun for Kampdag-fanen */

#kampdag .kampdag-output{
  display:flex;
  flex-direction:column;
  gap:12px;
}

#kampdag .kd-card{
  background:var(--bg-card);
  border-radius:var(--radius-lg);
  padding:20px;
  border:1px solid var(--border);
  box-shadow:none;
}
#kampdag .kd-card h4{
  margin:0 0 10px 0;
  color:var(--text-800);
  font-size:16px;
}

#kampdag .kd-list{
  margin:0;
  padding-left:18px;
  color:var(--text-700);
}

#kampdag .kd-line{
  color:var(--text-700);
  line-height:1.5;
}

#kampdag .kd-badge{
  display:inline-block;
  margin-left:8px;
  padding:3px 10px;
  border-radius:999px;
  background:var(--bg);
  color:var(--text-700);
  font-size:12px;
  font-weight:500;
}

/* Modern keeper card */
#kampdag .kd-keeper-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:14px;
  box-shadow:none;
}
#kampdag .kd-keeper-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

#kampdag .kd-keeper-left{
  display:flex;
  flex-direction:column;
  gap:6px;
}

#kampdag .kd-keeper-right{
  min-width:140px;
}

#kampdag .kd-mini-label{
  display:block;
  font-size:12px;
  font-weight:500;
  color:var(--text-600);
  margin-bottom:6px;
}

#kampdag .kd-keeper-panel{
  margin-top:12px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
}

#kampdag .kd-keeper-rows{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#kampdag .kd-keeper-row{
  display:grid;
  grid-template-columns: 1fr 140px;
  gap:10px;
  align-items:end;
  padding:10px;
  border-radius:12px;
  background:var(--bg-card);
  border:1px solid var(--border);
}

#kampdag .kd-keeper-cell select,
#kampdag .kd-keeper-cell input{
  width:100%;
}

@media (max-width: 520px){
  #kampdag .kd-keeper-row{
    grid-template-columns:1fr;
  }
  #kampdag .kd-keeper-right{
    min-width:auto;
  }
}
@media (max-width: 420px){
  #kdPositionList{
    grid-template-columns:1fr !important;
  }
}

@media (max-width: 640px){
  #kampdag .kd-card{
    padding:12px;
    border-radius:12px;
  }
  #kampdag .kd-card h4{
    font-size:14px;
    margin-bottom:6px;
  }
  #kampdag .kd-keeper-card{
    padding:10px;
    border-radius:10px;
  }
  #kampdag .kd-keeper-panel{
    padding:8px;
    border-radius:10px;
  }
  #kampdag .kd-keeper-row{
    padding:6px 8px;
    border-radius:8px;
    gap:6px;
  }
}

/* Byttefrekvens */
.kd-freq-btn{
  border:none;
  border-radius:var(--radius-full);
  padding:7px 16px;
  font-size:13px;
  font-weight:500;
  background:var(--bg);
  color:var(--text-600);
  cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.kd-freq-active{
  background:var(--primary) !important;
  color:#fff !important;
  border-color:transparent !important;
}
.kd-freq-active .small-text{
  color:rgba(255,255,255,0.85) !important;
}
.kd-freq-btn .small-text{
  color:var(--text-600);
}

/* Formation grid */
.kd-formation-opt{
  background:var(--bg-card);
  border:1.5px solid var(--border);
  border-radius:var(--radius-md);
  padding:10px;
  cursor:pointer;
  text-align:center;
  transition:background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.kd-formation-opt:hover{border-color:var(--text-300); transform: translateY(-1px);}
.kd-formation-opt.kd-formation-active{border-color:var(--primary); background:var(--primary-dim);}
.kd-formation-opt .kd-f-name{font-weight:500; font-size:15px;}
.kd-formation-opt .kd-f-desc{font-size:11px; color:var(--text-500); margin-top:2px;}
.kd-pos-row{
  display:flex; align-items:center; gap:4px;
  padding:4px 6px; border-radius:var(--radius-sm);
  background:var(--bg); margin-bottom:0;
  min-width:0;
}
.kd-pos-name{flex:1; font-size:12px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.kd-pos-checks{display:flex; gap:3px; flex-shrink:0;}
.kd-pos-btn, .kd-pos-tag{
  width:30px; height:26px;
  border-radius:var(--radius-full);
  border:1.5px solid var(--border);
  background:transparent;
  color:var(--text-400);
  font-size:10px;
  font-weight:500;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  padding:0;
}
.kd-pos-tag{cursor:default; opacity:0.85;}

.kd-pos-tag{cursor:default; opacity:0.85;}
.kd-pos-btn.kd-pos-f-on, .kd-pos-tag.kd-pos-f-on{background:rgba(34,197,94,0.1); color:#16a34a; border-color:rgba(34,197,94,0.3);}
.kd-pos-btn.kd-pos-m-on, .kd-pos-tag.kd-pos-m-on{background:var(--primary-dim); color:var(--primary); border-color:var(--primary-glow);}
.kd-pos-btn.kd-pos-a-on, .kd-pos-tag.kd-pos-a-on{background:rgba(239,68,68,0.1); color:#dc2626; border-color:rgba(239,68,68,0.3);}

/* Zone colors in output */
.kd-zone-dot{width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0;}
.kd-zone-label{font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:0.04em; display:flex; align-items:center; gap:6px; margin-bottom:4px;}
.kd-zone-players{display:flex; flex-wrap:wrap; gap:5px; padding-left:14px; margin-bottom:8px;}
.kd-zone-player{font-size:13px; font-weight:500; padding:3px 8px; border-radius:8px; background:var(--bg,#f8f9fa);}
.kd-zone-player.kd-new{background:rgba(34,197,94,0.1); color:#16a34a; border:1px solid rgba(34,197,94,0.2);}
.kd-zone-player.kd-overflow{background:rgba(245,158,11,0.1); color:#d97706; border:1px solid rgba(245,158,11,0.2); font-style:italic;}
.kd-overflow-hint{font-size:11px; color:var(--bg0,#6b7280); padding-left:14px; font-style:italic; margin-top:-4px; margin-bottom:8px;}

/* Pitch mini-view */
.kd-pitch{
  background:linear-gradient(180deg,#1a5c1a 0%,#145214 100%);
  border:2px solid #2a7a2a; border-radius:12px; padding:14px 8px;
  position:relative; overflow:hidden;
}
.kd-pitch::before{content:''; position:absolute; top:50%; left:8%; right:8%; height:1px; background:rgba(255,255,255,0.1);}
.kd-pitch-row{display:flex; justify-content:center; gap:6px; padding:7px 0; position:relative; z-index:1;}
.kd-pitch-player{
  border-radius:7px; padding:3px 9px; font-size:12px; font-weight:500; white-space:nowrap;
}
.kd-pp-f{background:rgba(34,197,94,0.2); color:#4ade80; border:1px solid rgba(34,197,94,0.3);}
.kd-pp-m{background:rgba(69,108,75,0.25); color:#7bc88a; border:1px solid rgba(69,108,75,0.4);}
.kd-pp-a{background:rgba(239,68,68,0.2); color:#f87171; border:1px solid rgba(239,68,68,0.3);}
.kd-pp-k{background:rgba(168,85,247,0.15); color:#c084fc; border:1px solid rgba(168,85,247,0.3);}
.kd-bench-strip{background:var(--bg,#f8f9fa); border-radius:8px; padding:7px 10px; margin-top:8px; font-size:12px; color:var(--bg0,#6b7280);}

/* ============================
   Dark output wrapper (formation mode)
   ============================ */
.kd-dark-output{
  background:var(--bg-dark); border-radius:18px; padding:20px 16px;
  margin-bottom:16px;
  box-shadow:0 6px 24px rgba(0,0,0,0.3);
}
/* Override parent results-container when in dark mode */
.kd-dark-mode,
.results-container:has(.kd-dark-output),
#kdLineup:has(.kd-dark-output),
#kdPlan:has(.kd-dark-output){
  background:transparent !important;
  padding:0 !important;
  box-shadow:none !important;
  border:none !important;
}
.kd-dark-heading{
  color:var(--text-white) !important; font-size:16px !important; font-weight:700; margin:0 0 12px 0 !important;
}

/* If any standard kd-cards are rendered inside the dark wrappers, force dark tokens */
.kd-dark-output .kd-card,
.kd-dark-mode .kd-card{
  background:var(--bg-dark-card);
  border:1px solid var(--border-dark);
}
.kd-dark-output .kd-card h4,
.kd-dark-mode .kd-card h4{ color:var(--text-white); }
.kd-dark-output .kd-card .kd-line,
.kd-dark-output .kd-card .kd-list,
.kd-dark-mode .kd-card .kd-line,
.kd-dark-mode .kd-card .kd-list{ color:var(--text-white-dim); }

/* ============================
   Dark bytteplan cards (prototype-inspired)
   ============================ */
.kd-dark-card{
  background:var(--bg-dark-card);
  color:var(--text-white);
  border-radius:16px; margin-bottom:12px; overflow:hidden;
  border:1px solid var(--border-dark);
  box-shadow:0 4px 16px rgba(0,0,0,0.25);
}
.kd-dark-card .kd-dc-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px 8px; border-bottom:1px solid var(--border-dark);
}
.kd-dark-card .kd-dc-title{font-weight:500; font-size:15px; color:var(--text-white);}
.kd-dark-card .kd-dc-keeper{
  background:rgba(168,85,247,0.15); padding:5px 10px; border-radius:999px;
  font-size:12px; color:#c084fc; font-weight:500; white-space:nowrap;
}
.kd-dark-card .kd-dc-body{padding:10px 14px 14px;}

/* Zone labels on dark */
.kd-dark-card .kd-zone-label{color:var(--text-white-dim); margin-bottom:5px;}
.kd-dark-card .kd-zone-label.kd-zl-a{color:#f87171;}
.kd-dark-card .kd-zone-label.kd-zl-m{color:#7bc88a;}
.kd-dark-card .kd-zone-label.kd-zl-f{color:#4ade80;}

/* Player chips on dark */
.kd-dark-card .kd-zone-player{
  background:rgba(255,255,255,0.08); color:#cbd5e1;
  border:1px solid rgba(255,255,255,0.06);
}
.kd-dark-card .kd-zone-player.kd-new{
  background:rgba(34,197,94,0.15); color:#4ade80;
  border:1.5px solid rgba(34,197,94,0.4);
}
.kd-dark-card .kd-zone-player.kd-overflow{
  background:rgba(245,158,11,0.12); color:#fbbf24;
  border:1.5px solid rgba(245,158,11,0.3); font-style:italic;
}

/* Swaps section on dark */
.kd-dark-card .kd-dc-swaps{
  padding-top:10px; border-top:1px solid rgba(255,255,255,0.08); margin-top:10px;
}
.kd-dark-card .kd-swap-row{
  display:flex; align-items:center; gap:8px; padding:3px 0; font-size:13px;
}
.kd-dark-card .kd-swap-in{width:20px; text-align:center; font-weight:500; color:#4ade80; font-size:15px;}
.kd-dark-card .kd-swap-out{width:20px; text-align:center; font-weight:500; color:#f87171; font-size:15px;}
.kd-dark-card .kd-swap-name{font-weight:500; color:var(--text-white);}
.kd-dark-card .kd-swap-hint{margin-left:auto; font-size:11px; color:var(--text-white-dim); opacity:0.75;}
.kd-dark-card .kd-swap-hint-of{color:#fbbf24;}

/* Avspark note on dark */
.kd-dark-card .kd-dc-note{font-size:12px; color:var(--text-white-dim); opacity:0.75; font-style:italic; margin-top:6px;}

/* Overflow hint on dark */
.kd-dark-card .kd-overflow-hint{color:#fbbf24;}

/* ============================
   Bytteplan 2-column grid (desktop)
   ============================ */
.kd-dc-grid{
  display:grid; grid-template-columns:1fr; gap:12px;
}
.kd-dc-grid .kd-dark-card{
  margin-bottom:0; /* grid gap handles spacing */
}
@media (min-width:768px){
  .kd-dc-grid{ grid-template-columns:1fr 1fr; }
}

/* Timeline chart inside dark wrapper: remove redundant border/shadow */
.kd-dark-output .kd-timeline-chart{
  border:none; box-shadow:none; background:rgba(255,255,255,0.03);
}
/* Dark card inside dark wrapper: subtler */
.kd-dark-output .kd-dark-card{
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}

/* ============================
   Spilletid timeline chart
   ============================ */
.kd-timeline-chart{
  background:var(--bg-dark-card); border-radius:16px; padding:14px;
  border:1px solid var(--border-dark);
  box-shadow:0 4px 16px rgba(0,0,0,0.25);
  margin-bottom:16px;
}
.kd-timeline-title{
  font-size:12px; font-weight:500; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--text-white-dim); margin-bottom:10px;
}
.kd-tl-row{display:flex; align-items:center; gap:8px; padding:3px 0;}
.kd-tl-name{width:70px; text-align:right; font-size:13px; font-weight:500; color:var(--text-white); opacity:0.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.kd-tl-bar-wrap{flex:1; height:16px; background:rgba(255,255,255,0.04); border-radius:4px; display:flex; overflow:hidden;}
.kd-tl-seg{height:100%; min-width:1px;}
.kd-tl-min{width:40px; text-align:right; font-size:12px; font-weight:500; color:var(--text-white-dim);}
.kd-tl-axis{display:flex; justify-content:space-between; padding:4px 0 0; margin-left:78px; margin-right:48px;}
.kd-tl-axis span{font-size:10px; color:var(--text-white-dim); opacity:0.75;}
.kd-tl-legend{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; padding-left:78px;}
.kd-tl-legend-item{display:flex; align-items:center; gap:4px; font-size:11px; color:var(--text-white-dim);}
.kd-tl-legend-dot{width:8px; height:8px; border-radius:2px;}

/* Timer */
#kdTimerWrap .settings-card{box-shadow:0 4px 16px rgba(0,0,0,0.15);}
@media (prefers-color-scheme:dark){
  #kdTimerWrap .settings-card{box-shadow:0 4px 16px rgba(0,0,0,0.4);}
}