/* ==========================================================================
   Revma Hire — Admin back-office styles (staff only).
   Self-contained: does NOT use the public marketing navbar/footer.
   Uses the brand palette from styles.css where available.
   ========================================================================== */
:root {
  --rv-red: #E63946;
  --rv-navy: #111827;
  --rv-ink: #20242c;
  --rv-muted: #6b727e;
  --rv-line: #e6e8ec;
  --rv-bg: #f4f5f7;
  --rv-card: #ffffff;
}
* { box-sizing: border-box; }
body.rv-admin {
  margin: 0;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--rv-bg);
  color: var(--rv-ink);
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--rv-red); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { font-family: 'Poppins', sans-serif; color: var(--rv-navy); margin: 0 0 .4em; }

/* ---- Shell layout ---- */
.rv-shell { display: flex; min-height: 100vh; }
.rv-side {
  width: 230px; flex-shrink: 0; background: var(--rv-navy); color: #fff;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.rv-side-brand { padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.10); }
.rv-side-brand .rv-logo { font-family: 'Poppins'; font-weight: 700; font-size: 1.15rem; color: #fff; }
.rv-side-brand .rv-logo b { color: var(--rv-red); }
.rv-side-brand .rv-sub { font-size: .72rem; color: rgba(255,255,255,.55); letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }
.rv-nav { padding: 10px 0; flex: 1; overflow-y: auto; }
.rv-nav a {
  display: flex; align-items: center; gap: 11px; padding: 11px 20px;
  color: rgba(255,255,255,.78); font-size: .92rem; border-left: 3px solid transparent;
}
.rv-nav a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.rv-nav a.active { background: rgba(230,57,70,.16); color: #fff; border-left-color: var(--rv-red); font-weight: 600; }
.rv-nav a svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.rv-nav .rv-nav-sec { padding: 14px 20px 5px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.38); }
.rv-side-foot { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.10); font-size: .82rem; }
.rv-side-foot .rv-who { color: #fff; font-weight: 600; }
.rv-side-foot .rv-role { color: rgba(255,255,255,.5); font-size: .74rem; text-transform: capitalize; }
.rv-side-foot form { margin-top: 8px; }
.rv-side-foot button {
  background: rgba(255,255,255,.08); color: #fff; border: 0; border-radius: 6px;
  padding: 7px 12px; font-size: .82rem; cursor: pointer; width: 100%;
}
.rv-side-foot button:hover { background: rgba(230,57,70,.5); }

.rv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rv-topbar {
  background: var(--rv-card); border-bottom: 1px solid var(--rv-line);
  padding: 14px 26px; display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10;
}
.rv-topbar h1 { font-size: 1.3rem; margin: 0; }
.rv-topbar .rv-preview-pill {
  background: #fff3cd; color: #8a6d00; font-size: .72rem; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; border: 1px solid #ffe69c;
}
.rv-content { padding: 26px; max-width: 1400px; width: 100%; }

/* ---- Cards / panels ---- */
.rv-card { background: var(--rv-card); border: 1px solid var(--rv-line); border-radius: 12px; padding: 20px; }
.rv-card + .rv-card { margin-top: 18px; }
.rv-card h2, .rv-card h3 { margin-top: 0; }
.rv-grid { display: grid; gap: 18px; }
.rv-grid-4 { grid-template-columns: repeat(4, 1fr); }
.rv-grid-3 { grid-template-columns: repeat(3, 1fr); }
.rv-grid-2 { grid-template-columns: repeat(2, 1fr); }

/* ---- Stat tiles ---- */
.rv-stat { background: var(--rv-card); border: 1px solid var(--rv-line); border-radius: 12px; padding: 18px 20px; }
.rv-stat .rv-stat-num { font-family: 'Poppins'; font-size: 2rem; font-weight: 700; color: var(--rv-navy); line-height: 1.1; }
.rv-stat .rv-stat-lbl { color: var(--rv-muted); font-size: .82rem; margin-top: 3px; }
.rv-stat.rv-stat-alert .rv-stat-num { color: var(--rv-red); }

/* ---- Tables ---- */
.rv-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rv-table th { text-align: left; padding: 10px 12px; color: var(--rv-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--rv-line); white-space: nowrap; }
.rv-table td { padding: 11px 12px; border-bottom: 1px solid var(--rv-line); vertical-align: middle; }
.rv-table tr:last-child td { border-bottom: 0; }
.rv-table tr:hover td { background: #fafbfc; }
.rv-table .rv-ref { font-family: 'Poppins'; font-weight: 600; }

/* ---- Buttons ---- */
.rv-btn { display: inline-block; padding: 8px 15px; border-radius: 7px; font-size: .86rem; font-weight: 600; border: 1px solid transparent; cursor: pointer; background: #eef0f3; color: var(--rv-ink); }
.rv-btn:hover { text-decoration: none; filter: brightness(.97); }
.rv-btn-primary { background: var(--rv-red); color: #fff; }
.rv-btn-navy { background: var(--rv-navy); color: #fff; }
.rv-btn-ghost { background: #fff; border-color: var(--rv-line); color: var(--rv-ink); }
.rv-btn-sm { padding: 5px 11px; font-size: .8rem; }
.rv-btn-danger { background: #fff; border-color: #f1c2c2; color: var(--rv-red); }
.rv-btn-danger:hover { background: #fde8e8; }

/* ---- Status badges (mirror the customer app.css palette) ---- */
.rv-badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.rv-badge-grey  { background: #eceef1; color: #555c66; }
.rv-badge-blue  { background: #e1ecfb; color: #1a5fb4; }
.rv-badge-amber { background: #fdf0d5; color: #9a6700; }
.rv-badge-green { background: #e3f6e8; color: #1b7a3d; }
.rv-badge-red   { background: #fde1e1; color: #b3261e; }

/* ---- Forms ---- */
.rv-field { margin-bottom: 16px; }
.rv-field label { display: block; font-size: .82rem; font-weight: 600; color: var(--rv-ink); margin-bottom: 5px; }
.rv-field input, .rv-field select, .rv-field textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--rv-line); border-radius: 7px;
  font-size: .92rem; font-family: inherit; background: #fff;
}
.rv-field input:focus, .rv-field select:focus, .rv-field textarea:focus { outline: 2px solid rgba(230,57,70,.25); border-color: var(--rv-red); }
.rv-field .rv-hint { font-size: .78rem; color: var(--rv-muted); margin-top: 4px; }
.rv-err { background: #fde1e1; color: #b3261e; padding: 10px 14px; border-radius: 8px; font-size: .88rem; margin-bottom: 14px; }
.rv-ok  { background: #e3f6e8; color: #1b7a3d; padding: 10px 14px; border-radius: 8px; font-size: .88rem; margin-bottom: 14px; }

/* ---- Calendar / Gantt ---- */
.rv-cal-wrap { overflow-x: auto; border: 1px solid var(--rv-line); border-radius: 12px; background: #fff; }
.rv-cal { border-collapse: collapse; font-size: .8rem; table-layout: fixed; }
.rv-cal th, .rv-cal td { border: 1px solid var(--rv-line); }
.rv-cal .rv-cal-machine { position: sticky; left: 0; background: #fff; z-index: 2; width: 180px; min-width: 180px; max-width: 180px; padding: 8px 12px; font-weight: 600; color: var(--rv-navy); }
.rv-cal thead th { background: #fafbfc; padding: 5px 0; font-size: .68rem; color: var(--rv-muted); text-align: center; width: 27px; min-width: 27px; max-width: 27px; }
.rv-cal thead th.rv-cal-wk { background: #eef0f3; }
.rv-cal thead th.rv-today { background: var(--rv-red); color: #fff; }
.rv-cal tbody td { height: 34px; padding: 0; text-align: center; position: relative; }
.rv-cal td.rv-cal-wkend { background: #f7f8fa; }
.rv-cal td.rv-today-col { background: rgba(230,57,70,.05); }
.rv-cal .rv-bar { position: absolute; top: 5px; bottom: 5px; left: 1px; right: 1px; border-radius: 4px; }
.rv-cal .rv-bar-firm  { background: #1a5fb4; }
.rv-cal .rv-bar-soft  { background: #b9c9e0; }
.rv-cal .rv-bar-maint { background: #9a6700; background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,.25) 4px, rgba(255,255,255,.25) 8px); }
.rv-cal .rv-bar-block { background: #555c66; }
.rv-cal-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: .82rem; color: var(--rv-muted); }
.rv-cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rv-cal-legend i { width: 16px; height: 12px; border-radius: 3px; display: inline-block; }

.rv-muted { color: var(--rv-muted); }
.rv-right { text-align: right; }
.rv-flex { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rv-mb0 { margin-bottom: 0; }
.rv-actions-row { display: flex; gap: 7px; flex-wrap: wrap; }

@media (max-width: 820px) {
  .rv-side { position: fixed; transform: translateX(-100%); transition: transform .2s; z-index: 50; }
  .rv-side.open { transform: translateX(0); }
  .rv-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .rv-grid-3, .rv-grid-2 { grid-template-columns: 1fr; }
  .rv-burger { display: inline-flex !important; }
}

/* ============================================================================
   THE REVMA DESIGN LANGUAGE (Bible 89)
   Whitespace instead of borders. Sections instead of boxes. Typography instead
   of decoration. Colour only where it means something.
   Use: wrap a page in .rvx, group fields in <section class="rvx-sec"> with an
   <h2>, and let the space do the work.
   ========================================================================== */
.rvx{--rvx-ink:#101828;--rvx-mut:#667085;--rvx-line:#eceff4;--rvx-blue:#1f63e8;
     --rvx-green:#16a34a;--rvx-amber:#d97706;--rvx-red:#b42318}

/* the sheet the cards sit on */
.rvx{background:transparent}
.rvx > * + *{margin-top:14px}                    /* the rhythm: space between everything */

/* page heading */
.rvx-title{font-family:'Poppins',sans-serif;font-size:1.45rem;font-weight:800;letter-spacing:-.02em;margin:0 0 4px;color:var(--rvx-ink)}
.rvx-lede{font-size:.94rem;color:var(--rvx-mut);line-height:1.55;margin:0;max-width:52ch}

/* a section: a soft card, no heavy outline */
.rvx-sec{background:#fff;border-radius:16px;padding:13px 15px 14px;border:1px solid transparent;
         box-shadow:0 1px 2px rgba(16,24,40,.035),0 6px 18px rgba(16,24,40,.04)}
.rvx-sec > h2{font-family:'Poppins',sans-serif;font-size:1.06rem;font-weight:800;letter-spacing:-.01em;
              margin:0 0 3px;color:var(--rvx-ink)}
.rvx-sec > .rvx-hint{font-size:.82rem;color:var(--rvx-mut);margin:0;line-height:1.45}
.rvx-sec > h2 + *{margin-top:2px}
.rvx-sec > .rvx-hint + *{margin-top:14px}
/* the section you're working in — quietly stronger, nothing shouts */
.rvx-sec.is-now{box-shadow:0 1px 2px rgba(16,24,40,.05),0 10px 30px rgba(31,99,232,.10);
                border-color:#dbe6fd}
/* a section that's waiting its turn sits back */
.rvx-sec.is-quiet{box-shadow:0 1px 2px rgba(16,24,40,.03);background:#fcfdfe;border-color:#f1f4f8}

/* fields: label does the work, placeholder is only a hint */
.rvx-f{margin-top:13px}
.rvx-f:first-of-type{margin-top:0}
.rvx-f > label{display:block;font-size:.82rem;font-weight:700;color:var(--rvx-ink);margin-bottom:3px}
.rvx-f > .rvx-eg{display:block;font-size:.76rem;color:var(--rvx-mut);margin:0 0 6px}
.rvx-f input,.rvx-f select,.rvx-f textarea{width:100%;padding:11px 13px;font-size:16px;font-family:inherit;
  color:var(--rvx-ink);background:#fff;border:1px solid #dfe3ea;border-radius:12px;transition:border-color .15s,box-shadow .15s}
.rvx-f input:focus,.rvx-f select:focus,.rvx-f textarea:focus{outline:none;border-color:var(--rvx-blue);
  box-shadow:0 0 0 4px rgba(31,99,232,.10)}
.rvx-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){ .rvx-2{grid-template-columns:1fr;gap:0} }

/* one primary action per section */
.rvx-do{width:100%;margin-top:16px;padding:14px;border:0;border-radius:12px;background:var(--rvx-blue);
        color:#fff;font-family:'Poppins',sans-serif;font-size:15px;font-weight:800;cursor:pointer}
.rvx-do:disabled{background:#d3d9e2;cursor:not-allowed}
.rvx-why{font-size:.78rem;color:var(--rvx-mut);text-align:center;margin-top:8px}

/* alive, quietly */
.rvx-saved{display:inline-flex;align-items:center;gap:6px;font-size:.79rem;color:var(--rvx-green);
           margin-top:10px;opacity:0;transition:opacity .25s}
.rvx-saved.on{opacity:1}
.rvx-saved::before{content:"\2713";font-weight:800}
@keyframes rvxIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.rvx-in{animation:rvxIn .28s ease both}

/* quiet list under it all */
.rvx-list{background:#fff;border-radius:18px;overflow:hidden;
          box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.045)}
.rvx-list .rv-table th{background:#fbfcfd;border-bottom:1px solid var(--rvx-line)}
.rvx-list .rv-table td{border-bottom:1px solid #f4f6f9}

/* ---- MOBILE TABLES: on a phone every rv-table row becomes a readable card.
   The column heading is shown against each value (injected as data-label by
   admin.blade.php), so nothing is chopped off and no sideways scrolling. ---- */
@media (max-width: 820px) {
  .rv-table { border-collapse: separate; border-spacing: 0; font-size: .95rem; }
  .rv-table thead { display: none; }
  .rv-table, .rv-table tbody, .rv-table tr, .rv-table td { display: block; width: 100%; }
  .rv-table tr { background: #fff; border: 1px solid var(--rv-line); border-radius: 14px;
                 margin: 0 0 10px; padding: 4px 0; box-shadow: 0 1px 2px rgba(20,30,60,.04); }
  .rv-table tr:hover td { background: transparent; }
  .rv-table td { border: 0; padding: 9px 14px; display: flex; align-items: flex-start;
                 justify-content: space-between; gap: 14px; text-align: right; word-break: normal;
                 overflow-wrap: anywhere; }
  .rv-table td::before { content: attr(data-label); flex: 0 0 38%; text-align: left;
                 font-size: .68rem; font-weight: 800; text-transform: uppercase;
                 letter-spacing: .05em; color: var(--rv-muted); padding-top: 2px; }
  .rv-table td:first-child { font-weight: 700; font-size: 1rem; padding-top: 12px; }
  .rv-table td:empty, .rv-table td.rv-hide-sm { display: none; }
  /* 46, not 40. The X that removes a materials line is the last control on a
     row he is filling in on site with one thumb. */
  .rv-table td .rv-btn, .rv-table td button, .rv-table td a.rv-btn { min-height: var(--rv-tap, 46px); }
}
.rv-burger { display: inline-flex; align-items: center; justify-content: center; min-height: var(--rv-tap, 46px); min-width: var(--rv-tap, 46px); background: none; border: 0; cursor: pointer; color: #111827; padding: 4px; margin-right: 6px; border-radius: 6px; }

/* ---- Cashflow softer look ---- */
.rv-input { width: 100%; padding: 9px 12px; border: 1px solid var(--rv-line); border-radius: 10px; background: #fff; font: inherit; color: var(--rv-ink); box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
.rv-input:focus { outline: none; border-color: var(--rv-red); box-shadow: 0 0 0 3px rgba(230,57,70,.12); }

/* A <select> sizes itself to its LONGEST OPTION, and that intrinsic width beats
   width:100%. With ~3000 contacts in the customer picker the New job screen was
   687px wide inside a 412px phone: the whole page slid sideways and the form
   went off the left edge. width:100% alone never fixed this -- it needs the
   max-width and the min-width:0 (a flex/grid child refuses to shrink below its
   content without it). Applied to every control, not just this one screen, so
   the next long option list cannot do it again. */
.rv-input, select.rv-input, .cf select, .cf input, .cf textarea,
select, input, textarea { max-width: 100%; min-width: 0; }
select.rv-input { text-overflow: ellipsis; }
html, body { max-width: 100%; overflow-x: hidden; }
.cf .rv-card { border-radius: 16px; border-color: #edeff3; box-shadow: 0 1px 2px rgba(20,30,60,.04), 0 8px 24px rgba(20,30,60,.05); }
.cf .rv-stat { border-radius: 16px; border-color: #edeff3; box-shadow: 0 1px 2px rgba(20,30,60,.04), 0 8px 24px rgba(20,30,60,.05); }
.cf select, .cf input, .cf textarea { border: 1px solid var(--rv-line); border-radius: 10px; padding: 8px 11px; background: #fff; font: inherit; color: var(--rv-ink); box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
.cf select:focus, .cf input:focus, .cf textarea:focus { outline: none; border-color: var(--rv-red); box-shadow: 0 0 0 3px rgba(230,57,70,.12); }
.cf .rv-table th { border-bottom: 1px solid #edeff3; }
.cf .rv-table td { border-bottom: 1px solid #f1f3f6; padding: 10px 10px; }
.cf .rv-table tr:hover td { background: #fbfcfd; }
.cf .rv-btn { border-radius: 10px; }
.cf .rv-btn-primary { box-shadow: 0 2px 10px rgba(230,57,70,.22); }
.cf .cf-lines td { vertical-align: middle; }
.cf .cf-lines input, .cf .cf-lines select { font-size: .85rem; }
.cf details { border-radius: 12px; }

/* --- collapsible sidebar (added) --- */
.rv-side { transition: width .18s ease; }
html.rv-nav-collapsed .rv-side { width: 0 !important; min-width: 0 !important; overflow: hidden; }
.rv-burger:hover { background: rgba(0,0,0,.06); }

/* ============================================================
   OPTIONAL DARK THEME — only active when <body class="rv-theme-dark">
   (chosen in Admin > Settings > Appearance). Default is the brand theme above.
   ============================================================ */
body.rv-theme-dark{
  /* RETIRED 2026-08-16 — this redefined REVMA red as gold at night, so every
     brand element silently changed colour in the dark. */
  --rv-navy:#1f1f26;           /* dark sidebar */
  --rv-ink:#f1f1f3;
  --rv-muted:#9aa0aa;
  --rv-line:rgba(255,255,255,.09);
  --rv-bg:#26262c;
  --rv-card:#30303a;
  --rv-accent-on:#1a1208;
  background:var(--rv-bg); color:var(--rv-ink);
  font-family:'Geist',-apple-system,BlinkMacSystemFont,'Roboto',sans-serif;
}
body.rv-theme-dark h1,body.rv-theme-dark h2,body.rv-theme-dark h3,body.rv-theme-dark h4{ font-family:'Fraunces',serif; font-weight:400; letter-spacing:-.01em; color:var(--rv-ink); }
body.rv-theme-dark a{ color:var(--rv-red); }
body.rv-theme-dark .rv-side{ background:#1f1f26; border-right:1px solid var(--rv-line); }
body.rv-theme-dark .rv-side-brand{ border-bottom:1px solid var(--rv-line); font-family:'Fraunces',serif; font-weight:300; }
body.rv-theme-dark .rv-side-brand .rv-logo b,body.rv-theme-dark .rv-side-brand b{ color:var(--rv-red); font-style:italic; font-weight:500; }
body.rv-theme-dark .rv-nav a{ color:rgba(255,255,255,.74); border-left:3px solid transparent; }
body.rv-theme-dark .rv-nav a:hover{ background:rgba(255,255,255,.05); color:#fff; }
body.rv-theme-dark .rv-nav a.active{ background:rgba(224,178,86,.14); border-left-color:var(--rv-red); color:#fff; }
body.rv-theme-dark .rv-nav .rv-nav-sec{ color:rgba(255,255,255,.40); }
body.rv-theme-dark .rv-side-foot{ border-top:1px solid var(--rv-line); color:rgba(255,255,255,.6); }
body.rv-theme-dark .rv-topbar{ background:color-mix(in srgb,var(--rv-bg) 86%, transparent); border-bottom:1px solid var(--rv-line); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); color:var(--rv-ink); }
body.rv-theme-dark .rv-card,body.rv-theme-dark .rv-stat{ background:var(--rv-card); border:1px solid var(--rv-line); color:var(--rv-ink); }
body.rv-theme-dark .rv-stat .rv-stat-num{ color:var(--rv-ink); font-family:'Fraunces',serif; }
body.rv-theme-dark .rv-stat .rv-stat-lbl{ color:var(--rv-muted); }
body.rv-theme-dark .rv-stat.rv-stat-alert .rv-stat-num{ color:var(--rv-red); }
body.rv-theme-dark .rv-table th{ color:var(--rv-muted); border-bottom:2px solid var(--rv-line); }
body.rv-theme-dark .rv-table td{ border-bottom:1px solid var(--rv-line); color:var(--rv-ink); }
body.rv-theme-dark .rv-table tr:hover td{ background:rgba(255,255,255,.03); }

body.rv-theme-dark .rv-btn:hover{ background:#44444f; }
/* RETIRED 2026-08-16 — a gold gradient button from a SECOND dark theme that
   fought revma-shell.css. Peter never chose gold; it just won the cascade. */
body.rv-theme-dark .rv-btn-ghost{ background:transparent; color:var(--rv-ink); border:1px solid var(--rv-line); }
body.rv-theme-dark input,body.rv-theme-dark select,body.rv-theme-dark textarea{ background:#2a2a32 !important; color:var(--rv-ink) !important; border:1px solid var(--rv-line) !important; border-radius:10px; }
body.rv-theme-dark input::placeholder,body.rv-theme-dark textarea::placeholder{ color:var(--rv-muted); }
body.rv-theme-dark .rv-badge,body.rv-theme-dark .badge{ border:1px solid var(--rv-line); }
body.rv-theme-dark label{ color:var(--rv-muted); }
body.rv-theme-dark hr{ border-color:var(--rv-line); }

/* ===== rv-acts standard row actions (eye/pdf/pencil/bin) ===== */
.rv-acts{display:flex;gap:14px;align-items:center;justify-content:flex-end}
.rv-acts a,.rv-acts button{border:none;background:none;cursor:pointer;padding:0;display:inline-flex;align-items:center;color:#9aa0aa;text-decoration:none}
.rv-acts .v:hover{color:#2563eb}
.rv-acts .p:hover{color:#111827}
.rv-acts .e:hover{color:#b45309}
.rv-acts .d:hover{color:#cc2229}
.rv-acts .tog{font-size:.72rem;color:#9aa0aa;border:1px solid #d9dce1;border-radius:5px;padding:2px 8px;line-height:1.5}
.rv-acts .tog:hover{color:#111827;border-color:#9aa0aa}
body.rv-theme-dark .rv-acts a,body.rv-theme-dark .rv-acts button{color:#8a8f99}
body.rv-theme-dark .rv-acts .p:hover{color:#e0b256}
body.rv-theme-dark .rv-acts .tog{border-color:#3a3a44}

/* Mission 019 wanted wide tables to stop pushing the page sideways, and made
   them scroll inside their card instead. But .rv-table ALREADY had the better
   answer twenty lines above -- every row becomes a card on a phone, nothing
   chopped, no scroller at all -- and a min-width of 560px forces the table back
   to 560px, so the good fix has been dead on every phone ever since. The
   materials table on the job report measured 590px inside a 386px card.

   Bible 92 rule 9: when the same subject has been fixed twice, the next change
   removes the duplication rather than adding a third layer. The card view is
   the answer and it is left alone.

   Tables with no card view (.project-table, .rvx-table, .rv-admin-table) keep
   their scroller in rv-consistency.css, because a scroller beats a table with
   its right-hand columns cut off. */
@media (max-width: 820px) {
  .rv-card { overflow-x: visible; }
}

/* quiet ⓘ help — the long explanation only when asked for (Bible 89 §6) */
.rvx-help{border:0;padding:0;margin:0}
.rvx-help > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-size:.81rem;line-height:1.2;color:var(--rvx-blue);font-weight:600;padding:2px 0}
.rvx-help > summary::-webkit-details-marker{display:none}
.rvx-help > summary::before{content:"\24D8";font-size:.95rem}
.rvx-help p{font-size:.86rem;color:var(--rvx-mut);line-height:1.5;margin:7px 0 0;max-width:56ch}

/* the action finishes the card (Bible 89) — inside it, not floating underneath */
.rvx-sec .rvx-close{margin:13px -15px 0;padding:12px 15px 0;border-top:1px solid #f2f5f9}
.rvx-sec .rvx-close .rvx-do{margin-top:0}
.rvx-sec .rvx-close .rvx-why{margin-top:8px}
/* thumb-friendly icons everywhere (tradie hands) */
.rvx-ic{width:26px;height:26px;font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}

/* micro-interactions (Bible: Industrial Apple) - small, never in the way */
.rvx-f input,.rvx-f select,.rvx-f textarea{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.rvx-f input:hover,.rvx-f select:hover,.rvx-f textarea:hover{border-color:#cfd6e0}
.rvx-sec{transition:box-shadow .25s ease,border-color .25s ease}
.rvx-do{transition:background .28s ease,box-shadow .28s ease,transform .08s}
.rvx-do:not(:disabled){box-shadow:0 4px 14px rgba(31,99,232,.22)}
.rvx-do:not(:disabled):active{transform:scale(.99)}
/* a save says so quietly, then gets out of the way */
.rvx-flash{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:600;color:var(--rvx-green);
  background:#f0fdf4;border-radius:10px;padding:9px 13px;animation:rvxIn .25s ease both;transition:opacity .5s ease}
.rvx-flash::before{content:"\2713";font-weight:800}
.rvx-flash.gone{opacity:0}

/* ---- SHARED CHECK ROW (Bible 90) -------------------------------------------
   One component for every tick-list in the app: SWMS, checklists, pre-starts.
   Spacious rows, big tap target, a small green check. Never a dense chip grid. */
.rvx-checks{display:flex;flex-direction:column;margin:2px 0 0}
.rvx-check{display:flex;align-items:center;gap:13px;min-height:52px;padding:9px 4px;cursor:pointer;
  border-bottom:1px solid #f2f4f8;transition:background .14s;-webkit-tap-highlight-color:transparent}
.rvx-check:last-child{border-bottom:0}
.rvx-check:active{background:#f7f9fc}
.rvx-check input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;margin:0;
  width:24px;height:24px;border-radius:50%;border:2px solid #d3d9e2;background:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s ease,border-color .2s ease,transform .12s ease}
.rvx-check input[type=checkbox]::after{content:"\2713";font-size:13px;font-weight:800;color:#fff;
  opacity:0;transform:scale(.5);transition:opacity .18s ease,transform .18s ease}
.rvx-check input[type=checkbox]:checked{background:var(--rvx-green,#16a34a);border-color:var(--rvx-green,#16a34a)}
.rvx-check input[type=checkbox]:checked::after{opacity:1;transform:scale(1)}
.rvx-check input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(31,99,232,.15)}
.rvx-check input[type=checkbox]:disabled{background:#eef1f5;border-color:#e1e6ed;cursor:not-allowed}
.rvx-check .rvx-check-t{flex:1;font-size:.95rem;line-height:1.35;color:#101828}
.rvx-check input:checked ~ .rvx-check-t{color:#5b6472}
.rvx-check .rvx-check-s{display:block;font-size:.78rem;color:#7d8697;margin-top:1px}
.rvx-checks-note{font-size:.82rem;color:#667085;line-height:1.45;margin:0 0 4px}

/* ---- CHECKLIST ITEM (Bible 90) ---------------------------------------------
   One item per row: the question, then big Pass / Fail / N/A targets. The extra
   detail (reading, note, photo) stays folded away until it is actually needed. */
.rvx-item{padding:14px 2px;border-bottom:1px solid #f2f4f8}
.rvx-item:last-of-type{border-bottom:0}
.rvx-item-q{font-size:.98rem;font-weight:700;color:#101828;line-height:1.35}
.rvx-item-s{font-size:.79rem;color:#7d8697;margin-top:2px}
.rvx-pfn{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px}
.rvx-pfn label{position:relative;display:flex;align-items:center;justify-content:center;min-height:46px;
  border:1.5px solid #e1e6ee;border-radius:12px;background:#fff;font-size:.92rem;font-weight:700;
  color:#5b6472;cursor:pointer;transition:background .18s,border-color .18s,color .18s;
  -webkit-tap-highlight-color:transparent}
.rvx-pfn input{position:absolute;opacity:0;pointer-events:none}
.rvx-pfn label:active{transform:scale(.98)}
.rvx-pfn input:checked + span{color:#fff}
.rvx-pfn label:has(input[value=pass]:checked){background:#16a34a;border-color:#16a34a;color:#fff}
.rvx-pfn label:has(input[value=fail]:checked){background:#b42318;border-color:#b42318;color:#fff}
.rvx-pfn label:has(input[value=na]:checked){background:#667085;border-color:#667085;color:#fff}
.rvx-more{margin-top:10px}
.rvx-more > summary{list-style:none;cursor:pointer;font-size:.82rem;font-weight:600;color:var(--rvx-blue,#1f63e8);
  display:inline-flex;align-items:center;gap:6px;padding:4px 0}
.rvx-more > summary::-webkit-details-marker{display:none}
.rvx-more > summary::before{content:"+";font-size:1rem;font-weight:800}
.rvx-more[open] > summary::before{content:"\2212"}
.rvx-more .rvx-more-in{display:grid;gap:10px;margin-top:10px}
.rvx-more input{width:100%;padding:11px 13px;font-size:16px;border:1px solid #dfe3ea;border-radius:11px;
  background:#fff;font-family:inherit}
.rvx-more input:focus{outline:none;border-color:var(--rvx-blue,#1f63e8);box-shadow:0 0 0 4px rgba(31,99,232,.10)}
.rvx-2c{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---- JOB REPORT ON THE FROZEN STANDARD (Bible 90) --------------------------
   Maps the report's existing sections onto the Industrial Apple kit without
   touching the working markup: soft cards, quiet headings, calm inputs, one
   confident action, whitespace instead of borders. Behaviour unchanged. */
.jrx{--jx-ink:#101828;--jx-mut:#667085;--jx-line:#eef1f5;--jx-blue:#1f63e8;--jx-green:#16a34a}
.jrx .rv-card{background:#fff;border:1px solid transparent;border-radius:16px;padding:14px 15px 15px;
  margin-top:14px !important;box-shadow:0 1px 2px rgba(16,24,40,.035),0 6px 18px rgba(16,24,40,.04)}
.jrx > .rv-card:first-of-type{margin-top:0 !important}
.jrx .rv-card h3{font-family:'Poppins',sans-serif;font-size:1.06rem;font-weight:800;letter-spacing:-.01em;
  color:var(--jx-ink);margin:0 0 3px}
.jrx .rv-card h3 + p,.jrx .rv-card h3 + .rv-muted{margin-top:0}
.jrx .rv-muted{color:var(--jx-mut);line-height:1.45}
.jrx label,.jrx .rv-label{font-size:.82rem;font-weight:700;color:var(--jx-ink);margin-bottom:3px;display:block}
.jrx input[type=text],.jrx input[type=number],.jrx input[type=date],.jrx input[type=time],
.jrx input[type=email],.jrx input[type=datetime-local],.jrx select,.jrx textarea,.jrx .rv-input{
  width:100%;padding:11px 13px;font-size:16px;font-family:inherit;color:var(--jx-ink);background:#fff;
  border:1px solid #dfe3ea;border-radius:12px;box-sizing:border-box;
  transition:border-color .18s ease,box-shadow .18s ease}
.jrx input:focus,.jrx select:focus,.jrx textarea:focus{outline:none;border-color:var(--jx-blue);
  box-shadow:0 0 0 4px rgba(31,99,232,.10)}
.jrx textarea{min-height:96px;line-height:1.5}
/* buttons: one confident primary, everything else quiet */
/* 46px, not 44. Bible 96 section 3 sets the minimum and this screen is the one
   he uses standing up, on a site, holding something. */
.jrx .rv-btn{border-radius:12px;min-height:46px;padding:11px 16px;font-weight:700;font-size:.95rem;
  transition:background .22s ease,box-shadow .22s ease,transform .08s}
.jrx .rv-btn:active{transform:scale(.99)}
/* BLUE TEXT ON A BLUE BUTTON. This rule painted a solid --jx-blue background
   and never said what colour the writing should be, so the label kept the blue
   ink the soft button variant sets -- rgb(25,103,210) on rgb(31,99,232). Every
   primary button on the job report screen was effectively blank: Save report,
   Complete report, Email customer, Upload photos. Bible 96 section 2: the
   palette is decided, and a button you cannot read is not a button. */
.jrx .rv-btn-primary{background:var(--jx-blue);border-color:var(--jx-blue);color:#fff;
  box-shadow:0 4px 14px rgba(31,99,232,.20)}
.jrx .rv-btn-primary:hover{color:#fff}
.jrx .rv-btn-ghost{background:#fff;border:1px solid #e3e8ef;color:#39424f;box-shadow:none}
/* the sticky workflow bar sits quietly */
.jrx #jrStepsCard{border-radius:14px;padding:11px 13px;box-shadow:0 2px 10px rgba(16,24,40,.06)}
.jrx #jrStepsCard h3{font-size:.95rem}
.jrx #jrStepsCard .rv-btn{min-height:38px;padding:8px 14px;border-radius:999px;font-size:.85rem}
/* tables inside the report breathe */
.jrx table td,.jrx table th{padding:11px 10px}
.jrx table th{font-size:.7rem;letter-spacing:.05em;color:var(--jx-mut);border-bottom:1px solid var(--jx-line)}
.jrx table td{border-bottom:1px solid #f5f7fa}
/* photo thumbnails: large and rounded */
.jrx img[src*="photo"],.jrx .jr-thumb img{border-radius:12px}
/* the finish card keeps its meaning without shouting */
.jrx .rv-card[style*="2px solid #16a34a"]{border:1px solid #bbf7d0 !important;background:#f7fdf9;
  box-shadow:0 1px 2px rgba(16,24,40,.03),0 6px 18px rgba(22,163,74,.08)}

/* ---- JOB REPORT POLISH (Bible 90): built for technicians, not desktops ----- */
/* 1. Job summary reads as grouped facts, not eight dashboard boxes */
.jrx .jrx-sum{display:flex;flex-direction:column;margin-top:6px}
.jrx .jrx-sum-row{display:flex;align-items:baseline;gap:14px;padding:11px 2px;border-bottom:1px solid #f3f5f9}
.jrx .jrx-sum-row:last-child{border-bottom:0}
.jrx .jrx-sum-k{flex:0 0 38%;font-size:.78rem;font-weight:700;color:#7d8697;letter-spacing:.01em;text-transform:none}
.jrx .jrx-sum-row > div:last-child{flex:1;font-size:.97rem;font-weight:600;color:#101828;line-height:1.35}
@media (min-width:760px){ .jrx .jrx-sum{display:grid;grid-template-columns:1fr 1fr;column-gap:32px} }

/* 2. Workflow reads vertically on a phone - a phone is vertical */
@media (max-width:760px){
  .jrx #jrStepsCard .rv-flex-between{flex-direction:column;align-items:flex-start;gap:6px}
  .jrx #jrStepsCard > div[style*="overflow-x"]{display:flex !important;flex-direction:column;
    overflow-x:visible !important;gap:0;width:100%}
  .jrx #jrStepsCard .rv-btn{width:100%;justify-content:flex-start;text-align:left;border:0 !important;
    border-radius:11px;background:transparent !important;padding:11px 10px;min-height:48px;
    border-bottom:1px solid #f3f5f9 !important;box-shadow:none}
  .jrx #jrStepsCard .rv-btn:last-child{border-bottom:0 !important}
}

/* THE TRAFFIC LIGHTS ON THE WORKFLOW LIST.
   Green done, amber accounted (skipped or excused, with his words), red
   required and outstanding -- Bible 91's table, Bible 99 s4. These live in a
   class because rule 2 above blanks the pill background with !important on a
   phone, which had erased the lights on the screen he actually uses: every
   rung rendered as identical plain text. The dot and the ink are immune to
   that, so the state reads at 412px and at 1920. */
.jrx #jrStepsCard .jr-rung{display:flex;align-items:center;gap:9px;border-radius:999px}
.jrx #jrStepsCard .jr-rung .jr-lt{width:11px;height:11px;border-radius:999px;flex:none}
.jrx #jrStepsCard .jr-rung .jr-why{margin-left:auto;font-weight:600;font-size:.78rem;opacity:.85;
  text-align:right;max-width:52%}
.jrx #jrStepsCard .jr-rung.is-green{color:var(--rv-green);background:#f0fdf4;border:1px solid var(--rv-green)}
.jrx #jrStepsCard .jr-rung.is-green .jr-lt{background:var(--rv-green)}
.jrx #jrStepsCard .jr-rung.is-amber{color:#b45309;background:#fffbeb;border:1px solid var(--rv-orange)}
.jrx #jrStepsCard .jr-rung.is-amber .jr-lt{background:var(--rv-orange)}
.jrx #jrStepsCard .jr-rung.is-red{color:var(--rv-red);background:var(--rv-red-soft);border:1px solid var(--rv-red)}
.jrx #jrStepsCard .jr-rung.is-red .jr-lt{background:var(--rv-red)}
/* DOES NOT APPLY IS A STATE, NOT A FAILURE. A SWMS the chosen level does not
   require was drawn in the same red as a missing signature, with the words
   "Not required" printed on it — the rung contradicted itself. */
.jrx #jrStepsCard .jr-rung.is-grey{color:#5b6472;background:#f4f6f9;border:1px solid #d8dee8}
.jrx #jrStepsCard .jr-rung.is-grey .jr-lt{background:#98a2b3}

/* 3. Camera first, gallery second. No "Choose Files". */
.jrx .jrx-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.jrx .jrx-pick-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:82px;border:1.5px dashed #d8dee8;border-radius:14px;background:#fff;cursor:pointer;
  font-size:.9rem;font-weight:700;color:#39424f;transition:border-color .18s,background .18s;
  -webkit-tap-highlight-color:transparent}
.jrx .jrx-pick-btn span{font-size:26px;line-height:1}
.jrx .jrx-pick-btn:active{background:#f7f9fc}
.jrx .jrx-pick-btn.primary{border-style:solid;border-color:#1f63e8;color:#1f63e8;background:#f5f8ff}
.jrx .jrx-picked{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.jrx .jrx-thumb{width:78px;height:78px;object-fit:cover;border-radius:12px;box-shadow:0 2px 8px rgba(16,24,40,.10)}
.jrx .jrx-chip{font-size:.8rem;background:#f3f5f9;border-radius:9px;padding:7px 11px;color:#39424f}

/* 4. Signing needs room for a finger */
.jrx canvas{width:100% !important;min-height:190px;border:1px solid #e3e8ef;border-radius:14px;background:#fff;touch-action:none}

/* 6. Add hours is the action, not another field */
.jrx form .rv-btn-secondary{background:#1f63e8;border-color:#1f63e8;color:#fff;box-shadow:0 4px 14px rgba(31,99,232,.20)}

/* 7. Voice note is a signature feature - make it obvious */
.jrx .jrx-dictate{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:52px;
  border:0;border-radius:14px;background:#101828;color:#fff;font-size:1rem;font-weight:800;cursor:pointer;
  box-shadow:0 4px 16px rgba(16,24,40,.22);transition:transform .1s,box-shadow .2s}
.jrx .jrx-dictate:active{transform:scale(.99)}
.jrx .jrx-dictate .dot{width:9px;height:9px;border-radius:50%;background:#ff5b5b}

/* 5. Empty states invite instead of reporting nothing */
.jrx .jrx-empty{text-align:center;padding:22px 14px;color:#7d8697}
.jrx .jrx-empty b{display:block;font-size:.95rem;color:#39424f;font-weight:700;margin-bottom:10px}

/* ---- FIELD TOOL HEADER: what's next, first (Bible 90) --------------------- */
.jrx .jrx-now{background:#fff;border-radius:18px;padding:16px;margin:0 0 14px;
  box-shadow:0 1px 2px rgba(16,24,40,.035),0 8px 24px rgba(16,24,40,.05)}
.jrx .jrx-now-ref{font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8a92a0}
.jrx .jrx-now-cust{font-family:'Poppins',sans-serif;font-size:1.28rem;font-weight:800;letter-spacing:-.02em;
  color:#101828;line-height:1.2;margin-top:3px}
.jrx .jrx-now-site{font-size:.92rem;color:#667085;margin-top:3px;line-height:1.35}
/* the next step is a button you press, not a bullet you read */
.jrx .jrx-go{display:flex;align-items:center;gap:13px;width:100%;margin-top:15px;padding:13px 14px;
  border:0;border-radius:15px;background:#1f63e8;color:#fff;cursor:pointer;text-align:left;
  box-shadow:0 6px 18px rgba(31,99,232,.26);transition:transform .09s,box-shadow .2s;font-family:inherit}
.jrx .jrx-go:active{transform:scale(.99)}
.jrx .jrx-go.done{background:#16a34a;box-shadow:0 6px 18px rgba(22,163,74,.22);cursor:default}
.jrx .jrx-go-ic{flex:none;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:16px}
.jrx .jrx-go-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.jrx .jrx-go-tx .k{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.jrx .jrx-go-tx .t{font-family:'Poppins',sans-serif;font-size:1.04rem;font-weight:800;line-height:1.2;margin-top:1px}
.jrx .jrx-go-ch{flex:none;font-size:24px;opacity:.75}
/* the current workflow step reads as an action too */
.jrx #jrStepsCard .rv-btn[style*="fffbeb"],.jrx #jrStepsCard .rv-btn.is-now{
  background:#fffbeb !important;color:#7a3f06 !important;font-weight:800}