/* ==========================================================================
   BAURAD Framework – users (strefa użytkownika / B2B)
   Logowanie, rejestracja, przypomnienie i zmiana hasła, moje konto.
   Makieta źródłowa: makieta_baurad/B2B Login.dc.html (bez prawego panelu).
   Arkusz korzysta wyłącznie z tokenów i klas frameworka (.br-panel, .br-btn,
   .br-input, .br-label, .br-icon...), dlatego dokłada tylko klasy .br-auth-*
   i .br-users-*.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Formularze użytkownika (logowanie, rejestracja, hasła)
   -------------------------------------------------------------------------- */

.br-auth {
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--space-8) var(--space-page) var(--space-15x);
}

.br-auth__head { margin-bottom: var(--space-4); }
.br-auth__eyebrow { margin-bottom: var(--space-2); }
.br-auth__title { margin: 0 0 var(--space-2); }
.br-auth__lead { color: var(--color-ink-2); max-width: 32rem; }

.br-auth__panel {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-surface);
  padding: var(--space-4);
}

.br-auth__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-25);
}

.br-auth__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
@media (max-width: 40rem) {
  .br-auth__grid { grid-template-columns: 1fr; }
}

.br-auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.br-auth__remember {
  display: flex;
  align-items: center;
  gap: var(--space-15);
  font-size: var(--text-body);
  color: var(--color-ink-2);
}
.br-auth__remember input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--color-action);
}

.br-auth__link {
  font-size: var(--text-body);
  font-weight: 600;
}

.br-auth__hint {
  background: var(--color-paper);
  border-radius: var(--radius-field);
  padding: var(--space-2) var(--space-25);
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
  color: var(--color-ink-2);
}

.br-auth__foot {
  margin-top: var(--space-3);
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
  color: var(--color-ink-2);
}
.br-auth__foot a { font-weight: 600; }

/* --------------------------------------------------------------------------
   Komunikaty (błąd / sukces)
   -------------------------------------------------------------------------- */

.br-notice {
  border-radius: var(--radius-field);
  padding: var(--space-2) var(--space-25);
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
  margin-bottom: var(--space-3);
}
.br-notice__list { display: grid; gap: var(--space-05); }
.br-notice--ok {
  background: var(--color-success-tint);
  color: var(--color-success);
}
.br-notice--error {
  background: var(--color-error-tint);
  color: var(--color-error);
}

/* --------------------------------------------------------------------------
   Strefa użytkownika: układ sidebar + treść
   -------------------------------------------------------------------------- */

.br-users {
  max-width: 62.5rem;
  margin-inline: auto;
  padding: var(--space-6) var(--space-page) var(--space-15x);
}

.br-users__head { margin-bottom: var(--space-4); }
.br-users__eyebrow { margin-bottom: var(--space-2); }
.br-users__title { margin: 0 0 var(--space-15); }
.br-users__head .br-users__lead { color: var(--color-ink-2); max-width: 40rem; }

.br-users__grid {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 56.25rem) {
  .br-users__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* --- Sidebar: awatar + dane użytkownika + nawigacja --- */

.br-users__side {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-surface);
  padding: var(--space-4);
}

.br-users__identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-15);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-line);
}

.br-users__avatar,
.br-users__avatar-initial {
  width: 6.5rem;
  height: 6.5rem;
  border-radius: var(--radius-pill);
  flex: none;
}
.br-users__avatar {
  object-fit: cover;
  background: var(--color-surface) 50% 20% / cover no-repeat;
}
.br-users__avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.br-users__name { font-size: var(--text-h3); font-weight: 700; margin: 0; }
.br-users__email { font-size: var(--text-body-sm); color: var(--color-ink-2); word-break: break-word; }

.br-users__meta {
  display: grid;
  gap: var(--space-15);
  margin: 0;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
}
.br-users__meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.br-users__meta dt {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--text-label-track);
  text-transform: uppercase;
  color: var(--color-ink-2);
}
.br-users__meta dd {
  margin: 0;
  font-size: var(--text-body-sm);
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

.br-users__nav { display: grid; gap: var(--space-05); padding-top: var(--space-3); }
.br-users__nav a {
  display: flex;
  align-items: center;
  gap: var(--space-15);
  min-height: var(--btn-height-sm);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-control);
  color: var(--color-ink);
  font-size: var(--text-body-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.br-users__nav a:hover { background: var(--color-surface); color: var(--color-ink); }
.br-users__nav a.is-active { background: var(--color-action-tint); color: var(--color-action-text); }
.br-users__nav a.is-logout { color: var(--color-error); }
.br-users__nav a.is-logout:hover { background: var(--color-error-tint); }


/* --- Kafle sekcji użytkownika --- */

.br-users__section { margin-top: var(--space-6); }
.br-users__section-title { margin: 0 0 var(--space-1); }
.br-users__section-lead { color: var(--color-ink-2); margin-bottom: var(--space-3); }

.br-users__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-2);
}

.br-users__tile {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  height: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card-lg);
  padding: var(--space-3);
  color: var(--color-ink);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.br-users__tile:hover {
  transform: translateY(-3px);
  border-color: var(--color-action);
  box-shadow: var(--shadow-card-hover);
  color: var(--color-ink);
}
.br-users__tile-icon {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-field);
  background: var(--color-action-tint);
  color: var(--color-action-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.br-users__tile-body { display: flex; flex-direction: column; gap: var(--space-05); min-width: 0; }
.br-users__tile-title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  font-size: var(--text-body-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.br-users__tile-text { font-size: var(--text-body-sm); line-height: var(--text-body-sm-lh); color: var(--color-ink-2); }
.br-users__tile-count {
  font-size: var(--text-badge);
  font-weight: 700;
  letter-spacing: var(--text-badge-track);
  text-transform: uppercase;
  color: var(--color-action-text);
  background: var(--color-action-tint);
  border-radius: var(--radius-pill);
  padding: 0.0625rem var(--space-15);
}
.br-users__tile.is-logout .br-users__tile-icon { background: var(--color-error-tint); color: var(--color-error); }

/* --- Panel treści (formularz, tabela, lista) --- */

.br-users__panel {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-surface);
  padding: var(--space-4);
}

.br-users-form { display: flex; flex-direction: column; gap: var(--space-25); }
.br-users-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 40rem) {
  .br-users-form__grid { grid-template-columns: 1fr; }
}
.br-users-form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* --- Tabela faktur --- */

.br-users-table { width: 100%; border-collapse: collapse; }
.br-users-table th,
.br-users-table td {
  padding: var(--space-15) var(--space-2);
  text-align: left;
  border-bottom: 1px solid var(--color-line);
  font-size: var(--text-body-sm);
}
.br-users-table thead th {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--text-label-track);
  text-transform: uppercase;
  color: var(--color-ink-2);
  border-bottom-color: var(--color-ink);
}
.br-users-table__num { text-align: right; white-space: nowrap; }
.br-users-table tbody tr:last-child td { border-bottom: 0; }

.br-users-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0.0625rem var(--space-15);
  font-size: var(--text-badge);
  font-weight: 700;
  letter-spacing: var(--text-badge-track);
  text-transform: uppercase;
}
.br-users-badge--paid { background: var(--color-success-tint); color: var(--color-success); }
.br-users-badge--unpaid { background: var(--color-error-tint); color: var(--color-error); }
.br-users-badge--pending { background: var(--color-surface); color: var(--color-ink-2); }

/* --- Lista komentarzy --- */

.br-users__comments { display: grid; gap: var(--space-2); }
.br-users-comment {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: var(--space-3);
}
.br-users-comment__text { font-size: var(--text-body); line-height: var(--text-body-lh); }
.br-users-comment__foot {
  display: flex;
  align-items: center;
  gap: var(--space-15);
  flex-wrap: wrap;
  margin-top: var(--space-15);
  font-size: var(--text-caption);
  color: var(--color-ink-2);
}

.br-users__empty { color: var(--color-ink-2); }

/* --- Treść strefy: kolumna kafli / paneli --- */

.br-users__main {
  display: grid;
  gap: var(--space-6);
  min-width: 0;
}
.br-users__main .br-users__section { margin-top: 0; }

.br-users-table-wrap { overflow-x: auto; }