:root,
:root[data-bs-theme="light"] {
  --sol-bg: #f7f6f2;       
  --sol-card: #ffffff;
  --sol-card-border: #8c8579;
  --sol-accent: #6b8e6b;
  --sol-muted: #6c757d;
  --sol-border: #e4e2db;
  --sol-link: #4f6f52;
}
:root[data-bs-theme="dark"] {
  --sol-bg: #1f2223;       
  --sol-card: #2a2d2e;
  --sol-card-border: #c0c0c0;
  --sol-accent: #7fbf7f;
  --sol-muted: #adb5bd;
  --sol-border: #3a3d3e;
  --sol-link: #98c59a;
}

/* Page-specific styling for the lock screen */
.lockscreen-wrap {
  min-height: 100svh; /* better on mobile */
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(107,142,107,0.12), transparent 60%),
    radial-gradient(1000px 600px at 10% 110%, rgba(79,111,82,0.10), transparent 60%),
    var(--sol-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

/* Card with image + form */
.lock-card {
  width: 100%;
  max-width: 1040px;                 /* allow image + form side-by-side on desktop */
  background: var(--sol-card);
  box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.12); 
  border-radius: 1rem;               /* a bit more rounded */
  overflow: hidden;                  /* keeps image corners rounded */
}

/* NEW: image panel rules (this was missing) */
.lock-image {
  height: 100%;
  min-height: 260px;                 /* ensure it’s visible even on small screens */
  background: var(--sol-card);
}
.lock-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* crop nicely */
}

.brand-mark {
  display: inline-flex; 
  align-items: center; 
  gap: .5rem; 
  font-weight: 700;
}
.top-tools {
  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 1100;

/* --- Admin dark-mode tune-ups --- */
:root[data-bs-theme="dark"] .admin-tile {
  background: var(--bs-dark-bg-subtle);
  border: 1px solid var(--bs-border-color);
}

:root[data-bs-theme="dark"] .table thead th {
  background: var(--bs-dark-bg-subtle);
  border-bottom-color: var(--bs-border-color);
}

/* Table zebra + borders a tad stronger in dark */
:root[data-bs-theme="dark"] .table > :not(caption) > * > * {
  background-color: color-mix(in oklab, var(--bs-body-bg) 94%, white 6%);
  border-color: var(--bs-border-color);
}

/* Make subtle badges readable in dark */
:root[data-bs-theme="dark"] .badge.bg-success-subtle { color: var(--bs-success); }
:root[data-bs-theme="dark"] .badge.bg-warning-subtle { color: var(--bs-warning); }
:root[data-bs-theme="dark"] .badge.bg-danger-subtle  { color: var(--bs-danger);  }

/* Cards look a touch washed out in dark; give them a visible edge */
:root[data-bs-theme="dark"] .card {
  border-color: var(--bs-border-color);
}