/* =====================================================================
   WYGLĄD PLATFORMY: dashboard analityczny (menu na górze w pływającej karcie, kafle wskaźników,
   powitanie, zakładki w panelu admina). Jedyny wygląd platformy (decyzja Barta, 2026-11-02).
   Ładowany po stylach bazowych i modułów, więc je nadpisuje.
   ===================================================================== */

/* ---------- tło, karty, nagłówek z menu u góry ---------- */
body {
  background-color: var(--tlo);
  background-image: linear-gradient(rgba(120, 90, 50, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 90, 50, .06) 1px, transparent 1px);
  background-size: 32px 32px;
}
.k-karta { border-radius: 20px; box-shadow: none; }
.k-karta--kliknieta:hover { box-shadow: 0 8px 24px rgba(40, 28, 10, .08); }
h1 { letter-spacing: -0.02em; }
.naglowek {
  position: sticky; top: 12px; width: calc(100% - 32px); max-width: 1280px; margin: 12px auto 0;
  background: var(--karta); border: 1px solid var(--ramka); border-radius: 20px; z-index: var(--z-naglowek);
}
.naglowek__wnetrze { max-width: none; padding: 0 16px; }
.menu__pozycja[aria-current="page"] { box-shadow: 0 6px 16px rgba(255, 122, 0, .28); }
.baner { max-width: 1280px; padding: 12px 16px 0; }
.baner:empty { display: none; }
.glowna { max-width: 1280px; padding-top: var(--o-5); }

/* ---------- kafle wskaźników i powitanie (pulpit klienta, Szkolenia) ---------- */
.nw-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: var(--o-4); }
.nw-kpi__kafel { background: var(--karta); border: 1px solid var(--ramka); border-radius: 20px; padding: 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; }
.nw-kpi__et { font-size: var(--t-s); color: var(--tekst-2); display: flex; gap: 8px; align-items: center; }
.nw-kpi__et::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--akcent); }
.nw-kpi__wartosc { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 6px 0 2px; white-space: nowrap; }
/* wartość tekstowa w kaflu (np. nazwa etapu) zawija się zamiast wychodzić poza kafel */
.nw-kpi__wartosc--tekst { font-size: 1.15rem; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.nw-kpi__opis { font-size: var(--t-xs); color: var(--tekst-2); }
.nw-kpi__pierscien { width: 76px; height: 76px; flex: none; }
.nw-kpi__tekst { min-width: 0; }
.nw-kpi__pasek { height: 10px; border-radius: 99px; background: #efe6d8; overflow: hidden; margin-top: 10px; }
.nw-kpi__pasek span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--akcent), #ffb36b); }
.nw-naglowek { margin-bottom: var(--o-4); }
.nw-naglowek__sciezka { font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.08em; color: var(--akcent-tekst); }
.nw-naglowek__tytul { font-size: var(--t-3xl); margin: 2px 0 4px; }
.nw-naglowek__opis { color: var(--tekst-2); }
@media (max-width: 1100px) { .nw-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .nw-kpi { grid-template-columns: minmax(0, 1fr); } }

/* Pulpit klienta: dopiero gdy kafle i powitanie się wczytały (gniazdo pełne), chowamy stary nagłówek mapy,
   a hero zostaje tylko z paskiem "Teraz". Bez kafli (błąd, wolne API) stary nagłówek zostaje widoczny. */
.nw-slot--pelny ~ .mapa-hero { grid-template-columns: minmax(0, 1fr); background: none; border: 0; padding: 0; box-shadow: none; margin-bottom: var(--o-4); }
.nw-slot--pelny ~ .mapa-hero .mapa-hero__pierscien,
.nw-slot--pelny ~ .mapa-hero .mapa-hero__tresc > .etykieta,
.nw-slot--pelny ~ .mapa-hero .mapa-hero__tytul,
.nw-slot--pelny ~ .mapa-hero .mapa-hero__opis { display: none; }

/* ---------- panel admina ---------- */
@media (min-width: 1100px) {
  .admin-kafle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* bez drugiego menu bocznego i bez czarnego paska; sekcje jako zakładki u góry */
  .admin-tryb { display: none; }
  .admin-uklad { grid-template-columns: minmax(0, 1fr); gap: var(--o-4); }
  .admin-menu { position: static; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 99px; width: fit-content; max-width: 100%; }
  .admin-menu a { padding: 8px 16px; border-radius: 99px; white-space: nowrap; }
  .admin-menu a[aria-current="page"] { background: var(--akcent); color: var(--na-akcencie); box-shadow: 0 6px 16px rgba(255, 122, 0, .28); }
}

/* ---------- przełącznik widoku administratora (poza przewijanym menu) i kolejka "Do zrobienia dziś" ---------- */
.menu__przelacznik { flex: none; border: 1px dashed var(--akcent); background: var(--akcent-tlo); color: var(--akcent-tekst); font: inherit; font-size: var(--t-s); font-weight: 800; padding: 8px 14px; border-radius: var(--r-pelny); cursor: pointer; white-space: nowrap; }
.menu__przelacznik:hover { background: #ffe3c2; }
.nw-info { background: linear-gradient(90deg, var(--akcent-tlo), var(--karta)); border: 1px solid #ffd3a3; border-radius: 16px; padding: 12px 16px; display: flex; gap: 10px; align-items: center; margin-bottom: var(--o-4); }
.nw-info--blad { background: var(--blad-tlo); border-color: #f1b8b3; }
.nw-kolejka__podtytul { color: var(--tekst-2); font-size: var(--t-s); margin: 2px 0 var(--o-3); }
.nw-kolejka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--o-5); }
.nw-kolejka__el { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--ramka); text-decoration: none; color: var(--tekst); }
.nw-kolejka__el:hover .nw-kolejka__tekst strong { text-decoration: underline; }
.nw-kolejka__ikona { width: 38px; height: 38px; border-radius: 12px; background: var(--akcent-tlo); display: grid; place-items: center; flex: none; }
.nw-kolejka__tekst { flex: 1; min-width: 0; display: grid; }
.nw-kolejka__tekst small { color: var(--tekst-2); }
.nw-kolejka__licznik { min-width: 28px; text-align: center; font-weight: 800; font-size: var(--t-xs); padding: 4px 9px; border-radius: 99px; background: var(--ok-tlo); color: var(--ok); }
.nw-kolejka__licznik--ostrz { background: var(--akcent-tlo); color: var(--akcent-tekst); }
.nw-kolejka__licznik--blad { background: var(--blad-tlo); color: var(--blad); }
.nw-kolejka-opak { margin-bottom: var(--o-4); }
@media (max-width: 700px) { .nw-kolejka { grid-template-columns: minmax(0, 1fr); } }

/* ---------- logowanie przez Google ---------- */
.logowanie__google { margin-top: var(--o-4); }
.logowanie__albo { display: flex; align-items: center; gap: 12px; color: var(--tekst-2); font-size: var(--t-xs); margin-bottom: var(--o-3); }
.logowanie__albo::before, .logowanie__albo::after { content: ""; flex: 1; height: 1px; background: var(--ramka); }
.google-przycisk { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 16px; border: 1px solid var(--ramka-mocna); border-radius: var(--r-pelny); background: #fff; color: var(--tekst); font-weight: 700; font-size: var(--t-s); text-decoration: none; }
.google-przycisk:hover { background: var(--karta-2); }


/* ---------- dostęp: wyróżnienie, gdy zostało 30 dni lub mniej ---------- */
.uzytkownik__dostep--uwaga { color: var(--akcent-tekst); font-weight: 800; }
.nw-kpi__kafel--uwaga { border-color: #ffd3a3; background: var(--akcent-tlo); }