/* =========================================================
   MATHURA — niebieskie zakładki (PP/PR) + karta
   Wklej NA KOŃCU pliku CSS (nadpisze starsze definicje)
   ========================================================= */

/* 1) PALETA — tu zmieniasz odcienie niebieskiego */
:root{
  --blue-bar:        #e6f0ff;  /* tło paska POD zakładkami (delikatny, jasny) */
  --blue-bar-border: #c9d8ff;  /* obrys paska pod zakładkami */

  /* NIEAKTYWNA zakładka (JAŚNIEJSZA/DARKER tu zmieniasz!) */
  --tab-inactive-bg:    #979797;   /* NIEAKTYWNA: niebieski */
  --tab-inactive-text:  #ffffff;
  --tab-inactive-hover: #3b7cf0;   /* hover NIEAKTYWNEJ */

  /* AKTYWNA zakładka (głębszy niebieski) */
  --tab-active-bg-top:    #2b60c5; /* gradient góra */
  --tab-active-bg-bottom: #1f4fb0; /* gradient dół */
  --tab-active-text:      #ffffff;

  /* Karta z zadaniem */
  --card-border-std:   #d5d9e2;  /* obrys boków/dół */
  --card-border-top:   #1f4fb0;  /* obrys GÓRY karty pod aktywną zakładką */
}

/* 2) Pasek pod zakładkami (doklejony do karty) */
.zad-tabs{
  display: flex;
  gap: .25rem;
  padding: .25rem;
  background: var(--blue-bar) !important;
  border: 1px solid var(--blue-bar-border) !important;
  border-bottom: 0 !important;              /* łączenie z kartą */
  border-radius: 12px 12px 0 0 !important;  /* tylko górne rogi */
}

/* 3) Pojedyncza zakładka — DOMYŚLNIE: NIEAKTYWNA (niebieska) */
.zad-tab{
  display: inline-block;
  padding: .55rem .9rem;
  border: 1px solid transparent;
  border-bottom: 0;                          /* bez „podwójnej kreski” */
  border-radius: 10px 10px 0 0;              /* górne rogi */
  background: var(--tab-inactive-bg) !important;     /* ⬅ NIEAKTYWNA */
  color: var(--tab-inactive-text) !important;
  font-weight: 700;
  text-decoration: none;
  position: relative;
  line-height: 1;
  transition: filter .15s ease, transform .06s ease;
}
.zad-tab:hover{ background: var(--tab-inactive-hover) !important; }
.zad-tab:active{ transform: translateY(1px); }
.zad-tab:focus-visible{
  outline: 2px solid #98b7ff;
  outline-offset: 2px;
}

/* 4) Stan AKTYWNY — również niebieski, ale głębszy */
.zad-tab.is-active{
  background: linear-gradient(var(--tab-active-bg-top), var(--tab-active-bg-bottom)) !important;
  color: var(--tab-active-text) !important;
  border-color: transparent !important;
  z-index: 1;                                   /* nad nieaktywnymi */
}
/* „Bezszwowe” dosunięcie do karty — cienka biała kreska maskująca styk */
.zad-tab.is-active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:#fff; border:0; display:block;
  border-radius: 0;
}

/* 5) Karta z zadaniem (z niebieskimi zakładkami u góry) */
.zadanie-card.with-tabs{
  background: #ffffff !important;
  border: 1px solid var(--card-border-std) !important;
  border-top-color: var(--card-border-top) !important;  /* spójne z aktywną zakładką */
  border-radius: 0 0 12px 12px !important;               /* dół zaokrąglony */
  padding: 1rem 1.2rem;
  box-shadow: 0 6px 22px rgba(9, 30, 66, 0.06);
}

/* 6) Typografia/metadane (jak wcześniej) */
.zad-header h1{
  font-size: clamp(1.4rem, 0.7vw + 1.1rem, 1.8rem);
  margin: 0 0 .5rem;
}
.zad-meta{ font-size: .9rem; color: #6b7a90; }
.zad-body{
  line-height: 1.75;
  font-size: clamp(1.25rem, 1.2vw + 0.9rem, 1.6rem);
}
.zad-body mjx-container{ font-size: 1.05em; }
.zad-body mjx-container[display="true"]{ margin: 1rem 0; }
.zad-sep{ margin: 1rem 0; border: 0; height: 1px; background: #e6eef7; }
.zad-solution{ font-size: .95em; }
.zad-solution h2{ font-size: 1.2rem; margin: 0 0 .5rem; }

/* 7) Spójność na ciemnym body — zakładki nadal jasnoniebieskie */
.bg-dark .zad-tabs{
  background: var(--blue-bar) !important;
  border-color: var(--blue-bar-border) !important;
}
.bg-dark .zad-tab{
  background: var(--tab-inactive-bg) !important;
  color: var(--tab-inactive-text) !important;
}
.bg-dark .zad-tab:hover{ background: var(--tab-inactive-hover) !important; }
.bg-dark .zad-tab.is-active{
  background: linear-gradient(var(--tab-active-bg-top), var(--tab-active-bg-bottom)) !important;
}
.bg-dark .zadanie-card.with-tabs{
  background:#ffffff !important;
  border-color: var(--card-border-std) !important;
  border-top-color: var(--card-border-top) !important;
}