/* ============================================================
   Logo w nagłówku, modal ustawień, logowanie administratora
   ============================================================ */

/* Obraz nie ma linii bazowej tekstu — przy logo wyrównujemy całą grupę
   do środka, żeby tytuł i podtytuł nie "spadały" pod znak. */
.brand:has(.brand__logo:not([hidden])) { align-items: center; }

/* Logo przylega do tytułu projektu, dopiero potem idzie separator */
.brand:has(.brand__logo:not([hidden])) .brand__mark { margin-left: 2px; }

.brand__logo {
  display: block;
  width: auto;
  max-height: 40px;
  object-fit: contain;
}

/* ---------------- Modal ---------------- */
/* ============================================================
   PANEL USTAWIEŃ APLIKACJI

   Modal jest dla jednej decyzji, panel dla przeglądania: sekcje po
   lewej, treść po prawej, bez jednej długiej kolumny do przewijania.
   ============================================================ */
.wp-panel {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
  background: var(--c-scrim);
  animation: layer-in var(--t-mid) var(--e-out);
}

.wp-panel__box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1100px;
  height: 100%;
  max-height: 820px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden;
}

.wp-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--c-line);
  flex: 0 0 auto;
}

.wp-panel__title {
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
}

.wp-panel__tools {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.wp-panel__body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

/* Lista sekcji — spis treści ustawień, zawsze widoczny */
.wp-panel__nav {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-4);
  border-right: 1px solid var(--c-line);
  background: var(--c-surface-sunk);
  overflow-y: auto;
}

.wp-panel__link {
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font: inherit;
  font-size: var(--fs-13);
  text-align: left;
  color: var(--c-ink-muted);
  cursor: pointer;
  transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}

.wp-panel__link:hover { background: var(--c-surface-hover); color: var(--c-ink); }

.wp-panel__link[aria-current="true"] {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-weight: 600;
}

.wp-panel__content {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--s-5) var(--s-6);
  overflow-y: auto;
}

@media (max-width: 760px) {
  .wp-panel { padding: 0; }
  .wp-panel__box { max-height: none; border-radius: 0; border: 0; }
  .wp-panel__tools {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.wp-panel__body { flex-direction: column; }
  .wp-panel__nav {
    flex: 0 0 auto;
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--c-line);
  }
  .wp-panel__link { white-space: nowrap; }
}

.wp-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--s-8) var(--s-6);
  background: var(--c-scrim);
  overflow-y: auto;
  animation: layer-in var(--t-mid) var(--e-out);
}

.wp-modal__box {
  width: 100%;
  max-width: 520px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden;
}

.wp-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--c-line);
}

.wp-modal__title {
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
}

.wp-modal__body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

/* ---------------- Sekcje i pola ---------------- */
.wp-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.wp-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wp-note {
  font-size: var(--fs-12);
  line-height: 1.6;
  color: var(--c-ink-muted);
}

.wp-error {
  font-size: var(--fs-12);
  color: var(--c-ink);
  font-weight: 550;
}

.wp-inline {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.wp-inline .cms-input { flex: 1 1 auto; }

.wp-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
}

.wp-actions--start { justify-content: flex-start; flex-wrap: wrap; }

.wp-toggles {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.wp-toggle {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-13);
  color: var(--c-ink-soft);
  cursor: pointer;
}

/* Przełącznik poza planem użytkownika — widoczny, żeby wiadomo było,
   co daje wyższy plan, ale nieklikalny. */
.wp-toggle.is-disabled { opacity: 0.5; cursor: default; }

.wp-toggle input {
  width: 15px;
  height: 15px;
  accent-color: var(--c-accent);
  cursor: pointer;
}

/* ---------------- Logo ---------------- */
.wp-logo {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.wp-logo__preview {
  flex: 1 1 160px;
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface-sunk);
}

.wp-logo__preview img { display: block; width: auto; }

/* Zdjęcie projektanta oglądamy w tym kształcie, w jakim zobaczy je klient
   w rozmowie — okrągłe i przycięte do kwadratu. */
.wp-logo__preview--avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.wp-logo__empty {
  font-size: var(--fs-13);
  font-weight: 650;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

/* ---------------- Lista projektów ---------------- */
.wp-projects {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.wp-project {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-card);
}

.wp-project--active {
  border-color: var(--c-selected-border);
  box-shadow: var(--c-selected-ring);
  background: var(--c-card-active);
}

/* Miniatura projektu: kadr wielkości ikony, pokazuje górę ekranu.
   Pełna proporcja telefonu zrobiłaby z wiersza listy słupek. */
.wp-thumb {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 68px;
  height: 88px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line);
  background: var(--c-surface-sunk);
  overflow: hidden;
}

/* Miniatura w ustawieniach projektu: kadr obok wyjaśnienia i przycisków. */
.wp-thumb-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
}

/* W ustawieniach projektu miniatura jest podglądem, nie ikoną na liście —
   ma pokazać, co klient zobaczy na spisie projektów. */
.wp-thumb-row .wp-thumb {
  width: 132px;
  height: 170px;
}

.wp-thumb-row__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Przyciski na kadrze: widoczne po najechaniu, żeby wiersz projektu
   został spokojny, dopóki nie sięgasz po miniaturę. */
.wp-thumb__tools {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 3px;
  background: rgba(18, 19, 20, 0.72);
  opacity: 0;
  transition: opacity var(--t-fast) var(--e-out);
}

.wp-thumb:hover .wp-thumb__tools,
.wp-thumb:focus-within .wp-thumb__tools { opacity: 1; }

.wp-thumb__btn {
  display: block;
  width: 100%;
  padding: 5px 0;
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  font: inherit;
  font-size: var(--fs-11);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
}

.wp-thumb__btn:hover { background: rgba(255, 255, 255, 0.26); }

.wp-thumb .thumb__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.wp-project__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Podpis wiersza w „Opublikowane u klientów" — adres, data i rozmiar
   w jednej linii, łamane dopiero przy wąskim modalu. */
.wp-project__meta {
  margin: 0;
  font-size: var(--fs-12);
  color: var(--c-ink-soft);
  overflow-wrap: anywhere;
}

.wp-project__meta a {
  font-family: var(--font-mono);
  color: inherit;
}

.wp-project__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.cms-input--sub {
  height: 28px;
  font-size: var(--fs-12);
  color: var(--c-ink-soft);
}

.cms-input--mono {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  height: 26px;
  color: var(--c-ink-muted);
}

/* ---------------- Zatwierdzenia klienta ---------------- */
.wp-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface-sunk);
  max-height: 220px;
  overflow-y: auto;
}

.wp-summary__row {
  font-size: var(--fs-12);
  color: var(--c-ink-soft);
  letter-spacing: var(--ls-tight);
}

/* Wiersz konta niesie kilka rzeczy naraz: adresy, przycisk, informację
   o sposobach logowania. Bez układu w rzędzie skleiłyby się w jedno
   zdanie bez odstępów. */
.wp-summary__row:has(.wp-quiet),
.wp-summary__row:has(button) {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.wp-textarea {
  height: auto;
  padding: 8px;
  line-height: 1.5;
  resize: vertical;
}

/* ---------------- Archiwum projektów ---------------- */
/* Wiersz zamkniętego projektu jest spokojniejszy od otwartego: nie ma
   pól do edycji ani uchwytu do przeciągania, bo tu się nie pracuje —
   stąd tylko nazwa, rozmiar i dwie decyzje. */
.wp-project--archived {
  background: var(--c-surface-sunk);
  align-items: center;
}

.wp-project--archived .wp-project__main {
  gap: 2px;
}

/* Podpis wiersza w archiwum — ciszej niż w liście opublikowanych,
   bo tu nie ma adresu do skopiowania, tylko rozmiar projektu. */
.wp-project--archived .wp-project__meta {
  font-size: var(--fs-11);
  color: var(--c-ink-faint);
}

/* ---------------- Link klienta ---------------- */
/* Adres z kluczem jest długi i trzeba go skopiować w całości — dlatego
   stoi w osobnym polu, łamie się w dowolnym miejscu i nie ucieka poza
   szerokość panelu. */
.wp-access {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.wp-access__link {
  padding: 10px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface-sunk);
}

.wp-access__url {
  font-size: var(--fs-12);
  line-height: 1.5;
  word-break: break-all;
}

.wp-access__off {
  margin: 0;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--c-danger);
}

/* ---------------- Historia aktywności klienta ---------------- */
/* Lista ma się czytać jak dziennik: rodzaj zdarzenia po lewej,
   treść w środku, czas po prawej — zawsze w tych samych kolumnach. */
.wp-activity {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow-y: auto;
}

.wp-event {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-12);
}

.wp-event:last-child { border-bottom: 0; }

.wp-event__kind {
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

.wp-event--approved .wp-event__kind { color: var(--c-accent-2-text); }
.wp-event--comment .wp-event__kind,
.wp-event--reply .wp-event__kind { color: var(--c-ink-muted); }

.wp-event__body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.wp-event__by { color: var(--c-ink); }
.wp-event__text { color: var(--c-ink-soft); }

.wp-event__when {
  font-size: var(--fs-11);
  color: var(--c-ink-faint);
  white-space: nowrap;
}

/* ---------------- Historia wersji ---------------- */
.wp-revisions {
  display: flex;
  flex-direction: column;
}

.wp-revision {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-13);
}

.wp-revision:last-child { border-bottom: 0; }

.wp-revision__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wp-revision__meta {
  font-size: var(--fs-11);
  color: var(--c-ink-faint);
}

.wp-confirmations {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.wp-confirm {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface-sunk);
}

.wp-confirm__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--fs-13);
}

.wp-confirm__date {
  font-size: var(--fs-11);
  color: var(--c-ink-faint);
  white-space: nowrap;
}

.wp-confirm__by {
  font-size: var(--fs-12);
  color: var(--c-ink-muted);
}

.wp-confirm__note {
  margin-top: 4px;
  font-size: var(--fs-12);
  font-style: italic;
  color: var(--c-ink-soft);
}

/* ---------------- Strony pośrednie widoku klienta ---------------- */
.landing {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-8);
  background: var(--c-canvas);
  text-align: center;
}

.landing__title {
  font-size: var(--fs-18);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
}

.landing__note {
  font-size: var(--fs-13);
  color: var(--c-ink-muted);
  max-width: 42ch;
  line-height: 1.6;
}

.landing__id {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--c-ink-faint);
}

.landing__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-4);
  min-width: 260px;
}

.landing__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  text-decoration: none;
  color: var(--c-ink);
  text-align: left;
  transition: border-color var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}

.landing__item:hover {
  border-color: var(--c-accent);
  box-shadow: var(--sh-2);
}

.landing__item span {
  font-size: var(--fs-12);
  color: var(--c-ink-muted);
}

/* ---------------- Zakładki panelu ustawień ---------------- */
/* Pasek zakładek udaje część nagłówka: ujemne marginesy wypychają go
   na pełną szerokość modala, którego treść ma własny padding. */
.wp-tabs {
  display: flex;
  gap: var(--s-1);
  margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-5);
  padding: var(--s-3) var(--s-5);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}

.wp-tab {
  height: 32px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-13);
  font-weight: 550;
  color: var(--c-ink-muted);
  background: transparent;
  transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}

.wp-tab:hover { background: var(--c-surface-hover); color: var(--c-ink); }

.wp-tab[aria-selected="true"] {
  background: var(--c-accent);
  color: var(--c-accent-ink);
}

/* ---------------- Ekran logowania ---------------- */
/* Zapora, a nie okno: pod spodem panel bez sesji i tak nic nie zrobi,
   więc tło jest gęstsze niż przy zwykłym modalu, a okna nie da się
   zamknąć kliknięciem obok. */
.wp-signin {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.wp-signin .wp-modal__box {
  max-width: 420px;
}

/* Kod przepisuje się z maila cyfra po cyfrze — większy krój i odstępy
   robią z sześciu znaków sześć osobnych rzeczy do sprawdzenia wzrokiem. */
.wp-signin__code {
  font-size: var(--fs-18);
  letter-spacing: 0.28em;
  text-align: center;
}

/* Trzecia droga logowania stoi osobno pod przyciskami: nie jest
   alternatywą dla hasła w tym samym formularzu, tylko wyjściem na
   zewnątrz — i ma tak wyglądać. */
.wp-signin__google {
  width: 100%;
  margin-top: var(--s-3);
}

/* Drobna informacja obok wiersza — kontekst, nie treść. */
.wp-quiet {
  margin-left: auto;
  font-size: var(--fs-12);
  color: var(--c-ink-muted);
}