.clock-in-simple{margin-top:14px}
.clock-in-simple .large{margin-top:16px}
.small-note-details{margin:10px 0}
.small-note-details>summary{cursor:pointer;font-weight:700;color:#31566f}
.small-note-details[open]>summary{margin-bottom:8px}
.vehicle-check-list{display:grid;gap:9px;padding:10px 0}
.vehicle-check-list label{display:flex;align-items:center;gap:10px;margin:0}
.vehicle-check-list input[type="checkbox"]{width:20px;height:20px;flex:0 0 20px}


/* Vehicle check: force a clean single-column mobile layout */
@media(max-width:760px){
  .feature-card form.grid{
    display:block;
  }

  .feature-card form.grid > label,
  .vehicle-check-list,
  .feature-card form.grid > div,
  .feature-card form.grid > button{
    width:100%;
    max-width:none;
    box-sizing:border-box;
  }

  .feature-card form.grid > label{
    display:block;
    margin:0 0 14px;
  }

  .feature-card form.grid input[type="text"],
  .feature-card form.grid input[type="number"],
  .feature-card form.grid textarea{
    width:100%;
    box-sizing:border-box;
  }

  .vehicle-check-list{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin:4px 0 16px;
    padding:0;
  }

  .vehicle-check-list label{
    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    border:1px solid #dfe7ee;
    border-radius:10px;
    background:#f8fbfd;
    box-sizing:border-box;
  }

  .vehicle-check-list input[type="checkbox"]{
    width:22px;
    height:22px;
    flex:0 0 22px;
  }

  .feature-card form.grid textarea{
    min-height:130px;
    resize:vertical;
  }

  .feature-card form.grid > button.large{
    width:100%;
    margin-top:4px;
  }
}

/* Vehicle check: stack cleanly on phones */
@media(max-width:760px){
  .vehicle-check-main .feature-card form.grid{display:block}
  .vehicle-check-main .feature-card form.grid > label,
  .vehicle-check-main .vehicle-check-list,
  .vehicle-check-main .feature-card form.grid > button{width:100%;max-width:none;box-sizing:border-box}
  .vehicle-check-main .feature-card form.grid > label{display:block;margin:0 0 14px}
  .vehicle-check-main .feature-card form.grid input[type="number"],
  .vehicle-check-main .feature-card form.grid select,
  .vehicle-check-main .feature-card form.grid textarea{width:100%;box-sizing:border-box}
  .vehicle-check-main .vehicle-check-list{display:grid;grid-template-columns:1fr;gap:10px;margin:4px 0 16px;padding:0}
  .vehicle-check-main .vehicle-check-list label{width:100%;display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #dfe7ee;border-radius:10px;background:#f8fbfd;box-sizing:border-box}
  .vehicle-check-main .vehicle-check-list input[type="checkbox"]{width:22px;height:22px;flex:0 0 22px}
  .vehicle-check-main .feature-card form.grid textarea{min-height:130px;resize:vertical}
  .vehicle-check-main .feature-card form.grid > button.large{width:100%;margin-top:4px}
}

/* Match Vehicle Check width to Clock in / out */
.vehicle-check-main{max-width:640px}
.vehicle-check-main>h1{max-width:600px;margin-left:auto;margin-right:auto}
.vehicle-check-main>.back-button,
.vehicle-check-main>.card,
.vehicle-check-main>.success,
.vehicle-check-main>.error{max-width:600px;margin-left:auto;margin-right:auto;box-sizing:border-box}
.vehicle-check-main>.back-button{display:block;width:max-content}

/* Weekly admin folders */
.vehicle-week-folders{margin-top:14px}
.vehicle-week-folder{padding:0}
.vehicle-week-folder>summary{cursor:pointer;list-style:none;padding:14px 16px;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.vehicle-week-folder>summary::-webkit-details-marker{display:none}
.vehicle-week-folder[open]>summary{border-bottom:1px solid #e3eaf0}
.vehicle-week-folder>p,.vehicle-week-folder>.tablewrap{margin:12px 16px 16px}
@media(max-width:600px){
  .vehicle-check-main{max-width:none;padding:0 12px}
  .vehicle-check-main>.back-button,
  .vehicle-check-main>.card,
  .vehicle-check-main>.success,
  .vehicle-check-main>.error{max-width:none;width:100%}
}


/* Explicit Yes / No vehicle check rows */
.vehicle-check-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:10px 12px;
  border:1px solid #dfe7ee;
  border-radius:10px;
  background:#f8fbfd;
}
.vehicle-check-row>span{
  font-weight:700;
}
.vehicle-answer{
  display:flex;
  gap:8px;
}
.vehicle-answer label{
  position:relative;
  margin:0;
  cursor:pointer;
}
.vehicle-answer input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.vehicle-answer span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:56px;
  padding:8px 12px;
  border:1px solid #c8d6e1;
  border-radius:999px;
  background:#fff;
  font-weight:800;
}
.vehicle-answer input:checked + span{
  outline:2px solid currentColor;
  outline-offset:1px;
}
@media(max-width:760px){
  .vehicle-check-row{
    grid-template-columns:1fr;
    gap:8px;
  }
  .vehicle-answer{
    width:100%;
  }
  .vehicle-answer label{
    flex:1;
  }
  .vehicle-answer span{
    width:100%;
    box-sizing:border-box;
    min-height:44px;
  }
}


/* Vehicle check tidy-up: cleaner mobile layout and safer Yes/No spacing */
.vehicle-check-main .feature-card form.grid{
  display:block;
}

.vehicle-check-main .feature-card form.grid > label,
.vehicle-check-main .feature-card form.grid > .vehicle-check-list,
.vehicle-check-main .feature-card form.grid > button.large{
  display:block;
  width:100%;
  max-width:none;
  box-sizing:border-box;
}

.vehicle-check-main .feature-card form.grid > label{
  margin:0 0 16px;
}

.vehicle-check-main .feature-card form.grid > label input,
.vehicle-check-main .feature-card form.grid > label select,
.vehicle-check-main .feature-card form.grid > label textarea{
  width:100%;
  box-sizing:border-box;
}

.vehicle-check-main .feature-card form.grid > label textarea{
  min-height:140px;
  resize:vertical;
}

.vehicle-check-main .vehicle-check-list{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin:0 0 16px;
  padding:0;
}

.vehicle-check-main .vehicle-check-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:22px;
  align-items:center;
  padding:12px 14px;
}

.vehicle-check-main .vehicle-check-row > span{
  font-size:14px;
  line-height:1.2;
  font-weight:800;
  white-space:nowrap;
}

.vehicle-check-main .vehicle-answer{
  display:flex;
  gap:14px;
  margin-left:auto;
  padding-left:10px;
}

.vehicle-check-main .vehicle-answer span{
  min-width:58px;
  min-height:44px;
  padding:8px 14px;
  box-sizing:border-box;
}

.vehicle-check-main .feature-card form.grid > button.large{
  margin-top:2px;
}

@media(max-width:420px){
  .vehicle-check-main .vehicle-check-row{
    grid-template-columns:minmax(0,1fr) auto;
    gap:18px;
    padding:12px;
  }

  .vehicle-check-main .vehicle-check-row > span{
    font-size:13px;
  }

  .vehicle-check-main .vehicle-answer{
    gap:12px;
    padding-left:8px;
  }

  .vehicle-check-main .vehicle-answer span{
    min-width:54px;
    padding:8px 10px;
  }
}


/* Vehicle Yes/No mobile refinement */
.vehicle-check-main .vehicle-check-row{
  grid-template-columns:minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
}

.vehicle-check-main .vehicle-check-row > span{
  white-space:normal !important;
  overflow-wrap:normal;
  word-break:normal;
  line-height:1.25;
  max-width:100%;
}

.vehicle-check-main .vehicle-answer{
  margin-left:auto;
  gap:12px;
  flex-shrink:0;
}

.vehicle-check-main .vehicle-answer span.answer-yes{
  border-color:#8fc7a5;
  background:#edf8f1;
  color:#166534;
}

.vehicle-check-main .vehicle-answer span.answer-no{
  border-color:#e0a19a;
  background:#fff0ee;
  color:#a12820;
}

.vehicle-check-main .vehicle-answer input:checked + span.answer-yes{
  background:#d9f2e2;
  border-color:#2f8f57;
  color:#14532d;
  outline:2px solid #2f8f57;
  outline-offset:1px;
}

.vehicle-check-main .vehicle-answer input:checked + span.answer-no{
  background:#ffdeda;
  border-color:#c83b2e;
  color:#8f1d14;
  outline:2px solid #c83b2e;
  outline-offset:1px;
}

@media(max-width:420px){
  .vehicle-check-main .vehicle-check-row{
    grid-template-columns:minmax(0,1fr) auto;
    gap:14px;
  }

  .vehicle-check-main .vehicle-check-row > span{
    font-size:14px;
    line-height:1.2;
  }

  .vehicle-check-main .vehicle-answer{
    gap:10px;
  }

  .vehicle-check-main .vehicle-answer span{
    min-width:50px;
    padding:8px 10px;
  }
}


/* Keep all Yes buttons aligned left of all No buttons */
.vehicle-check-main .vehicle-answer{
  display:grid;
  grid-template-columns:58px 58px;
  gap:12px;
  justify-content:end;
  align-items:center;
}

.vehicle-check-main .vehicle-answer label:first-child{
  grid-column:1;
}

.vehicle-check-main .vehicle-answer label:last-child{
  grid-column:2;
}

@media(max-width:420px){
  .vehicle-check-main .vehicle-answer{
    grid-template-columns:52px 52px;
    gap:10px;
  }
}


/* FINAL mobile Yes/No alignment + colour fix */
.vehicle-check-main .vehicle-check-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 132px !important;
  gap:18px !important;
  align-items:center !important;
}

.vehicle-check-main .vehicle-answer{
  display:grid !important;
  grid-template-columns:58px 58px !important;
  gap:14px !important;
  width:132px !important;
  margin-left:auto !important;
  padding:0 !important;
  align-items:center !important;
  justify-content:end !important;
}

/* Reset older generic label styling that was pushing the buttons off-centre */
.vehicle-check-main .vehicle-answer label{
  display:block !important;
  width:58px !important;
  max-width:58px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-sizing:border-box !important;
}

.vehicle-check-main .vehicle-answer label:first-child{grid-column:1 !important}
.vehicle-check-main .vehicle-answer label:last-child{grid-column:2 !important}

.vehicle-check-main .vehicle-answer span{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:58px !important;
  height:44px !important;
  min-width:58px !important;
  min-height:44px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:999px !important;
  box-sizing:border-box !important;
  font-weight:800 !important;
  line-height:1 !important;
}

/* Green Yes, red No even before selection */
.vehicle-check-main .vehicle-answer span.answer-yes{
  background:#e8f7ee !important;
  border:2px solid #43a267 !important;
  color:#17603a !important;
}

.vehicle-check-main .vehicle-answer span.answer-no{
  background:#fff0ee !important;
  border:2px solid #d65a4f !important;
  color:#9b2b22 !important;
}

/* Stronger fill when selected */
.vehicle-check-main .vehicle-answer input:checked + span.answer-yes{
  background:#2f9d5a !important;
  border-color:#2f9d5a !important;
  color:#fff !important;
  outline:none !important;
}

.vehicle-check-main .vehicle-answer input:checked + span.answer-no{
  background:#cf4638 !important;
  border-color:#cf4638 !important;
  color:#fff !important;
  outline:none !important;
}

/* Let long descriptions wrap naturally while keeping the answer block aligned */
.vehicle-check-main .vehicle-check-row > span{
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  line-height:1.25 !important;
  align-self:center !important;
}

@media(max-width:420px){
  .vehicle-check-main .vehicle-check-row{
    grid-template-columns:minmax(0,1fr) 122px !important;
    gap:14px !important;
  }

  .vehicle-check-main .vehicle-answer{
    grid-template-columns:54px 54px !important;
    gap:14px !important;
    width:122px !important;
  }

  .vehicle-check-main .vehicle-answer label,
  .vehicle-check-main .vehicle-answer span{
    width:54px !important;
    min-width:54px !important;
  }
}


/* Robust mobile Yes/No colours even if the HTML classes are absent */
.vehicle-check-main .vehicle-answer label:first-child span{
  background:#e8f7ee !important;
  border:2px solid #43a267 !important;
  color:#17603a !important;
}

.vehicle-check-main .vehicle-answer label:last-child span{
  background:#fff0ee !important;
  border:2px solid #d65a4f !important;
  color:#9b2b22 !important;
}

.vehicle-check-main .vehicle-answer label:first-child input:checked + span{
  background:#2f9d5a !important;
  border-color:#2f9d5a !important;
  color:#fff !important;
  outline:none !important;
}

.vehicle-check-main .vehicle-answer label:last-child input:checked + span{
  background:#cf4638 !important;
  border-color:#cf4638 !important;
  color:#fff !important;
  outline:none !important;
}

/* Keep the issues box compact on phones */
@media(max-width:760px){
  .vehicle-check-main .feature-card form.grid > label textarea{
    min-height:96px !important;
    height:96px !important;
    max-height:150px !important;
  }
}


/* FINAL vehicle checklist logic:
   SAFE answer is always LEFT and GREEN.
   ACTION answer is always RIGHT and RED. */
.vehicle-check-main .vehicle-answer label:first-child span{
  background:#e8f7ee !important;
  border:2px solid #43a267 !important;
  color:#17603a !important;
}
.vehicle-check-main .vehicle-answer label:last-child span{
  background:#fff0ee !important;
  border:2px solid #d65a4f !important;
  color:#9b2b22 !important;
}
.vehicle-check-main .vehicle-answer label:first-child input:checked + span{
  background:#2f9d5a !important;
  border-color:#2f9d5a !important;
  color:#fff !important;
  outline:none !important;
}
.vehicle-check-main .vehicle-answer label:last-child input:checked + span{
  background:#cf4638 !important;
  border-color:#cf4638 !important;
  color:#fff !important;
  outline:none !important;
}

/* Keep the two answer columns lined up */
.vehicle-check-main .vehicle-answer{
  display:grid !important;
  grid-template-columns:58px 58px !important;
  gap:14px !important;
  width:132px !important;
  margin-left:auto !important;
  padding:0 !important;
}
.vehicle-check-main .vehicle-answer label{
  margin:0 !important;
  padding:0 !important;
  width:58px !important;
  max-width:58px !important;
  border:0 !important;
  background:transparent !important;
}
.vehicle-check-main .vehicle-answer span{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:58px !important;
  min-width:58px !important;
  height:44px !important;
  min-height:44px !important;
  box-sizing:border-box !important;
  padding:0 !important;
}


/* Vehicle-specific history and unresolved issues */
.vehicle-history-card{margin-top:16px}
.vehicle-history-panel[hidden]{display:none !important}
.vehicle-history-panel h3{margin:14px 0 8px}
.vehicle-open-issues{margin:10px 0 16px}
.vehicle-open-issue{
  padding:10px 12px;
  margin:8px 0;
  border:1px solid #e4a19a;
  border-left:5px solid #cf4638;
  border-radius:10px;
  background:#fff5f3;
  line-height:1.45;
}
.compact-vehicle-success{margin:10px 0 16px}
.vehicle-edit-summary{display:inline-block;cursor:pointer;list-style:none}
.vehicle-edit-summary::-webkit-details-marker{display:none}
.vehicle-edit-panel{min-width:280px;padding:10px 0}
.vehicle-edit-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.vehicle-edit-actions form{margin:0}
.vehicle-resolve-form{display:grid;gap:6px;margin-top:8px}
.vehicle-resolve-form input{min-width:230px}
@media(max-width:760px){
  .vehicle-edit-panel{min-width:0}
  .vehicle-edit-actions{display:grid;grid-template-columns:1fr}
  .vehicle-edit-actions button{width:100%}
  .vehicle-resolve-form input{min-width:0;width:100%;box-sizing:border-box}
}


/* Vehicle compliance dates and service */
.vehicle-compliance-card{
  margin:12px 0 16px;
  padding:12px;
  border:1px solid #d9e2e8;
  border-radius:12px;
  background:#f8fafb;
}
.vehicle-compliance-card h3{margin:0 0 10px}
.vehicle-compliance-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.vehicle-compliance-grid>div{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.vehicle-compliance-grid>div>span{
  font-size:12px;
  font-weight:700;
  color:#5f6d78;
}
.compliance-badge{
  display:block;
  border-radius:9px;
  padding:6px 8px;
  font-size:12px;
  line-height:1.25;
  border:1px solid #d4dde4;
  background:#f1f4f6;
  color:#46545e;
}
.compliance-badge.good{background:#e8f7ee;border-color:#79bf94;color:#17603a}
.compliance-badge.warning{background:#fff7df;border-color:#e0ba58;color:#765300}
.compliance-badge.danger{background:#fff0ee;border-color:#dc8178;color:#9b2b22}
.compliance-badge.neutral{background:#f1f4f6;border-color:#d4dde4;color:#5b6871}
table .vehicle-compliance-grid{grid-template-columns:1fr;min-width:180px}

/* Site-wide Workforce Connect footer */
.workforce-footer{
  max-width:1180px;
  margin:26px auto 12px;
  padding:18px 20px;
  border-top:1px solid #dce3e8;
  text-align:center;
  color:#66737d;
  font-size:12px;
  line-height:1.55;
}
.workforce-footer-brand{
  display:flex;
  justify-content:center;
  gap:8px 14px;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.workforce-footer-brand strong{color:#17344d}
.workforce-footer-links{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px 14px;
  margin-bottom:6px;
}
.workforce-footer a{color:#245b80;text-decoration:none}
.workforce-footer a:hover{text-decoration:underline}
.workforce-footer-details{max-width:900px;margin:0 auto}
.legal-card{max-width:850px;margin-left:auto;margin-right:auto}
.legal-card p{line-height:1.65}

@media(max-width:760px){
  .vehicle-compliance-grid{grid-template-columns:1fr}
  .workforce-footer{margin-top:18px;padding:16px 14px;font-size:11px}
  .workforce-footer-brand{display:block}
  .workforce-footer-brand span{display:block;margin-top:3px}
}