/* Small additions on top of styles.css (which is the original stylesheet,
   copied over unchanged). The Blade version uses links and forms where the
   React version used buttons, so a few selectors need to cover both. */

.lang-switch a {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.lang-switch a.active {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 0 12px var(--blue-glow);
}

/* The logout / delete buttons sit inside their own form so they can be POSTed
   with a CSRF token; the form itself must not take up layout space. */
.topbar-right form,
.actions form,
.admin-inline-form {
  display: inline;
  margin: 0;
}

.actions form + form,
.actions form + a,
.actions a + form {
  margin-left: 0.35rem;
}

/* pdf.js canvases: the styling react-pdf used to put on .react-pdf__Page. */
.pdf-page canvas {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  background: #fff;
  border-radius: 4px;
  max-width: 100%;
}

/* Modals are plain elements toggled with [hidden] instead of being mounted
   and unmounted by React. */
.modal-backdrop[hidden],
[hidden] {
  display: none !important;
}

/* Price the admin sets per document: on the public card, in the details modal
   and above the claim form. */
.doc-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  align-self: flex-start;
  width: fit-content;
  margin: 0.4rem 0 0.1rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--gold-soft);
}

.doc-price-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.doc-price-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gold-2);
  white-space: nowrap;
}

/* Centred in the modals, where the parent is not a flex column. */
.modal-card .doc-price {
  display: flex;
  align-self: center;
  margin: 0.2rem auto 0.6rem;
}

.badge-price {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--gold-2);
  font-weight: 700;
}

/* The admin tabs are links (?tab=...) rather than buttons. */
.admin-nav a.admin-nav-item {
  text-decoration: none;
}