/* =========================================================
 * LoudPipe QR Portal - base styles (Biker Theme)
 * Path: assets/css/app.css
 * =======================================================*/

/* Basic reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Global typography */
html,
body {
  height: 100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
}

:root {
  /* Values here are the biker defaults; PHP will override them inline on each page */
  --lpq-primary: #f97316;   /* Harley orange / primary accent */
  --lpq-secondary: #d1d5db; /* Chrome/light metal accent */
  --lpq-bg: #050608;        /* Ink black background */
}

/* ----------------------------------
 * Login page layout + components
 * ----------------------------------*/

body.lpq-page-login {
  background: radial-gradient(circle at top left, #111318, var(--lpq-bg, #050608));
  color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

/* Login card container */
body.lpq-page-login .lpq-login-card {
  width: 100%;
  max-width: 380px;
  padding: 2rem 2.25rem;
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at top left, rgba(209, 213, 219, 0.16), transparent),
    rgba(17, 19, 24, 0.96);
  border: 1px solid rgba(63, 63, 70, 0.9);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(15, 15, 18, 0.8);
  backdrop-filter: blur(18px);
}

/* Login headings */
body.lpq-page-login .lpq-heading {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.9;
  margin-bottom: 0.5rem;
}

body.lpq-page-login .lpq-title {
  font-size: 1.45rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

/* Login form fields */
body.lpq-page-login .lpq-field {
  margin-bottom: 1rem;
}

body.lpq-page-login .lpq-label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.4rem;
  color: #e5e7eb;
  opacity: 0.85;
}

body.lpq-page-login .lpq-input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(63, 63, 70, 0.9);
  background: var(--lpq-bg, #050608);
  color: #e5e7eb;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

body.lpq-page-login .lpq-input:focus {
  border-color: var(--lpq-primary, #f97316);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.5);
  background: var(--lpq-bg, #050608);
}

body.lpq-page-login .lpq-input::placeholder {
  color: rgba(148, 163, 184, 0.7);
}

/* Login error message */
body.lpq-page-login .lpq-error {
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.65rem;
  font-size: 0.8rem;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #fecaca;
}

/* Login button */
body.lpq-page-login .lpq-button {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.7rem 0.8rem;
  border-radius: 999px;
  border: none;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  cursor: pointer;
  background: radial-gradient(circle at top left, var(--lpq-primary, #f97316), var(--lpq-primary, #f97316));
  color: #050608;
  box-shadow:
    0 10px 30px rgba(249, 115, 22, 0.75),
    0 0 0 1px rgba(0, 0, 0, 0.9);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

body.lpq-page-login .lpq-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 12px 32px rgba(249, 115, 22, 0.9),
    0 0 0 1px rgba(0, 0, 0, 1);
}

body.lpq-page-login .lpq-button:active {
  transform: translateY(0);
  box-shadow:
    0 6px 18px rgba(249, 115, 22, 0.7),
    0 0 0 1px rgba(0, 0, 0, 1);
}

/* Login footer */
body.lpq-page-login .lpq-footer {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: rgba(148, 163, 184, 0.85);
  text-align: center;
}

body.lpq-page-login .lpq-footer span {
  opacity: 0.9;
}

/* ----------------------------------
 * Admin dashboard layout + components
 * ----------------------------------*/

body.lpq-page-admin {
  background: radial-gradient(circle at top center, #111318, #050608);
  color: #e5e7eb;
  display: flex;
  flex-direction: column;
  /* Make space so content doesn't sit under the fixed footer */
  padding-bottom: 3.5rem;
}

/* Admin header – sticky, fixed height, content scales instead of layout */
body.lpq-page-admin header {
  position: sticky;
  top: 0;
  z-index: 40;

  padding: 0 1.5rem;

  border-bottom: 1px solid rgba(63, 63, 70, 0.9);
  background: linear-gradient(
    90deg,
    rgba(5, 6, 8, 0.98),
    rgba(17, 19, 24, 0.96)
  );
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* Fixed height based on full logo size */
  height: calc(var(--lpq-logo-size, 80px) + 8px);

  /* Smooth background + any height changes when the shrink class toggles */
  transition: background 0.18s ease, height 0.18s ease;
}

/* Admin shell + sidebar layout */
body.lpq-page-admin .lpq-admin-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header inner layout */
body.lpq-page-admin .lpq-header {
  z-index: 40;
}

body.lpq-page-admin .lpq-header-left,
body.lpq-page-admin .lpq-header-right {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* Header user block with avatar */
body.lpq-page-admin .lpq-header-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

body.lpq-page-admin .lpq-header-user-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}

body.lpq-page-admin .lpq-header-user-name {
  font-size: 0.8rem;
  font-weight: 600;
}

body.lpq-page-admin .lpq-header-user-role {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(209, 213, 219, 0.8);
}

body.lpq-page-admin .lpq-header-user-avatar {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(75, 85, 99, 0.9);
  background: radial-gradient(circle at 30% 30%, #374151, #111827);
  display: flex;
  align-items: center;
  justify-content: center;
}

body.lpq-page-admin .lpq-header-avatar-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body.lpq-page-admin .lpq-header-avatar-placeholder {
  font-size: 0.8rem;
  font-weight: 600;
  color: #e5e7eb;
}

/* Brand inner wrapper to remove inline styles later if needed */
body.lpq-page-admin .lpq-brand-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Burger button */
body.lpq-page-admin .lpq-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.18rem;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  border: 1px solid rgba(75, 85, 99, 0.9);
  background: rgba(15, 23, 42, 0.95);
  cursor: pointer;
  padding: 0.3rem;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease,
    border-color 0.15s ease;
}

body.lpq-page-admin .lpq-burger span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: rgba(249, 250, 251, 0.95);
}

body.lpq-page-admin .lpq-burger:hover {
  background: rgba(17, 24, 39, 0.98);
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(55, 65, 81, 0.9);
  transform: translateY(-1px);
}

/* Logout button alignment */
body.lpq-page-admin .lpq-logout-button {
  margin-left: 0.5rem;
}

/* Glass admin cards – add slight 3D lift on hover */
body.lpq-page-admin .lpq-card {
  position: relative;
  transform-origin: center center;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

body.lpq-page-admin .lpq-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(15, 23, 42, 0.95);
}

/* Sidebar (glass menu) */
body.lpq-page-admin .lpq-sidebar {
  position: fixed;
  top: calc(var(--lpq-logo-size, 80px) + 24px);
  bottom: 1.75rem;
  left: 1.5rem;
  width: 260px;
  max-width: calc(100% - 3rem);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at top left, #4b5563, #020617);
  border: 1px solid rgba(55, 65, 81, 0.95);
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(15, 23, 42, 0.95);
  padding: 0.85rem;

  /* Grow from the top-left (under the burger), not slide from off-screen */
  transform-origin: top left;
  transform: scale(0.7);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.25s ease-out,
    opacity 0.22s ease-out;
  z-index: 45;
}

/* When sidebar is open */
body.lpq-page-admin.lpq-sidebar-open .lpq-sidebar,
body.lpq-page-admin .lpq-sidebar.lpq-sidebar-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Sidebar inner layout */
body.lpq-page-admin .lpq-sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

body.lpq-page-admin .lpq-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.35rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(75, 85, 99, 0.9);
}

body.lpq-page-admin .lpq-sidebar-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(209, 213, 219, 0.96);
}

body.lpq-page-admin .lpq-sidebar-close {
  border: none;
  background: transparent;
  color: rgba(229, 231, 235, 0.9);
  font-size: 1.2rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

body.lpq-page-admin .lpq-sidebar-close:hover {
  background: rgba(31, 41, 55, 0.95);
  color: rgba(249, 250, 251, 0.98);
}

body.lpq-page-admin .lpq-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.25rem;
}

/* Nav item pills */
body.lpq-page-admin .lpq-nav-item {
  display: flex;
  align-items: center;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  font-size: 0.82rem;
  text-decoration: none;
  color: rgba(209, 213, 219, 0.95);
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(55, 65, 81, 0.85);
  box-shadow:
    0 9px 20px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(15, 23, 42, 0.9);
  transition:
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease,
    border-color 0.16s ease;
}

body.lpq-page-admin .lpq-nav-item:hover {
  background: rgba(30, 64, 175, 0.95);
  border-color: rgba(59, 130, 246, 0.9);
  box-shadow:
    0 16px 40px rgba(15, 23, 42, 0.95),
    0 0 0 1px rgba(30, 64, 175, 0.95);
  transform: translateY(-1px);
}

body.lpq-page-admin .lpq-nav-item-active {
  background: linear-gradient(
    135deg,
    rgba(249, 115, 22, 0.98),
    rgba(251, 191, 36, 0.98)
  );
  color: rgba(15, 23, 42, 0.98);
  border-color: rgba(251, 191, 36, 0.98);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(30, 64, 175, 0.9);
}

/* Sidebar backdrop for mobile/tablet overlay
   (actual reveal behaviour is handled via classes/JS) */
body.lpq-page-admin .lpq-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, #0f172a, #020617);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease-out, visibility 0.18s ease-out;
  z-index: 40;
}

body.lpq-page-admin .lpq-sidebar-backdrop-visible {
  opacity: 1;
  visibility: visible;
}

/* Desktop vs mobile tweaks */
@media (min-width: 1024px) {
  /* On desktop we still control open/close via classes.
     Backdrop is not needed, so just hide it. */
  body.lpq-page-admin .lpq-sidebar-backdrop {
    display: none;
  }
}

@media (max-width: 1023.98px) {
  body.lpq-page-admin main {
    padding-top: 2.25rem;
  }
}

/* Brand logo uses CSS variable from Layout.php */
body.lpq-page-admin .lpq-brand-logo {
  height: var(--lpq-logo-size, 80px);
  width: auto;
  border-radius: 4px;
  object-fit: contain;
  transition: height 0.18s ease;
}

/* In shrunk mode, make the logo ~2/3 smaller (≈ 1/3 of original size) */
body.lpq-page-admin header.lpq-header-shrink .lpq-brand-logo {
  height: calc(var(--lpq-logo-size, 80px) * 0.5);
}

/* Slightly tighten typography when shrunk */
body.lpq-page-admin header.lpq-header-shrink .lpq-brand {
  font-size: 0.8rem;
}

body.lpq-page-admin header.lpq-header-shrink .lpq-user {
  font-size: 0.75rem;
}

/* Sticky + shrunk state (when scrolled) */
body.lpq-page-admin header.lpq-header-shrink {
  background: linear-gradient(
    90deg,
    rgba(5, 6, 8, 0.5),
    rgba(17, 19, 24, 0.5)
  );
  /* Height stays fixed – only inner content scales to avoid jerky scroll */
}

/* Optional: slightly reduce brand text size/opacity in shrink mode */
body.lpq-page-admin header.lpq-header-shrink .lpq-brand span:last-child {
  font-size: 0.95em;
  opacity: 0.85;
}

body.lpq-page-admin .lpq-brand {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.85;
  /* Smoothly resize + fade when header shrinks/expands */
  transition: font-size 0.18s ease, opacity 0.18s ease;
}

body.lpq-page-admin .lpq-user {
  font-size: 0.8rem;
  color: rgba(148, 163, 184, 0.92);
  /* Smoothly resize user text when header shrinks/expands */
  transition: font-size 0.18s ease;
}

body.lpq-page-admin .lpq-user strong {
  color: #f5f5f5;
}

/* Admin main layout */
body.lpq-page-admin main {
  flex: 1;
  padding: 1.75rem 2rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Optional wrapper to constrain width when needed */
body.lpq-page-admin main > .lpq-main-inner {
  width: 100%;
  max-width: 1120px;
}

/* Admin dashboard card */
body.lpq-page-admin .lpq-card {
  width: 100%;
  max-width: 520px;
  padding: 1.75rem 2rem;
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at top left, rgba(209, 213, 219, 0.10), transparent),
    rgba(17, 19, 24, 0.96);
  border: 1px solid rgba(63, 63, 70, 0.9);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(15, 15, 18, 0.8);
}

/* Admin titles */
body.lpq-page-admin .lpq-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

body.lpq-page-admin .lpq-subtitle {
  font-size: 0.9rem;
  color: rgba(148, 163, 184, 0.95);
  margin-bottom: 1.2rem;
}

body.lpq-page-admin .lpq-meta {
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 1.2rem;
  color: rgba(229, 231, 235, 0.95);
}

/* Admin buttons */
body.lpq-page-admin .lpq-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

body.lpq-page-admin .lpq-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

body.lpq-page-admin .lpq-button-primary {
  background: radial-gradient(circle at top left, var(--lpq-primary, #f97316), var(--lpq-primary, #f97316));
  color: #050608;
  box-shadow:
    0 10px 30px rgba(249, 115, 22, 0.8),
    0 0 0 1px rgba(0, 0, 0, 0.9);
}

body.lpq-page-admin .lpq-button-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

body.lpq-page-admin .lpq-button-secondary {
  background: #111318;
  color: #e5e7eb;
  border: 1px solid rgba(63, 63, 70, 0.9);
}

body.lpq-page-admin .lpq-button-secondary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

/* ----------------------------------
 * Admin forms / settings
 * ----------------------------------*/

/* Settings / forms container inside card */
body.lpq-page-admin .lpq-form {
  margin-top: 1rem;
}

/* Two-column grid: label | control */
body.lpq-page-admin .lpq-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 2.5fr);
  gap: 0.75rem 1.25rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

@media (max-width: 640px) {
  body.lpq-page-admin .lpq-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

body.lpq-page-admin .lpq-avatar-field {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

body.lpq-page-admin .lpq-avatar-preview {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(75, 85, 99, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%, #374151, #111827);
}

body.lpq-page-admin .lpq-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.lpq-page-admin .lpq-avatar-preview-placeholder {
  font-size: 0.7rem;
  color: #9ca3af;
}

body.lpq-page-admin .lpq-avatar-inputs {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

body.lpq-page-admin .lpq-checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
}

/* Labels + hints */
body.lpq-page-admin .lpq-form-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(148, 163, 184, 0.95);
}

body.lpq-page-admin .lpq-form-hint {
  font-size: 0.75rem;
  color: rgba(148, 163, 184, 0.9);
  margin-top: 0.2rem;
}

/* Inputs, selects, textareas (admin) */
body.lpq-page-admin .lpq-input,
body.lpq-page-admin .lpq-select,
body.lpq-page-admin .lpq-textarea {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(63, 63, 70, 0.9);
  background: var(--lpq-bg, #050608);
  color: #e5e7eb;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

body.lpq-page-admin .lpq-input:focus,
body.lpq-page-admin .lpq-select:focus,
body.lpq-page-admin .lpq-textarea:focus {
  border-color: var(--lpq-primary, #f97316);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.5);
  background: var(--lpq-bg, #050608);
}

body.lpq-page-admin .lpq-textarea {
  min-height: 80px;
  resize: vertical;
}

/* Checkbox rows */
body.lpq-page-admin .lpq-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: rgba(229, 231, 235, 0.95);
}

body.lpq-page-admin .lpq-checkbox-row input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
}

/* Section titles inside card */
body.lpq-page-admin .lpq-section-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(148, 163, 184, 0.95);
  margin-bottom: 0.75rem;
}

/* Form actions (buttons row) */
body.lpq-page-admin .lpq-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

/* Flash messages */
body.lpq-page-admin .lpq-flash {
  margin-bottom: 1rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.65rem;
  font-size: 0.8rem;
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.6);
  color: #bbf7d0;
}

body.lpq-page-admin .lpq-flash-error {
  margin-bottom: 1rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.65rem;
  font-size: 0.8rem;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.6);
  color: #fecaca;
}

/* ----------------------------------
 * File upload (logo) - admin settings
 * ----------------------------------*/

body.lpq-page-admin .lpq-upload-box {
  position: relative;
  margin-top: 0.6rem;
  padding: 0.9rem 1rem;
  border-radius: 0.9rem;
  border: 1px dashed rgba(148, 163, 184, 0.7);
  background: rgba(5, 6, 8, 0.85);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

body.lpq-page-admin .lpq-upload-box:hover {
  border-color: var(--lpq-primary, #f97316);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.35);
  background: rgba(5, 6, 8, 0.95);
}

body.lpq-page-admin .lpq-upload-box.lpq-upload-dragover {
  border-color: var(--lpq-primary, #f97316);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.55);
  background: rgba(5, 6, 8, 0.98);
}

body.lpq-page-admin .lpq-upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

body.lpq-page-admin .lpq-upload-content {
  position: relative;
  pointer-events: none;
}

body.lpq-page-admin .lpq-upload-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: rgba(229, 231, 235, 0.95);
}

body.lpq-page-admin .lpq-upload-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
}

body.lpq-page-admin .lpq-upload-preview {
  flex-shrink: 0;
  max-width: 120px;
  text-align: right;
}

body.lpq-page-admin .lpq-upload-preview img {
  display: block;
  max-height: 40px;
  width: auto;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.75);
  object-fit: contain;
}

body.lpq-page-admin .lpq-upload-title {
  font-weight: 500;
}

body.lpq-page-admin .lpq-upload-or {
  opacity: 0.7;
}

body.lpq-page-admin .lpq-upload-button {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: #111318;
}

body.lpq-page-admin .lpq-upload-hint {
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: rgba(148, 163, 184, 0.9);
}

/* Admin footer – fixed at the bottom */
body.lpq-page-admin .lpq-admin-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 0.5rem 1.5rem;
  border-top: 1px solid rgba(63, 63, 70, 0.9);
  background: radial-gradient(
    circle at top,
    rgba(15, 23, 42, 0.95),
    rgba(5, 6, 8, 0.98)
  );
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #9ca3af;
  z-index: 50; /* above content, below modal-level stuff if you add later */
}

body.lpq-page-admin .lpq-admin-footer-left {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

body.lpq-page-admin .lpq-admin-footer-right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: flex-end;
}

body.lpq-page-admin .lpq-admin-footer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

body.lpq-page-admin .lpq-admin-footer-logo {
  height: 28px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 6px rgba(15, 23, 42, 0.9));
}

/* Stack nicely on small screens */
@media (max-width: 640px) {
  body.lpq-page-admin .lpq-admin-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  body.lpq-page-admin .lpq-admin-footer-right {
    justify-content: flex-start;
  }
}

/* DB schema check modal (admin/settings.php) */
.lpq-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.lpq-modal {
  background: rgba(15, 23, 42, 0.98);
  border-radius: 1rem;
  border: 1px solid rgba(249, 115, 22, 0.5);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8);
  max-width: 640px;
  width: 100%;
  padding: 1.25rem 1.5rem 1.25rem;
}

.lpq-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.lpq-modal-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lpq-modal-close {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.lpq-modal-body {
  max-height: 320px;
  overflow-y: auto;
  padding: 0.5rem 0;
  font-size: 0.9rem;
}

.lpq-dbcheck-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lpq-dbcheck-list li {
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.lpq-modal-footer {
  margin-top: 0.75rem;
  text-align: right;
}

/* Small 3D-tilting logo card on the home /index.php page */
.lpq-home-logo-shell {
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
  perspective: 900px;
}

.lpq-home-logo-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  border-radius: 0.9rem;
  background: var(--lpq-home-logo-card-bg, #ffffff);
  border: 1px solid rgba(15, 23, 42, 0.65);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.90),
    0 0 0 1px rgba(15, 15, 18, 0.85);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

.lpq-home-logo-card img {
  display: block;
  max-width: 100%;
  height: auto;
  pointer-events: none; /* let the mouse events hit the card container */
}

/* Loudpipe QR – Form builder layout */

.lpq-builder-card-main {
  width: 100%;
  max-width: none;
  margin: 5px;
  padding: 5px;
  box-sizing: border-box;
  min-height: calc(100vh - 10px);
  display: flex;
  flex-direction: column;
}

/* Header */

.lpq-builder-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.lpq-builder-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.lpq-builder-header-meta {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  opacity: 0.85;
}

.lpq-builder-btn-back,
.lpq-builder-btn-save {
  font-size: 0.8rem;
  padding: 0.35rem 0.8rem;
  white-space: nowrap;
}

.lpq-builder-btn-save {
  padding-right: 0.95rem;
  padding-left: 0.95rem;
}

.lpq-builder-flash {
  margin-bottom: 0.75rem;
}

/* Labels */

.lpq-label-sm {
  font-size: 0.75rem;
  opacity: 0.85;
  display: block;
  margin-bottom: 0.1rem;
}

/* Topbar meta row */

.lpq-builder-topbar {
  display: grid;
  grid-template-columns: minmax(0, 2.0fr) minmax(0, 2.4fr) minmax(0, 1.1fr) minmax(0, 1.3fr);
  gap: 0.75rem;
  align-items: flex-end;
  padding: 0.75rem 0.9rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(17,24,39,0.98));
  border: 1px solid rgba(63,63,70,0.9);
  box-shadow: 0 16px 40px rgba(15,23,42,0.9);
  margin-bottom: 1.1rem;
}

.lpq-builder-topbar-col {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 140px;
}

.lpq-builder-topbar-col-description {
  min-width: 180px;
}

.lpq-builder-topbar-col-status {
  min-width: 130px;
}

.lpq-builder-topbar-col-scope {
  min-width: 150px;
}

.lpq-builder-desc-input {
  min-height: 2.2rem;
  max-height: 3.2rem;
  resize: vertical;
}

.lpq-builder-topbar-select {
  height: 2.2rem;
}

.lpq-builder-topbar-status-read,
.lpq-builder-topbar-scope-read {
  font-size: 0.8rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
}

/* 5-column builder grid */

.lpq-builder-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1.3fr) 320px 320px 320px;
  gap: 1rem;
  align-items: flex-start;
}

/* Panels */

.lpq-builder-panel {
  border-radius: 0.75rem;
  padding: 0.7rem 0.8rem;
  background: linear-gradient(145deg, rgba(15,23,42,0.97), rgba(17,24,39,0.99));
  border: 1px solid rgba(55,65,81,0.9);
  box-shadow: 0 14px 32px rgba(15,23,42,0.95);
}

.lpq-builder-panel-canvas {
  padding: 0.75rem 0.8rem;
  background: linear-gradient(135deg, rgba(17,24,39,0.98), rgba(15,23,42,0.99));
  border: 1px solid rgba(63,63,70,0.9);
  box-shadow: 0 18px 42px rgba(15,23,42,0.95);
  min-height: 320px;
}

.lpq-builder-panel-title {
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.lpq-builder-panel-help {
  font-size: 0.7rem;
  opacity: 0.8;
  margin-bottom: 0.6rem;
}

/* Palette */

.lpq-builder-palette {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.lpq-builder-palette-btn {
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  justify-content: flex-start;
}

.lpq-builder-divider {
  margin: 0.4rem 0;
  border: 0;
  border-top: 1px solid rgba(55,65,81,0.9);
}

/* Canvas header */

.lpq-builder-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.lpq-builder-empty-message {
  font-size: 0.75rem;
  opacity: 0.8;
}

.lpq-builder-fields {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Inspector + previews */

.lpq-builder-inspector-body {
  font-size: 0.8rem;
  min-height: 120px;
}

.lpq-builder-preview-body {
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* QR view panel */

.lpq-builder-qr-description {
  font-size: 0.7rem;
  opacity: 0.8;
  margin-bottom: 0.4rem;
}

.lpq-builder-qr-url {
  display: block;
  word-break: break-all;
  font-size: 0.7rem;
  padding: 0.25rem 0.35rem;
  border-radius: 0.35rem;
  background: rgba(15,23,42,0.95);
  border: 1px solid rgba(55,65,81,0.9);
  margin-top: 0.15rem;
}

.lpq-builder-preview-read {
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

/* Generic text helpers */

.lpq-builder-muted {
  opacity: 0.8;
}

.lpq-builder-small {
  font-size: 0.7rem;
}

/* Hidden save form */

.lpq-builder-save-form-hidden {
  display: none;
}

/* Responsive tweaks so the 5-column grid doesn't explode on smaller screens */

@media (max-width: 1600px) {
  .lpq-builder-layout {
    grid-template-columns: 240px minmax(0, 1.2fr) 280px 280px;
    grid-auto-rows: minmax(0, auto);
  }

  .lpq-builder-panel-qr {
    grid-column: span 2;
  }
}

@media (max-width: 1200px) {
  .lpq-builder-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .lpq-builder-panel-qr {
    grid-column: auto;
  }
}

/* =========================================================
 * QR management - per-QR cards in user profile
 * =======================================================*/
body.lpq-page-admin .lpq-qr-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.85rem;
  margin-top: 0.6rem;
}

body.lpq-page-admin .lpq-qr-card {
  border-radius: 0.9rem;
  padding: 0.8rem 0.9rem;
  background:
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.18), transparent),
    rgba(15, 17, 23, 0.96);
  border: 1px solid rgba(63, 63, 70, 0.85);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(15, 15, 18, 0.6);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

body.lpq-page-admin .lpq-qr-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

/* QR card hero thumbnail inside the black header block
   (layout is defined in the fixed header section below) */

/* ENLARGE link under the hero */
.lpq-qr-hero-enlarge {
  margin-top: 0.25rem;
  text-align: center;
}

.lpq-qr-hero-enlarge a {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: #e5e7eb;       /* same “white” you’re using elsewhere */
  opacity: 0.9;
}

.lpq-qr-hero-enlarge a:hover {
  opacity: 1;
}

body.lpq-page-admin .lpq-qr-card-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #e5e7eb;
}

body.lpq-page-admin .lpq-qr-card-type {
  font-size: 0.8rem;
  color: #9ca3af;
}

body.lpq-page-admin .lpq-qr-card-status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: flex-end;
}

body.lpq-page-admin .lpq-qr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid rgba(55, 65, 81, 0.9);
  background: rgba(17, 24, 39, 0.9);
  color: #e5e7eb;
}

body.lpq-page-admin .lpq-qr-badge-status-active {
  border-color: rgba(16, 185, 129, 0.9);
  background: rgba(6, 95, 70, 0.85);
}

body.lpq-page-admin .lpq-qr-badge-status-revoked {
  border-color: rgba(248, 113, 113, 0.95);
  background: rgba(127, 29, 29, 0.9);
}

body.lpq-page-admin .lpq-qr-card-body {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: #d1d5db;
}

body.lpq-page-admin .lpq-qr-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.18rem;
}

body.lpq-page-admin .lpq-qr-row-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
}

body.lpq-page-admin .lpq-qr-row-value {
  font-size: 0.82rem;
  color: #e5e7eb;
  text-align: right;
  word-break: break-all;
}

body.lpq-page-admin .lpq-qr-link {
  color: #f97316;
  text-decoration: none;
  border-bottom: 1px dashed rgba(249, 115, 22, 0.6);
  font-size: 0.78rem;
}

body.lpq-page-admin .lpq-qr-link:hover {
  border-bottom-style: solid;
}

body.lpq-page-admin .lpq-qr-card-footer {
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(31, 41, 55, 0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

body.lpq-page-admin .lpq-qr-footer-left,
body.lpq-page-admin .lpq-qr-footer-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

@media (max-width: 640px) {
  body.lpq-page-admin .lpq-qr-card-footer {
    flex-direction: column;
    align-items: stretch;
  }

  body.lpq-page-admin .lpq-qr-footer-left,
  body.lpq-page-admin .lpq-qr-footer-right {
    justify-content: space-between;
  }
}

/* =========================================================
 * QR analytics – stat cards and tables
 * Used on /admin/qr_analytics.php
 * =======================================================*/

body.lpq-page-admin .lpq-stat-card {
  border-radius: 0.9rem;
  padding: 0.9rem 1rem;
  background:
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.20), transparent),
    rgba(17, 19, 24, 0.98);
  border: 1px solid rgba(63, 63, 70, 0.9);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(15, 15, 18, 0.85);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 90px;
}

body.lpq-page-admin .lpq-stat-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(156, 163, 175, 0.96);
}

body.lpq-page-admin .lpq-stat-value {
  font-size: 1.55rem;
  font-weight: 600;
  color: rgba(249, 250, 251, 0.98);
}

/* Table wrapper: keep tables scrollable on narrow screens */
body.lpq-page-admin .lpq-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: 0.9rem;
  border: 1px solid rgba(39, 39, 42, 0.9);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(15, 15, 18, 0.85);
}

/* Analytics tables */
body.lpq-page-admin .lpq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  background:
    radial-gradient(circle at top left, rgba(15, 23, 42, 0.75), transparent),
    rgba(17, 19, 24, 0.98);
}

body.lpq-page-admin .lpq-table thead {
  background: rgba(24, 24, 27, 0.98);
}

body.lpq-page-admin .lpq-table th,
body.lpq-page-admin .lpq-table td {
  padding: 0.55rem 0.75rem;
  text-align: left;
  white-space: nowrap;
}

body.lpq-page-admin .lpq-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(156, 163, 175, 0.98);
  border-bottom: 1px solid rgba(63, 63, 70, 0.95);
}

body.lpq-page-admin .lpq-table tbody tr:nth-child(odd) {
  background: rgba(24, 24, 27, 0.96);
}

body.lpq-page-admin .lpq-table tbody tr:nth-child(even) {
  background: rgba(17, 19, 24, 0.96);
}

body.lpq-page-admin .lpq-table tbody tr:hover {
  background: rgba(30, 64, 175, 0.65);
}

body.lpq-page-admin .lpq-table td {
  color: rgba(229, 231, 235, 0.96);
  border-bottom: 1px solid rgba(39, 39, 42, 0.85);
}

/* Last row bottom border clean-up */
body.lpq-page-admin .lpq-table tbody tr:last-child td {
  border-bottom: none;
}

/* =========================================================
 * QR analytics – filter bar
 * =======================================================*/
body.lpq-page-admin .lpq-analytics-filters {
  margin-top: 0.9rem;
  margin-bottom: 0.5rem;
}

body.lpq-page-admin .lpq-analytics-filters-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-end;
}

body.lpq-page-admin .lpq-filter-group {
  display: flex;
  flex-direction: column;
  min-width: 140px;
}

body.lpq-page-admin .lpq-filter-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(156, 163, 175, 0.96);
  margin-bottom: 0.15rem;
}

body.lpq-page-admin .lpq-filter-input,
body.lpq-page-admin .lpq-filter-select {
  border-radius: 0.5rem;
  border: 1px solid rgba(55, 65, 81, 0.95);
  background: rgba(17, 24, 39, 0.96);
  color: rgba(229, 231, 235, 0.98);
  font-size: 0.82rem;
  padding: 0.35rem 0.6rem;
}

body.lpq-page-admin .lpq-filter-input:focus,
body.lpq-page-admin .lpq-filter-select:focus {
  outline: none;
  border-color: var(--lpq-primary, #f97316);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.55);
}

body.lpq-page-admin .lpq-filter-actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

@media (max-width: 640px) {
  body.lpq-page-admin .lpq-analytics-filters-form {
    align-items: stretch;
  }

  body.lpq-page-admin .lpq-filter-actions {
    margin-left: 0;
  }
}

/* =========================================================
 * QR cards – "Recent scans" stub area
 * =======================================================*/
body.lpq-page-admin .lpq-qr-card-history {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px dashed rgba(55, 65, 81, 0.85);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: #9ca3af;
}

body.lpq-page-admin .lpq-qr-card-history .lpq-qr-row-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body.lpq-page-admin .lpq-qr-card-history .lpq-qr-row-value {
  font-size: 0.8rem;
  text-align: right;
}

/* Thumbnail QR + actions inside QR cards on user profile */
.lpq-qr-card-footer {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  margin-top: 0.75rem;
}

.lpq-qr-footer-left {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}

.lpq-qr-thumb-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

/* Pill with QR centered inside */
.lpq-qr-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0.25rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: rgba(15, 23, 42, 0.8);
  text-decoration: none;
}

.lpq-qr-thumb-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 0.35rem;
  display: block;
}

/* "Enlarge" link under the QR thumbnail */
.lpq-qr-thumb-enlarge,
.lpq-qr-thumb-enlarge:link,
.lpq-qr-thumb-enlarge:visited,
.lpq-qr-thumb-enlarge:hover,
.lpq-qr-thumb-enlarge:active {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  color: inherit !important;  /* use card text colour (your white) */
}

/* Actions column: Fill + Revoke stacked */
.lpq-qr-footer-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

/* Nicer Fill-as-user button */
.lpq-button-fill-user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  padding: 0.35rem 0.9rem;
  white-space: nowrap;
  text-align: center;
}

.lpq-qr-revoke-form {
  margin: 0;
}

.lpq-qr-revoke-form .lpq-button-danger {
  font-size: 0.72rem;
  padding: 0.28rem 0.8rem;
}

/* --- QR card hero header layout (fixed) --- */

/* Compact black box (label | QR | ACTIVE) */
.lpq-qr-card-header {
  position: relative;
  padding: 0.40rem 0.60rem;
  background: #050911;              /* same dark as rest of theme */
  border-radius: 0.75rem;
  min-height: 0 !important;         /* kill any older min-height */
  height: auto !important;          /* shrink-wrap content */
}

.lpq-qr-card-header-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;  /* name | QR | ACTIVE */
  align-items: center;                              /* vertical middle */
  column-gap: 0.6rem;
}

/* Left: title + type */
.lpq-qr-card-title {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* Middle: QR thumb */
.lpq-qr-hero {
  flex: 1;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0;
}

.lpq-qr-hero-link {
  display: inline-flex;
  padding: 0.25rem;
  border-radius: 0.75rem;
  background: rgba(15, 23, 42, 0.9);
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.35);
}

.lpq-qr-hero-img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
}

/* Right: status pill uses existing .lpq-qr-badge styling */
.lpq-qr-card-status-badges {
  justify-self: end;
}

body.lpq-page-admin .lpq-header-user-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

body.lpq-page-admin .lpq-header-user-link:hover .lpq-header-user-name {
  text-decoration: underline;
}

body.lpq-page-admin .lpq-header-user-link:hover .lpq-header-user-avatar {
  border-color: rgba(249, 250, 251, 0.9);
  cursor: pointer;
}