/* Co-created with GenAI on 2026-07-07: Reimbursely shared styles.
   Ported from the old Flask TPL_BASE inline <style> (deduplicated) —
   page background, tilted watermark side-logos, JSON box, upload button. */

/* Page background */
body.reimbursely-body {
  background-color: #e8f4ff;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Watermark columns: 6 tilted logos down each side, behind the content */
.side-logos {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 65px;
  pointer-events: none;
  z-index: 0;
}
.side-logos img {
  width: 180px;
  opacity: 0.25;
  transform: rotate(-25deg);
}
.side-logos-left { left: 80px; }
.side-logos-right { right: 80px; }

/* Keep content above the watermarks without creating a stacking context
   (so Bootstrap modals/backdrops still layer correctly) */
.navbar, .container, .card {
  position: relative;
}

/* Pretty, wrapped JSON */
.raw-json, .json-box {
  white-space: pre-wrap;
  word-break: break-word;
}
.raw-json {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 0.25rem;
  padding: 0.75rem;
  font-size: 0.9rem;
}

/* Custom file-picker button (upload page) */
.file-input { display: none; }
.custom-file-upload {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background-color: #0d6efd;
  color: white;
  font-weight: 500;
  box-shadow: 0 0.25rem 0.5rem rgba(13, 110, 253, 0.35);
  transition: transform 0.05s ease-out, box-shadow 0.05s ease-out, background-color 0.1s;
}
.custom-file-upload:hover {
  background-color: #0b5ed7;
  transform: translateY(-1px);
  box-shadow: 0 0.35rem 0.8rem rgba(13, 110, 253, 0.45);
}

/* Simple lightbox (files gallery) */
#lightbox {
  z-index: 1050;
}
#lightbox img {
  max-height: 90vh;
  max-width: 90vw;
}