/* Vula 0.3.86 — standardised inspector cards + deeper operational overview */

/* Keep trading-unit cards aligned with the standard Vula card language. */
.field-inspection-list.highlight-cards{gap:10px}
.field-inspection-list.highlight-cards .inspection-unit-card,
.field-inspection-list.highlight-cards .inspection-unit-card.has-alert{
  background:#fff;
  border:1px solid #dfe6e9;
  box-shadow:none;
}
.field-inspection-list.highlight-cards .inspection-unit-card.has-alert em{
  background:#fff0d1;
  color:#895d15;
}
.field-inspection-list.highlight-cards .inspection-unit-card.is-onsite{border-color:#d8e5df}

/* Operational overview: neutral, information-rich, and consistent with dashboard cards. */
.inspection-highlights-wrap{margin:0 0 18px}
.field-section-title.compact{padding:0 4px 11px}
.field-section-title.compact small{margin-top:4px;font-size:11px;line-height:1.4;color:#78858c}
.inspection-highlights{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.inspection-highlight{
  position:relative;
  min-width:0;
  min-height:132px;
  padding:16px 38px 15px 16px;
  border:1px solid #dfe6e9;
  border-radius:16px;
  background:#fff;
  box-shadow:0 4px 14px rgba(19,40,51,.045);
  text-decoration:none!important;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.inspection-highlight:active{transform:scale(.995)}
.inspection-highlight>small{
  display:block;
  margin:0 0 11px;
  font-size:9px;
  line-height:1;
  letter-spacing:.13em;
  font-weight:800;
  color:#7c898f;
}
.inspection-highlight-main{display:flex;align-items:flex-start;gap:10px;min-width:0}
.inspection-highlight-main strong{
  flex:0 0 auto;
  font-size:30px;
  line-height:.95;
  font-weight:700;
  color:#18242c;
}
.inspection-highlight-main span{
  display:block;
  margin:1px 0 0;
  font-size:12px;
  line-height:1.25;
  font-weight:750;
  color:#263741;
}
.inspection-highlight>em{
  display:block;
  margin-top:auto;
  padding-top:13px;
  font-size:10px;
  line-height:1.35;
  font-style:normal;
  font-weight:500;
  color:#7b888f;
}
.inspection-highlight>b{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:22px;
  line-height:1;
  font-weight:400;
  color:#a0abb0;
}
.inspection-highlight.is-active{
  border-color:#315fc8;
  box-shadow:0 0 0 1px #315fc8,0 5px 16px rgba(49,95,200,.08);
}
.inspection-highlight.is-active>small{color:#315fc8}
.inspection-highlight.all-clear{
  grid-column:1/-1;
  min-height:96px;
  background:#fff;
  border-color:#d8e5df;
}
.inspection-highlight.all-clear strong{color:#278f63}

.clear-inspection-filter{margin-top:8px}

/* Keep date/time inputs firmly inside their parent card on iOS. */
.reinspection-field,.inspection-followup,.field-inspection-form{min-width:0;width:100%;max-width:100%;box-sizing:border-box}
.reinspection-field input[type=datetime-local]{display:block;width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}

@media(max-width:600px){
  .inspection-highlights-wrap{margin-bottom:16px}
  .inspection-highlights{gap:9px}
  .inspection-highlight{min-height:124px;padding:14px 32px 14px 14px;border-radius:15px}
  .inspection-highlight>small{margin-bottom:10px;font-size:8.5px}
  .inspection-highlight-main{gap:8px}
  .inspection-highlight-main strong{font-size:27px}
  .inspection-highlight-main span{font-size:11px}
  .inspection-highlight>em{padding-top:11px;font-size:9.5px}
  .inspection-highlight>b{right:11px}
}
@media(max-width:370px){
  .inspection-highlights{grid-template-columns:1fr}
  .inspection-highlight{min-height:108px}
}