/* The RO bar (js/ro-bar.js): type an RO number, Scan its barcode, or take a Photo of it; and its camera scanner. Service Scope tokens
   (css/servicescope.css) only. One-handed tap sizes (44px) on a tablet or phone. */
:root{--robar-live:#6FDCF5;--robar-err:#FFB4AB;--robar-ok:#9BE3B0}   /* on the Petrol-deep band: live (focus), an error, done */
.ro-bar{display:flex;flex-direction:column;gap:6px;min-width:0}
.ro-bar-label{font:600 13px var(--sf-font-text);color:var(--muted)}
.ro-bar-row{display:flex;gap:8px;align-items:stretch;min-width:0}
.ro-bar-row .ro-bar-input{flex:1;min-width:0;min-height:44px;font:600 18px/1 var(--sf-font-display);letter-spacing:.01em}
.ro-bar-btn{min-height:44px;padding:0 12px;flex:none}
.ro-bar-btn svg{flex:none}
.ro-bar-msg{margin:0;font-size:13px;color:var(--muted)}
.ro-bar-msg.err{color:var(--flag-ink)}
.ro-bar-msg.ok{color:var(--bay-ink)}
.ro-bar-photo{display:flex;align-items:center;gap:10px;padding:6px 8px;background:var(--raised);border:1px solid var(--line);border-radius:var(--sf-r-control);font-size:13px}
.ro-bar-photo img{width:44px;height:44px;object-fit:cover;border-radius:var(--radius);flex:none;background:var(--line-soft)}
.ro-bar-photo span{flex:1;min-width:0}
@media (max-width:480px){
  .ro-bar-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ro-bar-btn{width:44px;padding:0}
}

/* The RO bar on the Petrol-deep band: the advisor's check-in band (My day) and the parts counter's scan band (Work queues) are the
   same piece, so they look the same: a big Paper field with the RO in the display face (the field is the main action: type or scan,
   then Enter) and Scan / Photo as outlined buttons on the band. Flow stays for what is live (the field's focus halo), never a button. */
.adv-intake .ro-bar-label,.scanband .ro-bar-label{color:var(--head-muted);font-size:14px}
.adv-intake .ro-bar-row,.scanband .ro-bar-row{gap:10px}
.adv-intake .ro-bar-row .ro-bar-input,.scanband .ro-bar-row .ro-bar-input{min-height:58px;font-size:26px;letter-spacing:.01em;padding:0 16px;background:var(--sf-paper);color:var(--sf-iron);border-color:transparent;border-radius:var(--sf-r-control)}
.adv-intake .ro-bar-row .ro-bar-input:focus,.scanband .ro-bar-row .ro-bar-input:focus{border-color:var(--robar-live);box-shadow:0 0 0 3px color-mix(in srgb,var(--robar-live) 45%,transparent)}
.adv-intake .ro-bar-row .ro-bar-input::placeholder,.scanband .ro-bar-row .ro-bar-input::placeholder{color:var(--sf-muted);font:500 17px var(--sf-font-text);letter-spacing:0}
.adv-intake .ro-bar-btn,.scanband .ro-bar-btn{min-height:58px;padding:0 18px;background:transparent;color:var(--head-ink);border-color:var(--head-line);font-size:15px}
.adv-intake .ro-bar-btn:hover,.scanband .ro-bar-btn:hover{background:rgba(255,255,255,.1);border-color:var(--head-muted)}
.adv-intake .ro-bar-btn:focus-visible,.scanband .ro-bar-btn:focus-visible{outline-color:var(--robar-live)}
.adv-intake .ro-bar-msg,.scanband .ro-bar-msg{color:var(--head-muted)}
.adv-intake .ro-bar-msg.err,.scanband .ro-bar-msg.err{color:var(--robar-err)}
.adv-intake .ro-bar-msg.ok,.scanband .ro-bar-msg.ok{color:var(--robar-ok)}
.adv-intake .ro-bar-photo,.scanband .ro-bar-photo{background:rgba(255,255,255,.08);border-color:var(--head-line);color:var(--head-ink)}
:root[data-theme="dark"] .adv-intake .ro-bar-row .ro-bar-input,:root[data-theme="dark"] .scanband .ro-bar-row .ro-bar-input{background:var(--raised);color:var(--ink);border-color:var(--head-line)}
:root[data-theme="dark"] .adv-intake .ro-bar-row .ro-bar-input::placeholder,:root[data-theme="dark"] .scanband .ro-bar-row .ro-bar-input::placeholder{color:var(--muted)}
@media (max-width:640px){
  /* (css/mobile.css sets 16px on phone fields so iPhones don't zoom; this field is bigger than that, so no zoom either) */
  .adv-intake .ro-bar-row .ro-bar-input,.scanband .ro-bar-row .ro-bar-input{font-size:22px!important}
}
@media (max-width:480px){
  .adv-intake .ro-bar-btn,.scanband .ro-bar-btn{width:58px;padding:0}
}

/* the scanner: over everything (a top-layer dialog), the camera's view with a guide box */
.ro-scan{width:min(560px,calc(100vw - 24px))}
.ro-scan-body{display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px}
.ro-scan-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ro-scan-head h2{margin:0;font:700 22px/1.1 var(--sf-font-display)}
.ro-scan-head .btn{min-height:44px}
.ro-scan-intro p{margin:0 0 10px}
.ro-scan-actions{display:flex;gap:10px;flex-wrap:wrap}
.ro-scan-actions .btn{min-height:44px}
.ro-scan-view{position:relative;background:#000;border-radius:var(--sf-r-panel);overflow:hidden;aspect-ratio:4/3}
.ro-scan-view video{display:block;width:100%;height:100%;object-fit:cover}
.ro-scan-guide{position:absolute;left:10%;right:10%;top:32%;bottom:32%;border:2px solid var(--robar-live);border-radius:var(--sf-r-control);box-shadow:0 0 0 999px rgba(0,0,0,.28)}
.ro-scan-status{margin:0;font-size:14px;min-height:1.45em}

/* the check-in dialog's match card: this RO is already a car here */
.ro-match{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px 14px 12px 18px;border:1px solid color-mix(in srgb,var(--safety) 45%,transparent);border-radius:var(--sf-r-panel);background:var(--safety-wash)}
.ro-match::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--safety)}
.ro-match h3{margin:0;font:700 17px/1.2 var(--sf-font-display)}
.ro-match p{margin:0}
.ro-match .ro-match-actions{display:flex;gap:10px;flex-wrap:wrap}
.ro-match .ro-match-actions .btn{min-height:44px}

/* a car's RO photos in its side sheet */
.ro-photos{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ro-photos li{position:relative;display:flex;flex-direction:column;gap:4px;width:96px}
.ro-photos a{display:block;width:96px;height:96px;border:1px solid var(--line);border-radius:var(--sf-r-control);overflow:hidden;background:var(--raised)}
.ro-photos img{display:block;width:100%;height:100%;object-fit:cover}
.ro-photos .btn{width:100%}
/* the rest of the check-in form, hidden while the match card shows */
.ci-rest{display:flex;flex-direction:column;gap:14px}

/* ---------- Check in a car (the shared dialog, js/tracker-shell.js; styled here because My day and the Board both load this file) ----------
   Reads as a short guided form: the RO first (type, scan or photo: the three ways are equal-sized buttons beside the field), then what
   is required (marked in words, never by colour alone), then the rest. The button row stays in view. */
#checkInDlg{width:min(640px,calc(100vw - 24px))}
#checkInDlg h2{font:700 24px/1.15 var(--sf-font-display);letter-spacing:-.01em;margin:0 0 12px}
#checkInDlg label{font-size:15px;font-weight:600}
#checkInDlg .hint{font-size:14px;line-height:1.45}
#checkInDlg :is(input:not([type=checkbox]),select){min-height:46px;font-size:16px}
#checkInDlg fieldset{border:0;border-top:1px solid var(--line-soft);padding:16px 0 4px;margin:6px 0 0}
#checkInDlg legend{padding:0 10px 0 0;font:700 18px/1.2 var(--sf-font-display)}
/* what must be filled in says so in words next to its label */
#checkInDlg .field:has(:required) > label::after{content:" (required)";font-weight:500;color:var(--muted);font-size:14px}
#checkInDlg .dlg-foot .btn{min-height:46px;padding-left:22px;padding-right:22px}
#checkInDlg .dlg-foot .btn.primary{font-size:16px}
@media (max-width:560px){
  #checkInDlg .dlg-foot .btn.primary{flex:1 1 auto}
}