/* RMC Manager - data entry (v116).  Modelled on the JotForm pictures Gavin sent: a label above each box, plain rounded boxes with a light grey edge, a
   drop-down arrow, on/off switches in place of tick boxes, Yes / No answers as a row of pills, a dark title bar on form cards, and a clear row for the
   buttons.  It is only a stylesheet: no form is rebuilt, no field renamed, so every save, upload and assessment works exactly as before.
   Loaded AFTER styles.css, v113, v114 and v115.  To switch it all off, remove the v116 line from index.html.
   Covers: every .field (about 630 of them), assessments (v60 question rows), Yes / No rows, pop-up forms, check lists and the tick boxes in them. */

:root { --jf-line: #cfd8e3; --jf-line-hover: #aab7c8; --jf-label: #1f2a3d; --jf-help: #6b7a90; --jf-on: var(--coral); --jf-off: #c3ccd8; }

/* ---- labels and boxes ----------------------------------------------------------------------------------------------------------------------- */
.field { margin: 14px 0; }
.field > label, .field > .label { display: block; margin: 0 0 6px; color: var(--jf-label); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13.5px; font-weight: 700; letter-spacing: -.005em; }
.field input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),
.field select, .field textarea,
.fd-defect textarea, .fd-gaps-modal-card input:not([type=checkbox]):not([type=radio]):not([type=file]), .fd-gaps-modal-card select, .fd-gaps-modal-card textarea {
  width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--jf-line); border-radius: 8px; background-color: #fff; color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; line-height: 1.35; box-shadow: inset 0 1px 2px rgba(10, 35, 66, .05); transition: border-color .15s, box-shadow .15s; }
.field textarea, .fd-defect textarea, .fd-gaps-modal-card textarea { min-height: 92px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--jf-line-hover); }
.field input:focus, .field select:focus, .field textarea:focus, .fd-defect textarea:focus, .fd-gaps-modal-card :is(input, select, textarea):focus {
  outline: 0; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(224, 79, 22, .18); }
.field input::placeholder, .field textarea::placeholder, .fd-defect textarea::placeholder { color: #98a4b6; }
.field input:disabled, .field select:disabled, .field textarea:disabled { background: #f3f5f8; color: #8592a6; cursor: not-allowed; }
.field input[type=file] { width: 100%; padding: 9px 10px; border: 1px dashed var(--jf-line-hover); border-radius: 8px; background: #f8fafc; font-size: 13.5px; }
.field input[type=file]::file-selector-button { margin-right: 12px; padding: 7px 14px; border: 0; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 700; cursor: pointer; }
.field input[type=file]::file-selector-button:hover { background: var(--coral); }
.field input[type=date], .field input[type=time], .field input[type=month] { min-width: 0; }

/* drop-down arrow */
.field select, .fd-gaps-modal-card select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566680' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }

/* the small help line under a box */
.field > .small, .field > .hint { display: block; margin-top: 6px; color: var(--jf-help); font-size: 12.5px; }

/* two boxes side by side, like the form picture */
.form-grid { gap: 0 18px; }

/* ---- on / off switches instead of tick boxes ------------------------------------------------------------------------------------------------ */
:is(.field, .check-grid, .checkrow, .v18-checklist-row, .v80-checklist, .v109-chk, .fd-gaps-modal-card, .jf-switch) input[type=checkbox] {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; position: relative; width: 42px; height: 24px; margin: 0 10px 0 0; padding: 0; border: 0; border-radius: 999px;
  background: var(--jf-off); cursor: pointer; vertical-align: middle; transition: background .18s; box-shadow: none; min-height: 0; }
:is(.field, .check-grid, .checkrow, .v18-checklist-row, .v80-checklist, .v109-chk, .fd-gaps-modal-card, .jf-switch) input[type=checkbox]::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(10, 35, 66, .35); transition: transform .18s; }
:is(.field, .check-grid, .checkrow, .v18-checklist-row, .v80-checklist, .v109-chk, .fd-gaps-modal-card, .jf-switch) input[type=checkbox]:checked { background: var(--jf-on); }
:is(.field, .check-grid, .checkrow, .v18-checklist-row, .v80-checklist, .v109-chk, .fd-gaps-modal-card, .jf-switch) input[type=checkbox]:checked::after { transform: translateX(18px); }
:is(.field, .check-grid, .checkrow, .v18-checklist-row, .v80-checklist, .v109-chk, .fd-gaps-modal-card, .jf-switch) input[type=checkbox]:focus-visible { outline: 3px solid rgba(224, 79, 22, .35); outline-offset: 2px; }
:is(.field, .check-grid, .checkrow, .v18-checklist-row, .v80-checklist, .v109-chk, .fd-gaps-modal-card, .jf-switch) input[type=checkbox]:disabled { opacity: .5; cursor: not-allowed; }
.field > label:has(> input[type=checkbox]), .check-grid label, label.checkrow { display: flex; align-items: center; font-weight: 600; color: var(--jf-label); cursor: pointer; }
label.checkrow { margin: 12px 0; font-size: 14px; }
.check-grid label { background: #fff; border: 1px solid var(--jf-line); border-radius: 10px; padding: 11px 14px; }
.check-grid label:has(input:checked) { border-color: var(--coral); background: #fff7f2; }
/* other radios and file boxes keep the browser's own control, in the portal's orange */
input[type=radio], input[type=checkbox] { accent-color: var(--coral); }

/* ---- Yes / No / Can't verify / N/A as a row of pills ---------------------------------------------------------------------------------------- */
.fd-yesno-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 0; }
.fd-yesno-row > span { flex: 1 1 220px; font-size: 14px; font-weight: 600; color: var(--jf-label); }
.fd-yesno-row label, .v10-focus .fd-yesno-row label { position: relative; display: inline-flex; align-items: center; gap: 0; margin: 0; padding: 8px 18px; border: 1.5px solid var(--jf-line); border-radius: 999px; background: #fff;
  color: #3b475c; font-size: 13.5px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.fd-yesno-row label:hover { border-color: var(--jf-line-hover); background: #f6f8fb; }
.fd-yesno-row input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; transform: none; }
.fd-yesno-row label:has(input:focus-visible) { outline: 3px solid rgba(224, 79, 22, .35); outline-offset: 2px; }
.fd-yesno-row label:has(input:checked) { color: #fff; border-color: transparent; background: var(--navy); }
.fd-yesno-row label:has(input[value=yes]:checked), .fd-yesno-row label:has(input[value=Yes]:checked), .fd-yesno-row label:has(input[value=pass]:checked) { background: #16794b; }
.fd-yesno-row label:has(input[value=no]:checked), .fd-yesno-row label:has(input[value=No]:checked), .fd-yesno-row label:has(input[value=fail]:checked) { background: #b42318; }
.fd-yesno-row label:has(input[value=caveat]:checked) { background: #c88100; }
.fd-yesno-row label:has(input[value=na]:checked), .fd-yesno-row label:has(input[value=NA]:checked) { background: #6b7a90; }

/* ---- assessments: one clear row per question ------------------------------------------------------------------------------------------------ */
.v60-q-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 18px; padding: 14px 4px; border-bottom: 1px solid #e6ebf1; margin: 0; }
.v60-q-row:last-child { border-bottom: 0; }
.v60-q-row > .v60-q-label { font-size: 14.5px; font-weight: 600; color: var(--jf-label); line-height: 1.4; }
.v60-q-row > .fd-yesno-row { padding: 0; justify-content: flex-end; }
.v60-q-row > .fd-defect { grid-column: 1 / -1; margin-top: 8px; padding: 14px 16px; border: 1px solid #f2c9c5; border-radius: 12px; background: #fff7f6; }
.v60-q-row > .fd-defect[id^=v60Caveat] { border-color: #f1dca8; background: #fffaf0; }
.v60-q-row > .fd-defect[id^=v60Fixed] { border-color: #bfe3cb; }
.v60-q-row.v60-unanswered { background: #fffaf0; border-left: 4px solid #e0a000; border-radius: 10px; padding-left: 14px; }
.fd-defect-head { margin-bottom: 10px; }
@media (max-width: 760px) { .v60-q-row { grid-template-columns: 1fr; } .v60-q-row > .fd-yesno-row { justify-content: flex-start; } }
/* each category is a form card with a dark title bar */
.v60-category { padding-top: 0; overflow: hidden; }
.v60-category > .v60-cat-head { margin: 0 -18px; padding: 13px 18px; background: var(--bar, #16253b); color: #fff; }
.v60-category > .v60-cat-head b { color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14.5px; font-weight: 700; }
.v60-category > .v60-cat-head .small { color: #b9c6dc; }
.v60-category > .v60-cat-head .v60-badge-todo { color: #ffb48a; }
.v60-category.v60-cat-todo { border-left: 1px solid #e2e7ee; box-shadow: inset 4px 0 0 #e0a000; }

/* ---- form cards: a dark title bar, like the dashboard ---------------------------------------------------------------------------------------- */
.card:has(> .field, > .form-grid) > h3:first-child, .card:has(> .field, > .form-grid) > .row-between:first-child { margin: -18px -18px 16px; padding: 11px 18px; background: var(--bar, #16253b); color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .03em; }
.card:has(> .field, > .form-grid) { overflow: hidden; }
.card:has(> .field, > .form-grid) > .row-between:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card:has(> .field, > .form-grid) > .row-between:first-child h3 { margin: 0; padding: 0; background: none; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .03em; }
.card:has(> .field, > .form-grid) > .row-between:first-child .btn { width: auto; margin: 0; padding: 5px 14px; font-size: 12px; background: rgba(255, 255, 255, .16); color: #fff; }
.card:has(> .field, > .form-grid) > .row-between:first-child .btn:hover { background: var(--coral); }
/* a form's buttons sit in their own row under a thin line */
.card:has(> .field, > .form-grid) > .actions { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e6ebf1; }
.card:has(> .field, > .form-grid) > :is(.primary, .btn.coral):last-child { margin-top: 18px; }

/* ---- pop-up forms ---------------------------------------------------------------------------------------------------------------------------- */
.fd-gaps-modal-card { padding: 0 0 22px; border-radius: 18px; }
.fd-gaps-modal-card > :is(h2, h3, h4):first-child, .fd-gaps-modal-card > .row-between:first-child { margin: 0 0 18px; padding: 15px 22px; background: var(--bar, #16253b); color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; }
.fd-gaps-modal-card > :not(:first-child) { margin-left: 22px; margin-right: 22px; }
.fd-gaps-modal-card > .row-between:first-child h3 { margin: 0; color: #fff; font-size: 14px; }

/* ---- phones: boxes stay 16px so the phone does not zoom in on them -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .field input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), .field select, .field textarea { font-size: 16px; }
  .form-grid { grid-template-columns: 1fr; }
}