/* v705 - Request a Viewing: final tidy-up layer (look + small layout bugs).
   Only presentation: no ids, handlers or validation rules touched.
   Roll back: remove the 344 <link> and <script> from index.html. */

/* 1) No browser "swipe back" arrow (the white round chevron) floating over the header while the form is open */
html:has(#viewingModal.active),body:has(#viewingModal.active){overscroll-behavior-x:none;}
#viewingModal.active,#viewingModal .vr-modal,#viewingModal .vr-modal-body{overscroll-behavior:contain;}

/* 2) Send button: icon + label on ONE line, always centred */
html body #viewingModal .vr-submit-btn{
  display:flex!important;flex-direction:row!important;align-items:center;justify-content:center;gap:10px;
  white-space:nowrap;line-height:1.1;
}
html body #viewingModal .vr-submit-btn i{display:inline-flex!important;flex:0 0 auto;align-items:center;justify-content:center;width:1.15em;height:1.15em;margin:0!important;line-height:0;}
html body #viewingModal .vr-submit-btn i svg{width:100%;height:100%;display:block;}
html body #viewingModal .vr-submit-btn i::before,html body #viewingModal .vr-submit-btn i::after{content:none!important;}
html body #viewingModal .vr-submit-btn span{display:inline-block;}

/* 3) Footer: stable height (the "fields left" pill no longer makes the button jump) + phone safe area */
html body #viewingModal .vr-actions{padding-bottom:max(10px,env(safe-area-inset-bottom,0px))!important;}
html body #viewingModal .vr-remaining{min-height:23px;display:flex;align-items:center;justify-content:center;}
html body #viewingModal .vr-remaining:empty{visibility:hidden;}

/* 4) Unit summary: id row can wrap, "Add units" stays at the far end and never squeezes the name */
html body #viewingModal .vr-unit-summary .bhvd-uidrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0;}
html body #viewingModal .vr-unit-summary .bhvd-add{margin-left:auto;flex:0 0 auto;white-space:nowrap;}
html body #viewingModal .vr-unit-summary .bhvd-dupcode{display:none!important;}
html body #viewingModal .vr-unit-summary .u-loc{overflow-wrap:anywhere;}
html body #viewingModal .bhvd-chips{gap:6px;}
html body #viewingModal .bhvd-chip{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html body #viewingModal .bhvd-chip button{min-width:22px;min-height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;margin:-3px -4px -3px 0;}
html body #viewingModal .bhvd-chip button:hover{background:rgba(22,45,76,.12);}
html body #viewingModal .bhvd-chip button:focus-visible{outline:2px solid var(--vc-sand,#CEA577);outline-offset:1px;}
/* the first chip is the unit the request started from: it has no x, so it carries a small sand marker + tooltip */
html body #viewingModal .bhvd-chip.is-main{box-shadow:inset 0 0 0 1.5px rgba(206,165,119,.75);}
html body #viewingModal .bhvd-chip.is-main::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--vc-sand,#CEA577);flex:0 0 auto;}

/* 5) Visit purpose cards: label never runs under the radio mark / info button */
html body #viewingModal .vr-visit-type-btn{min-width:0;padding-right:38px!important;}
html body #viewingModal .vr-visit-type-btn>span:not(.vr-checkbox-mark){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html body #viewingModal .vr-info-btn{min-width:30px;min-height:30px;display:inline-flex;align-items:center;justify-content:center;}

/* 6) Mobile number: the typing meter is a slim rounded line inside the box, not a heavy extra border */
html body #viewingModal .phone-field-group{position:relative;overflow:hidden;}
html body #viewingModal .vrp-meter{height:3px!important;bottom:0;left:0;border-radius:0 3px 3px 0;opacity:.9;background:linear-gradient(90deg,var(--vc-sand,#CEA577),var(--vc-blue,#6483AA))!important;}
html body #viewingModal .vrp-meter.is-full{opacity:0;transition:opacity .4s ease;}

/* 7) Date and time: same "valid" tick the other fields get */
html body #viewingModal .vr-field.vrp-ok .bh-pick{position:relative;}
html body #viewingModal .vr-field.vrp-ok .bh-pick::after{
  content:"";position:absolute;right:12px;top:50%;width:18px;height:18px;margin-top:-9px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23162D4C'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23CEA577' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
html body #viewingModal .bh-pick:focus-visible{outline:2px solid var(--vc-sand,#CEA577);outline-offset:2px;}

html body #viewingModal .vr-field.vrp-ok .bh-pick .bh-pick-caret{opacity:0;}
html body #viewingModal .bh-pick .bh-pick-val{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* 8) Step strip: connectors share the free space evenly so the 3 steps line up with the form below */
html body #viewingModal .vrp-steps{align-items:center;}
html body #viewingModal .vrp-link{flex:1 1 14px!important;min-width:10px;max-width:34px;}
html body #viewingModal .vrp-step span{overflow:visible;text-overflow:clip;}

/* 9) Narrow phones: nothing may force the form wider than the screen */
html body #viewingModal .vr-modal,html body #viewingModal .vr-modal-body{max-width:100%;}
html body #viewingModal .vr-modal-body{overflow-x:hidden;}
@media (max-width:440px){
  html body #viewingModal .vr-visit-type-btn{font-size:12.5px;gap:6px;}
  html body #viewingModal .vr-visit-type-btn>span:not(.vr-checkbox-mark){font-size:12.5px;letter-spacing:0;white-space:normal!important;overflow:visible!important;line-height:1.15;text-overflow:clip;}
}
@media (max-width:380px){
  html body #viewingModal .phone-field-group{padding-left:4px!important;padding-right:4px!important;}
  html body #viewingModal .phone-field-prefix{padding-left:8px!important;padding-right:6px!important;font-size:12.5px;}
  html body #viewingModal .vr-field .phone-field-group input#reqPhone{padding-left:8px!important;padding-right:18px!important;letter-spacing:0;font-size:12px!important;background-size:15px!important;background-position:right 1px center!important;}
  html body #viewingModal .vr-visit-type-options{gap:8px;}
  html body #viewingModal .vr-visit-type-btn{padding-left:8px;padding-right:8px;}
  html body #viewingModal .bhvd-add{padding:5px 9px;}
}
@media (prefers-reduced-motion:reduce){html body #viewingModal .vrp-meter{transition:none!important;}}
@media (max-width:340px){
  html body #viewingModal .vr-field .phone-field-group input#reqPhone{font-size:11px!important;}
}

/* schedule warning: the red round icon must not sit on top of the first line of text */
html body #viewingModal .vr-conflict-warning{position:relative;padding-left:44px!important;text-align:left;}
html body #viewingModal .vr-conflict-warning>i:first-child{position:absolute;left:12px;top:12px;}