/* =====================================================================
   RegBackfile theme. Values come from the Figma frame: #586253 ground, Inter 14/16px,
   8px radii, 56px header, menu at 15px / 92px, content at 64px / 181px.
   Loaded after site.css, so it wins where the two overlap.
   ===================================================================== */
:root {
  --rb-bg: #586253;
  --rb-bg-lift: #6d7a66;
  --rb-paper: #fafafa;
  --rb-ink: #2f2f2f;
  --rb-accent: #586253;
  --rb-line: rgba(47, 47, 47, .25);
  --rb-shadow-sm: 1px 1px 4px rgba(0, 0, 0, .25);
  --rb-ease: cubic-bezier(.2, .8, .2, 1);
  --rb-spring: cubic-bezier(.34, 1.56, .64, 1);
}
html { font-size: 14px; }
body.rb-app {
  /* The map image sits on the olive colour; if the file is missing the plain #586253 ground shows instead. */
  background: var(--rb-bg) url('../images/background.png') center / cover fixed no-repeat; color: var(--rb-paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; line-height: 17px;
}
.rb-app h1, .rb-app h2, .rb-app h3, .rb-app h4, .rb-app h5, .rb-app h6 { color: var(--rb-paper); }
.rb-app a { color: #e3ecda; }

/* White surfaces use dark text */
.rb-app .card, .rb-app .list-group-item, .rb-app .alert, .rb-app .modal-content { color: #000; }
.rb-app .card h1, .rb-app .card h2, .rb-app .card h3, .rb-app .card h4, .rb-app .card h5, .rb-app .card h6 { color: #000; }
.rb-app .card a:not(.btn):not(.rb-menu-btn) { color: #000; }
.rb-app .text-secondary { color: rgba(250, 250, 250, .78) !important; }
.rb-app .card .text-secondary, .rb-app .alert .text-secondary { color: #5c6b7a !important; }
.rb-app .card {
  background: #fff; border: .5px solid rgba(0, 0, 0, .15); border-radius: 8px;
  box-shadow: 4px 4px 7.3px rgba(0, 0, 0, .25), inset 0 -6px 4.8px rgba(0, 0, 0, .11);
}
.rb-app .card-header, .rb-app .card-footer { background: #f4f6f1; border-color: var(--rb-line); }
.rb-app .form-label { color: inherit; }
.rb-app .form-control, .rb-app .form-select { border-color: rgba(0, 0, 0, .28); transition: border-color .15s, box-shadow .15s; }
.rb-app .form-control:focus, .rb-app .form-select:focus { border-color: #f2b705; }

/* Header: 36x33 logo with a 1px #ccc ring, two-line bold title, name and Sign Out on the right */
.rb-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 56px; padding: 0 17px; color: var(--rb-paper); }
.rb-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--rb-paper) !important; text-decoration: none; font-weight: 700; font-size: 14px; line-height: 17px; }
.rb-logo { display: inline-flex; width: 36px; height: 33px; flex: 0 0 auto; border: 1px solid #ccc; border-radius: 50%; overflow: hidden; background: #fff; }
.rb-logo svg { width: 100%; height: 100%; }
.rb-user { display: flex; align-items: center; gap: 14px; margin: 0; }
.rb-user-name { color: var(--rb-paper); font-size: 16px; line-height: 19px; }
.rb-btn-light {
  --bs-btn-color: var(--rb-ink); --bs-btn-bg: #fff; --bs-btn-border-color: rgba(130, 127, 127, .25);
  --bs-btn-hover-color: #000; --bs-btn-hover-bg: #eef2ea; --bs-btn-hover-border-color: rgba(130, 127, 127, .45);
  --bs-btn-active-color: #000; --bs-btn-active-bg: #dde3da; --bs-btn-active-border-color: rgba(130, 127, 127, .45);
  border-radius: 8px; padding: 8px 13px 7px 14px; font-size: 14px; line-height: 17px; font-weight: 400;
}

.rb-main { padding: 125px 47px 40px 64px; }
.rb-main--bare { padding-top: 24px; }
/* Signed-out pages (sign in, access denied): the card sits in the middle of the screen, a little above centre */
.rb-main--bare { min-height: calc(100vh - 56px); display: flex; align-items: center; justify-content: center; padding: 24px 24px 72px; }
.rb-login-card { width: 100%; max-width: 26rem; }

/* The floating menu. The current page is the top button; the others drop down when you point at it. */
.rb-menu { position: fixed; top: 92px; left: 15px; z-index: 1060; max-width: calc(100vw - 30px); }
.rb-menu-list, .rb-sub { list-style: none; margin: 0; padding: 0; }
.rb-menu-list { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.rb-item { position: relative; }
.rb-menu-btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 8px 13px 7px 14px;
  border-radius: 8px; font-weight: 700; font-size: 16px; line-height: 19px; text-decoration: none; white-space: nowrap; cursor: pointer;
  color: #ccc !important; background: var(--rb-bg); border: 1px solid rgba(47, 47, 47, .5); box-shadow: var(--rb-shadow-sm);
  transition: transform .2s var(--rb-ease), background-color .2s, color .2s, box-shadow .2s, border-color .2s;
}
.rb-menu-btn:hover, .rb-menu-btn:focus-visible { background: var(--rb-bg-lift); color: #fff !important; border-color: rgba(255, 255, 255, .35); transform: translateY(-2px) scale(1.04); box-shadow: 2px 5px 12px rgba(0, 0, 0, .38); }
.rb-menu-btn:active { transform: translateY(1px) scale(.97); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition-duration: .06s; }
.rb-menu-btn:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.is-selected > .rb-menu-btn { background: var(--rb-paper); color: var(--rb-ink) !important; border: 1px solid #827f7f; }
.is-selected > .rb-menu-btn:hover, .is-selected > .rb-menu-btn:focus-visible { background: #fff; color: #000 !important; border-color: #827f7f; }

/* The other items drop down like a drawer, one after another, with a little spring */
.is-drawer {
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-26px) scale(.88); transform-origin: top left;
  transition: opacity .22s ease, transform .3s var(--rb-ease), visibility 0s linear .3s;
}
.is-drawer:nth-child(2) { --i: 0; } .is-drawer:nth-child(3) { --i: 1; } .is-drawer:nth-child(4) { --i: 2; } .is-drawer:nth-child(5) { --i: 3; } .is-drawer:nth-child(6) { --i: 4; }
.rb-menu.open .is-drawer, .rb-menu:has(:focus-visible) .is-drawer {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .28s ease calc(var(--i, 0) * 70ms), transform .55s var(--rb-spring) calc(var(--i, 0) * 70ms), visibility 0s;
}

/* Admin opens a row with Users and Audit beside it */
.rb-sub {
  position: absolute; left: 100%; top: 0; padding-left: 12px; display: flex; gap: 12px; opacity: 0; visibility: hidden; transform: translateX(-14px); pointer-events: none;
  transition: opacity .2s ease, transform .35s var(--rb-spring), visibility 0s linear .35s;
}
.has-sub:hover > .rb-sub, .has-sub:focus-within > .rb-sub { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .2s ease, transform .35s var(--rb-spring), visibility 0s; }

/* Every button reacts to the pointer and to a click */
.btn, .page-link { position: relative; overflow: hidden; transition: transform .15s var(--rb-ease), box-shadow .15s, background-color .15s, color .15s, border-color .15s; }
.btn:not(:disabled):not(.disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, .22); }
.btn:not(:disabled):not(.disabled):active { transform: translateY(1px) scale(.97); box-shadow: none; transition-duration: .05s; }
.page-link:not(:disabled):hover { transform: translateY(-1px); }
.page-link:not(:disabled):active { transform: scale(.94); }
.rb-ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .3; transform: scale(0); pointer-events: none; animation: rb-ripple .65s ease-out forwards; }
@keyframes rb-ripple { to { transform: scale(1); opacity: 0; } }

/* Buttons on the olive ground are light; inside white cards they are olive, as in the design */
.rb-app .btn { border-radius: 8px; }
.rb-app .btn-sm { padding: 5px 13px 6px 14px; font-size: 14px; line-height: 17px; }
.rb-app .btn-primary { --bs-btn-color: #2f2f2f; --bs-btn-bg: #fafafa; --bs-btn-border-color: #fafafa; --bs-btn-hover-color: #000; --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff; --bs-btn-active-color: #000; --bs-btn-active-bg: #e4e9dd; --bs-btn-active-border-color: #e4e9dd; --bs-btn-disabled-bg: #cfd6c7; --bs-btn-disabled-border-color: #cfd6c7; --bs-btn-disabled-color: #5c6b57; }
.rb-app .btn-outline-secondary { --bs-btn-color: #eef1ea; --bs-btn-border-color: rgba(255, 255, 255, .45); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, .18); --bs-btn-hover-border-color: #fff; --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(255, 255, 255, .3); --bs-btn-active-border-color: #fff; }
.rb-app .card .btn-primary { --bs-btn-color: #fafafa; --bs-btn-bg: #586253; --bs-btn-border-color: #586253; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #6d7a66; --bs-btn-hover-border-color: #6d7a66; --bs-btn-active-color: #fff; --bs-btn-active-bg: #46503f; --bs-btn-active-border-color: #46503f; --bs-btn-disabled-bg: #9aa592; --bs-btn-disabled-border-color: #9aa592; --bs-btn-disabled-color: #fff; }
.rb-app .card .btn-outline-secondary { --bs-btn-color: #000; --bs-btn-bg: #fafafa; --bs-btn-border-color: rgba(88, 98, 83, .31); --bs-btn-hover-color: #000; --bs-btn-hover-bg: #e6ece0; --bs-btn-hover-border-color: #586253; --bs-btn-active-color: #000; --bs-btn-active-bg: #d5ddcc; --bs-btn-active-border-color: #586253; }

/* Table card: 54px header row, 14px rows, rows light up under the pointer */
.rb-app .table { --bs-table-color: #000; --bs-table-bg: transparent; --bs-table-hover-color: #000; --bs-table-hover-bg: #e4ecdd; margin-bottom: 0; font-size: 14px; line-height: 17px; }
.rb-app .table > thead > tr > th { height: 54px; padding: 17px 16px; font-weight: 400; font-size: 16px; line-height: 19px; color: #000; background: transparent; border-bottom: 1px solid var(--rb-line); vertical-align: middle; }
.rb-app .table > thead > tr > th:first-child, .rb-app .table > tbody > tr > td:first-child { padding-left: 17px; }
.rb-app .table > tbody > tr > td { padding: 14px 16px; vertical-align: middle; border-bottom-color: rgba(47, 47, 47, .1); }
.rb-app .table td a { text-decoration: underline; text-underline-offset: .2em; transition: text-decoration-thickness .15s; }
.rb-app .table td a:hover { text-decoration-thickness: 2px; }
.rb-app .table > :not(caption) > * > * { transition: box-shadow .18s ease; }
.rb-app .table > tbody > tr:hover > * { box-shadow: inset 0 0 0 9999px #e4ecdd; }
.rb-app .table > tbody > tr:hover > td:first-child { box-shadow: inset 0 0 0 9999px #e4ecdd, inset 4px 0 0 #586253; }
.rb-app .rb-sort { font-weight: 400; font-size: 16px; }
.rb-app .rb-dt .border-top { border-top: 1px solid var(--rb-line) !important; background: transparent; font-size: 14px; }
.rb-app .rb-dt .text-secondary { color: #000 !important; }
.rb-app .rb-dt .form-select-sm { background-color: #fff; border: 1px solid #000; border-radius: 2px; font-size: 14px; }
.rb-app .rb-dt .pagination { border: 1px solid rgba(0, 0, 0, .25); background: #fff; border-radius: 0; margin: 0; }
.rb-app .rb-dt .page-link { border: 0; background: transparent; color: #000; font-size: 14px; line-height: 17px; padding: 4px 7px; border-radius: 0; }
.rb-app .rb-dt .page-item.active .page-link { background: #e4ecdd; font-weight: 700; }
.rb-app .rb-dt .page-link:hover { background: #eef3e9; }

/* Pills */
.rb-app .badge { border: 1px solid rgba(0, 0, 0, .28); border-radius: 8px; padding: 2px 10px; font-size: 14px; line-height: 17px; font-weight: 400; color: #000; }
.rb-app .badge.source, .rb-app .badge.text-bg-light { background: #dde3da !important; color: #000 !important; }
.rb-app .badge.stage { padding: 2px 10px; }
.stage-Drafting { color: #000; background: #fab82a; }
.stage-Review { color: #000; background: #9fcbe8; }
.stage-Complete { color: #000; background: #b7ddb0; }
.stage-Intake { color: #000; background: #dde3da; }

.rb-loading { background: rgba(88, 98, 83, .62); }

@media (prefers-reduced-motion: reduce) {
  .rb-menu-btn, .btn, .page-link, .is-drawer, .rb-sub { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .rb-menu-btn:hover, .btn:hover { transform: none !important; }
}
@media (max-width: 991.98px) { .rb-main { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 575.98px) {
  .rb-top { padding: 0 12px; }
  .rb-user-name { display: none; }
  .rb-main { padding: 120px 14px 32px; }
  .rb-menu { left: 10px; }
}

/* ---- Fixes after first use ---- */

/* 1. The menu only reacts where a button is actually showing. The hidden drawer items, the menu's own box and the gaps
      between buttons never catch the pointer, so everything underneath stays clickable. */
.rb-menu, .rb-menu-list, .rb-item { pointer-events: none; }
.is-selected > .rb-menu-btn { pointer-events: auto; }
.rb-menu.open .is-drawer > .rb-menu-btn, .rb-menu:has(:focus-visible) .is-drawer > .rb-menu-btn { pointer-events: auto; }
.has-sub:hover > .rb-sub, .has-sub:focus-within > .rb-sub { pointer-events: auto; }
.has-sub > .rb-sub .rb-menu-btn { pointer-events: auto; }
.has-sub:not(:hover):not(:focus-within) > .rb-sub .rb-menu-btn { pointer-events: none; }

/* 2. Links styled as buttons keep the button's own colours (the plain link colour was winning and washing them out) */
.rb-app a.btn { color: var(--bs-btn-color); }
.rb-app a.btn:hover { color: var(--bs-btn-hover-color); }
.rb-app a.btn:active { color: var(--bs-btn-active-color); }
.rb-app .btn-outline-primary { --bs-btn-color: #eef1ea; --bs-btn-border-color: rgba(255, 255, 255, .6); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, .2); --bs-btn-hover-border-color: #fff; --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(255, 255, 255, .32); --bs-btn-active-border-color: #fff; }
.rb-app .card .btn-outline-primary { --bs-btn-color: #3c4737; --bs-btn-border-color: #586253; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #586253; --bs-btn-hover-border-color: #586253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #46503f; --bs-btn-active-border-color: #46503f; }

/* 3. Forms inside a full-width card sit in a centred column */
.rb-narrow { max-width: 42rem; margin-inline: auto; }

/* Scan intake: one compact card in the middle of the page instead of a wide, mostly empty one */
.rb-scan-wrap { display: flex; justify-content: center; align-items: flex-start; min-height: calc(100vh - 260px); padding-top: 4vh; }
.rb-scan-card { width: 100%; max-width: 36rem; }