/* =============== Farver og fonte =============== */
:root {
  --brand-primary: #6CC4A1;     /* Mintgrøn */
  --brand-primary-dark: #5ABF96;
  --brand-secondary: #58A4B0;   /* Blågrøn */
  --brand-dark: #0F2C38;
  --brand-light: #F9FBFA;
  --brand-soft-bg: #EAF6F0;
  --text-main: #0F2C38;
  --text-muted: #647E76;
}

body {
  font-family: "Inter", "Segoe UI", Roboto, sans-serif;
  background-color: var(--brand-light);
  color: var(--text-main);
  line-height: 1.6;
}

/* =============== Navbar =============== */
.navbar {
  background: var(--brand-dark);
  border-bottom: 3px solid var(--brand-primary);
}
.navbar-brand {
  color: var(--brand-primary) !important;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.navbar .nav-link {
  color: rgba(255,255,255,0.9) !important;
  transition: color 0.2s ease;
}
.navbar .nav-link:hover {
  color: var(--brand-primary) !important;
}

/* =============== Hero =============== */
.hero-section {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary));
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.hero-section .display-5 {
  font-weight: 700;
}
.hero-section p {
  color: rgba(255,255,255,0.9);
}
.hero-card {
  background-color: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  border-radius: 1.25rem;
}
.hero-card ul li i {
  color: var(--brand-primary);
}

/* =============== Knapper =============== */
.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-dark);
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}
.btn-primary:hover {
  background-color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}
.btn-outline-light {
  color: #fff;
  border-color: #fff;
  transition: all 0.2s ease;
}
.btn-outline-light:hover {
  background-color: #fff;
  color: var(--brand-dark);
}

/* =============== Sektioner =============== */
section {
  background-color: var(--brand-soft-bg);
  border-radius: 1.25rem;
  margin-bottom: 2rem;
  padding: 3rem 1rem;
}
section:nth-child(even) {
  background-color: #fff;
}

/* =============== Cards / Features =============== */
.card {
  border: 0;
  border-radius: 1.25rem;
  background-color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1rem 2rem rgba(0,0,0,0.1);
}
.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--brand-soft-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--brand-secondary);
}
.feature-card h3 {
  color: var(--brand-dark);
}

/* =============== Footer =============== */
footer {
  background-color: var(--brand-dark);
  color: rgba(255,255,255,0.85);
  border-top: 3px solid var(--brand-primary);
  font-size: 0.9rem;
}
footer a {
  color: var(--brand-primary);
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

/* =============== Små detaljer =============== */
.shadow-sm { box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.05) !important; }
.shadow-lg { box-shadow: 0 1rem 2rem rgba(0,0,0,0.1) !important; }

h1, h2, h3, h4, h5 {
  font-weight: 600;
  color: var(--text-main);
}

/* =============== Responsivitet =============== */
@media (max-width: 768px) {
  .hero-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
    text-align: center;
  }
  .hero-card {
    margin-top: 2rem;
  }
  .feature-card {
    text-align: center;
  }
}

/* =============== Hero-billede placeholder =============== */
.hero-image-placeholder {
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--brand-soft-bg);
  text-align: center;
}
.hero-image-placeholder img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 1.25rem;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.hero-image-placeholder img:hover {
  transform: scale(1.02);
  filter: brightness(1.05);
}

/* Klikbare kort */
.card-link-wrapper {
  display: block;
  transition: transform 0.2s ease;
}
.hover-card {
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hover-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.12);
}
.hover-card:hover .feature-icon {
  background: var(--brand-primary);
  color: #fff;
  transform: scale(1.1);
  transition: all 0.2s ease;
}
/* Fjern Bootstrap's invalid-ikon i inputs (specifikt for odds-felter) */
.odds-input.is-invalid,
.was-validated .odds-input:invalid {
  background-image: none !important;   /* skjul ikon */
  padding-right: 0.75rem !important;   /* normal højre-padding igen */
  background-repeat: initial;
  background-position: initial;
  background-size: initial;
}

/* (valgfrit) fjern også valid-ikon, hvis du på et tidspunkt bruger .is-valid */
.odds-input.is-valid,
.was-validated .odds-input:valid {
  background-image: none !important;
  padding-right: 0.75rem !important;
}

/* ===================== */
/*  Create Match – tema  */
/* ===================== */
.admin-create-match main {
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(88,164,176,0.08), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(108,196,161,0.10), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--brand-soft-bg) 100%);
}

/* Overordnet kort */
.admin-create-match .card {
  border: 0;
  border-radius: 1.25rem;
  box-shadow: 0 1rem 2rem rgba(0,0,0,0.06);
}

/* Sektionstitler */
.admin-create-match .card .h4,
.admin-create-match .card .h6,
.admin-create-match h1.h4,
.admin-create-match h2.h6 {
  color: var(--brand-dark);
}

/* Accent-kant på "Kamp"-kort */
.admin-create-match .match-card {
  position: relative;
  background: #fff;
  border-left: 6px solid rgba(108,196,161,0.65);
}
.admin-create-match .match-card::after {
  /* diskret topgradient */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
  background: linear-gradient(90deg, rgba(108,196,161,0.45), rgba(88,164,176,0.45));
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
  opacity: .65;
}

/* Labels og hjælpetekster */
.admin-create-match .form-label {
  font-weight: 600;
  color: var(--brand-dark);
}
.admin-create-match .form-text {
  color: var(--text-muted);
}

/* Inputs */
.admin-create-match .form-control,
.admin-create-match .form-select {
  background-color: #fff;
  border: 1px solid rgba(15,44,56,0.15);
  border-radius: 0.75rem;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.admin-create-match .form-control:focus,
.admin-create-match .form-select:focus {
  border-color: rgba(108,196,161,0.9);
  box-shadow: 0 0 0 .25rem rgba(108,196,161,0.25);
}

/* Odds-felter: lidt ”chip” vibe */
.admin-create-match .odds-input {
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.2px;
  background-color: rgba(234,246,240,0.5);
}

/* Fjern Bootstrap invalid-ikon og lav rød kant mere diskret */
.admin-create-match .form-control.is-invalid,
.admin-create-match .form-select.is-invalid {
  background-image: none !important;
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 .15rem rgba(220,53,69,0.18) !important;
}
.admin-create-match .invalid-feedback {
  font-size: .85rem;
}

/* Knapper */
.admin-create-match .btn-primary {
  background: linear-gradient(180deg, var(--brand-primary), var(--brand-primary-dark));
  border: none;
}
.admin-create-match .btn-primary:hover {
  filter: brightness(.96);
}
.admin-create-match .btn-outline-secondary {
  border-color: rgba(15,44,56,0.25);
  color: var(--brand-dark);
}
.admin-create-match .btn-outline-secondary:hover {
  background: rgba(88,164,176,0.08);
  border-color: rgba(88,164,176,0.35);
}

/* Lille badge-stil til "brugte uger"-boksen */
.admin-create-match .used-weeks .badge {
  background: rgba(88,164,176,0.12);
  color: var(--brand-secondary);
  border: 1px solid rgba(88,164,176,0.25);
  font-weight: 600;
}

/* Spacing-justeringer */
.admin-create-match .match-card .row > [class*="col-"] .form-label {
  margin-bottom: .35rem;
}
.admin-create-match .match-card .card-body {
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

/* Diskret sektion baggrund bag hovedkort */
.admin-create-match .container > .card.shadow-sm:first-of-type {
  background: linear-gradient(180deg, #fff, #fff) padding-box,
              linear-gradient(135deg, rgba(108,196,161,0.35), rgba(88,164,176,0.35)) border-box;
  border: 2px solid transparent;
}

/* Odds-knapper – mere grøn, når valgt */
.pick-pill {
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.pick-pill.active {
  background: linear-gradient(180deg, rgba(108,196,161,0.22), rgba(88,164,176,0.28));
  border-color: rgba(88,164,176,0.75);
  box-shadow: 0 0 0 .2rem rgba(108,196,161,0.18);
  color: #0F2C38;
}

/* Gør odds-badget grønnere i aktiv tilstand */
.pick-pill.active .odds-badge {
  background: rgba(108,196,161,0.2) !important;
  color: #0F2C38 !important;
  border: 1px solid rgba(88,164,176,0.45);
}

/* Lidt bedre hover-feedback */
.pick-pill:hover {
  border-color: rgba(88,164,176,0.5);
  background-color: rgba(108,196,161,0.12);
}

.podium-title {
  font-size: 1.6rem;     /* lidt større end standard h6/h5 */
  font-weight: 700;
  letter-spacing: .2px;
}