a,
.btn-link {
  color: #006bb7;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.btn-secondary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow:
    0 0 0 0.1rem white,
    0 0 0 0.25rem #258cfb;
}

.content {
  padding-top: 1.1rem;
}

h1:focus {
  outline: none;
}

.valid.modified:not([type="checkbox"]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid #e50000;
}

.validation-message {
  color: #e50000;
}

.blazor-error-boundary {
  background:
    url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=)
      no-repeat 1rem/1.8rem,
    #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
  border-color: #929292;
}

/* ============================================================
   Konto – Auth Pages (Login, Register, ForgotPassword, itp.)
   ============================================================ */

.ns-auth-container {
  min-height: calc(100vh - 64px - 360px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 1rem 4rem;
}

.ns-auth-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 2.5rem 2.25rem;
  width: 100%;
  max-width: 480px;
  margin: 3rem auto 4rem;
  box-shadow: 0 4px 24px rgba(7, 94, 137, 0.08);
}

.ns-auth-title {
  font-family: var(--font-primary, "Poppins", sans-serif);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--clr-teal-xdark, #075e89);
  margin-bottom: 0.2rem;
  line-height: 1.2;
}

.ns-auth-subtitle {
  color: #6b7280;
  font-size: 0.875rem;
  margin-bottom: 1.75rem;
}

.ns-auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
  color: #9ca3af;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ns-auth-divider::before,
.ns-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

.ns-auth-links {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.ns-auth-links a {
  color: var(--clr-teal, #2caebb);
  text-decoration: none;
  transition: color 0.2s;
}

.ns-auth-links a:hover {
  color: var(--clr-teal-xdark, #075e89);
  text-decoration: underline;
}

/* Karty informacyjne (AccessDenied, Lockout, ConfirmEmail, itp.) */
.ns-auth-info {
  text-align: center;
  padding: 1rem 0 0.5rem;
}

.ns-auth-info-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1.25rem;
}

.ns-auth-info-icon-success {
  background: rgba(40, 199, 111, 0.12);
  color: #28c76f;
}
.ns-auth-info-icon-danger {
  background: rgba(234, 84, 85, 0.12);
  color: #ea5455;
}
.ns-auth-info-icon-warning {
  background: rgba(255, 159, 67, 0.12);
  color: #ff9f43;
}
.ns-auth-info-icon-info {
  background: rgba(44, 174, 187, 0.12);
  color: var(--clr-teal, #2caebb);
}

.ns-auth-info-title {
  font-family: var(--font-primary, "Poppins", sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--clr-teal-xdark, #075e89);
  margin-bottom: 0.5rem;
}

.ns-auth-info-text {
  color: #6b7280;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* Override Bootstrap form-floating kolorów na tokeny NomadSearch */
.ns-auth-card .form-control:focus,
.ns-manage-section .form-control:focus {
  border-color: var(--clr-teal, #2caebb);
  box-shadow: 0 0 0 0.2rem rgba(44, 174, 187, 0.15);
}

.ns-auth-card .form-floating > label,
.ns-manage-section .form-floating > label {
  color: #9ca3af;
}

.ns-auth-card .form-floating > .form-control:focus ~ label,
.ns-auth-card .form-floating > .form-control:not(:placeholder-shown) ~ label,
.ns-manage-section .form-floating > .form-control:focus ~ label,
.ns-manage-section
  .form-floating
  > .form-control:not(:placeholder-shown)
  ~ label {
  color: var(--clr-teal, #2caebb);
}

/* Przycisk zewnętrznego logowania (Google, itp.) */
.ns-btn-external {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.65rem 1rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
  text-decoration: none;
  font-family: var(--font-primary, "Poppins", sans-serif);
}

.ns-btn-external:hover {
  background: #f9fafb;
  border-color: var(--clr-teal, #2caebb);
  color: #374151;
}

.ns-btn-external svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ============================================================
   Konto – Manage Pages (Account/Manage/*)
   ============================================================ */

.ns-manage-header {
  padding: 2rem 1rem 1.5rem;
  margin-bottom: 1.75rem;
  border-bottom: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, var(--clr-gold, #edcd94), var(--clr-teal, #2caebb))
      border-box;
}

.ns-manage-title {
  font-family: var(--font-primary, "Poppins", sans-serif);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--clr-teal-xdark, #075e89);
  margin-bottom: 0.2rem;
}

.ns-manage-subtitle {
  color: #6b7280;
  font-size: 0.875rem;
  margin: 0;
}

.ns-manage-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding-bottom: 3rem;
}

.ns-manage-sidebar {
  width: 210px;
  flex-shrink: 0;
}

.ns-manage-content {
  flex: 1;
  min-width: 0;
}

/* Nawigacja boczna panelu konta */
.ns-manage-nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.5rem 0;
}

.ns-manage-nav-link {
  display: block;
  padding: 0.55rem 0.875rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #4b5563;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition:
    background 0.18s,
    color 0.18s,
    border-color 0.18s;
}

.ns-manage-nav-link:hover {
  background: rgba(44, 174, 187, 0.08);
  color: var(--clr-teal, #2caebb);
  text-decoration: none;
}

.ns-manage-nav-link.active {
  background: rgba(44, 174, 187, 0.12);
  color: var(--clr-teal-xdark, #075e89);
  border-left-color: var(--clr-teal, #2caebb);
  font-weight: 600;
}

/* Sekcja treści w panelu konta */
.ns-manage-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 1.5rem;
}

.ns-manage-section-title {
  font-family: var(--font-primary, "Poppins", sans-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--clr-teal-xdark, #075e89);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}

/* E-mail zweryfikowany – badge */
.ns-email-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(40, 199, 111, 0.1);
  color: #28c76f;
  border: 1px solid rgba(40, 199, 111, 0.25);
  border-radius: 20px;
  padding: 0.15rem 0.6rem;
  font-size: 0.775rem;
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Recovery codes – monospace chips displayed in 2FA setup */
.ns-recovery-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.ns-recovery-code {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  background: rgba(44, 174, 187, 0.06);
  border: 1px solid rgba(44, 174, 187, 0.22);
  border-radius: 6px;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: var(--clr-teal-xdark, #075e89);
}

/* Account management panel – responsive stacking for mobile */
@media (max-width: 768px) {
  .ns-manage-layout {
    flex-direction: column;
  }

  .ns-manage-sidebar {
    width: 100%;
  }

  .ns-manage-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ================================================================
   BLAZOR ERROR UI
   Fixed bottom banner shown by Blazor.js when a fatal circuit error
   occurs (e.g. unhandled exception that crashes the SignalR circuit).
   Blazor.js sets display:flex on this element to reveal it.
   The gold link color reinforces the NomadSearch brand under duress.
   ================================================================ */
#blazor-error-ui {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: none; /* Blazor.js override to flex when active */
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px;
  background: #2d1010;
  border-top: 2px solid var(--clr-danger);
  color: #f8d7da;
  font-family: var(--font-primary, "Poppins", sans-serif);
  font-size: 14px;
}

/* "reload" link – gold to draw attention */
#blazor-error-ui .reload {
  color: var(--clr-gold);
  font-weight: 600;
  text-decoration: underline;
  margin-left: 6px;
}

/* Dismiss button */
#blazor-error-ui .dismiss {
  cursor: pointer;
  color: #f8d7da;
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s;
}

#blazor-error-ui .dismiss:hover {
  opacity: 1;
}

/* ================================================================
   BLAZOR RECONNECT MODAL
   Appears when an InteractiveServer SignalR circuit drops (currently
   only the Admin panel uses InteractiveServer). WASM pages have no
   circuit and are completely unaffected by this element.
   Blazor.web.js controls visibility by adding one of three classes
   to <body>:
     .components-reconnect-show     → actively retrying
     .components-reconnect-failed   → gave up after max retries
     .components-reconnect-rejected → server rejected (new deploy, etc.)
   ================================================================ */

/* Hidden by default; revealed when a reconnect body-class is present */
#components-reconnect-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}

/* Triggered by any reconnect state */
.components-reconnect-show #components-reconnect-modal,
.components-reconnect-failed #components-reconnect-modal,
.components-reconnect-rejected #components-reconnect-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Semi-transparent dark overlay with a blur to indicate suspended state */
.ns-reconnect-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* Centered card – matches the NomadSearch card design system */
.ns-reconnect-card {
  background: var(--clr-surface);
  border: 1.5px solid var(--clr-border-2, #c8d0d8);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Spinning teal ring – signals "working on it" during reconnection */
.ns-reconnect-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--clr-border, #dee2e6);
  border-top-color: var(--clr-teal);
  border-radius: 50%;
  animation: ns-reconnect-spin 0.85s linear infinite;
}

@keyframes ns-reconnect-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Spinner is replaced by a warning icon on failure/rejection */
.components-reconnect-failed .ns-reconnect-spinner,
.components-reconnect-rejected .ns-reconnect-spinner {
  display: none;
}

/* Warning icon shown in failure/rejection states */
.ns-reconnect-card::before {
  content: none; /* no icon during reconnecting */
}

.components-reconnect-failed .ns-reconnect-card::before,
.components-reconnect-rejected .ns-reconnect-card::before {
  content: "!";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(220, 53, 69, 0.12);
  color: var(--clr-danger);
  font-size: 24px;
  font-weight: 700;
}

/* Card title */
.ns-reconnect-title {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 700;
  color: var(--clr-text);
  margin: 0;
}

/* Message text – each variant is shown in exactly one state */
.ns-reconnect-message {
  font-family: var(--font-primary);
  font-size: 14px;
  color: var(--clr-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* "Trying to reconnect…" – visible only while reconnecting */
.ns-reconnect-msg-connecting {
  display: block;
}
.components-reconnect-failed .ns-reconnect-msg-connecting,
.components-reconnect-rejected .ns-reconnect-msg-connecting {
  display: none;
}

/* "Connection failed." – visible only on failure */
.ns-reconnect-msg-failed {
  display: none;
}
.components-reconnect-failed .ns-reconnect-msg-failed {
  display: block;
}

/* "Session expired." – visible only on rejection */
.ns-reconnect-msg-rejected {
  display: none;
}
.components-reconnect-rejected .ns-reconnect-msg-rejected {
  display: block;
}

/* Reload button – hidden while reconnecting, shown on failure/rejection */
.ns-reconnect-reload {
  display: none;
  margin-top: 8px;
}

.components-reconnect-failed .ns-reconnect-reload,
.components-reconnect-rejected .ns-reconnect-reload {
  display: inline-flex;
}