.stat .value { font-size: 1.4rem; font-weight: 600; }
.screenshot { max-height: 70vh; object-fit: contain; }
.table td, .table th { white-space: nowrap; }
.prewrap { white-space: pre-wrap; }
.pay-logo { max-height: 80px; max-width: 220px; object-fit: contain; }
.shot-dots [data-bs-target] { background-color: #6c757d; }
.ocr { display: grid; grid-template-columns: minmax(6rem, max-content) 1fr; gap: .15rem .75rem; }
.ocr dt { font-weight: 500; color: var(--bs-secondary-color); }
.ocr dd { margin: 0; word-break: break-word; }
.ocr dd.full { grid-column: 1 / -1; }
.ocr mark { padding: 0 .2em; border-radius: .2rem; font-weight: 600; }
.ocr-amount { background: #d1e7dd; }
.ocr-date { background: #cfe2ff; }
.ocr-ref { background: #fff3cd; font-family: var(--bs-font-monospace); }
.link-image { max-height: 320px; object-fit: contain; }
/* Carousel arrows: white disc + dark chevron + shadow reads on light and dark screenshots alike. */
.shot-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid #fff; background: rgba(255, 255, 255, .92); color: #212529;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 2px 8px rgba(0, 0, 0, .35);
  transition: transform .15s, background-color .15s, opacity .15s;
}
.shot-prev { left: 8px; }
.shot-next { right: 8px; }
.shot-arrow:hover:not(:disabled) { background: #fff; transform: translateY(-50%) scale(1.08); }
.shot-arrow:focus-visible { outline: 3px solid #0d6efd; outline-offset: 2px; }
.shot-arrow:disabled { opacity: .35; cursor: not-allowed; }
#shots:focus-visible { outline: 3px solid #0d6efd; outline-offset: 4px; border-radius: .375rem; }
/* Brand colour: one place to change it. Used by the sidebar logo and badge and the dashboard's primary button, active filter chip and focus outlines. */
:root { --brand: #1F4E8C; }
/* Sidebar menu: a drawer on phones (Bootstrap offcanvas-lg), a fixed column from 992px, optionally icons only. */
/* Colours on the #13201A background: items #AFC2B8 (about 9:1 contrast), active #F2F6F4 on #1E3129 (about 13:1), headings #8FA79B (about 6.5:1), all above WCAG AA. */
.app-topbar, .sidebar .offcanvas-lg { background: #13201A; }
.app-topbar .navbar-brand { color: #F2F6F4; }
.sidebar-brand { display: flex; align-items: center; gap: .6rem; color: #F2F6F4; font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
.sidebar-brand:hover { color: #fff; }
.sidebar-logo { width: 26px; height: 26px; border-radius: 6px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 800; flex-shrink: 0; }
.sidebar .nav-link { color: #AFC2B8; font-size: .95rem; font-weight: 600; line-height: 1.35; border-radius: 8px; padding: .5rem .7rem; margin-bottom: .15rem; background: none; border: 0; }
.sidebar .nav-link:hover, .sidebar .nav-link:focus-visible { color: #F2F6F4; background: rgba(255, 255, 255, .05); }
.sidebar .nav-link:focus-visible, .sidebar-logout:focus-visible, .sidebar-group:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .5); }
.sidebar .nav-link.active { color: #F2F6F4; background: #1E3129; }
.sidebar .bi { font-size: 1.1rem; width: 1.35rem; text-align: center; flex-shrink: 0; }
.sidebar-badge { font: 600 .7rem/1 "IBM Plex Mono", ui-monospace, Consolas, monospace; background: var(--brand); color: #fff; padding: .2rem .45rem; border-radius: 999px; }
.sidebar-group { color: #8FA79B; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  border: 0; border-radius: 0; margin-top: .6rem; padding: .5rem .7rem .3rem; }
.sidebar-group:hover { color: #F2F6F4; }
.sidebar-group .bi { font-size: .75rem; transition: transform .15s; }
.sidebar-group.collapsed .bi { transform: rotate(-90deg); }
.sidebar .border-top { border-color: #1E3129 !important; }
.sidebar-user { color: #F2F6F4; font-weight: 700; padding: .4rem 0; }
.sidebar-logout { background: none; border: 0; color: #AFC2B8; font-weight: 600; font-size: .85rem; padding: .35rem .5rem; border-radius: 6px; flex-shrink: 0; }
.sidebar-logout:hover { color: #F2F6F4; text-decoration: underline; }
.min-w-0 { min-width: 0; }
@media (min-width: 992px) {
  /* offcanvas-lg forces width:auto and a transparent background here, so they go on the .sidebar wrapper */
  .sidebar { width: 232px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; transition: width .15s; background: #13201A; display: flex; flex-direction: column; }
  .sidebar > .offcanvas-lg, .sidebar .offcanvas-body { flex-grow: 1; }
  .sidebar-mini .sidebar { width: 64px; }
  .sidebar-mini .sidebar .nav-text, .sidebar-mini .sidebar .sidebar-group, .sidebar-mini .sidebar .sidebar-extra { display: none !important; }
  .sidebar-mini .sidebar .collapse { display: block; } /* icons only: every item shows, groups can't be folded */
  .sidebar-mini .sidebar .sidebar-badge, .sidebar-mini .sidebar-user > .nav-text { display: none; }
  .sidebar-mini .sidebar .nav-link, .sidebar-mini .sidebar-user { justify-content: center; padding-left: 0; padding-right: 0; }
  .sidebar-mini .sidebar-toggle { margin: 0 auto; }
}
/* Integration cards */
.integration-card { border: 1px solid var(--bs-border-color); transition: border-color .15s, box-shadow .15s; }
.integration-card:hover, .integration-card:focus-visible { border-color: var(--bs-primary); box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08); }
.integration-logo { width: 48px; height: 48px; border-radius: .5rem; flex-shrink: 0; }
.integration-logo-sm { width: 32px; height: 32px; }
.integration-card { min-height: 64px; }
.integration-action { position: relative; z-index: 2; } /* above the card's stretched link */