/* Build 458 — Contracts sort selector, aligned columns and Active / Expired status */
#view[data-guard-page="contracts"] .guard-contract-sort-v456{
  min-width:195px;
  height:32px;
  margin-left:8px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--card);
  color:var(--ink);
  padding:0 30px 0 10px;
  font-size:10px;
  cursor:pointer;
  vertical-align:middle;
}
#view[data-guard-page="contracts"] .guard-contract-sort-v456:focus{
  outline:none;
  border-color:#8eb9aa;
  box-shadow:0 0 0 3px rgba(40,100,84,.10);
}

/* Customer | Contract ref | Type | Renewal | Value | Next visit | Status | action */
#view[data-guard-page="contracts"] .contracts-table .table-row,
#view[data-guard-page="contracts"] .panel.table .table-row:has([data-contract-open-customer]),
#view[data-guard-page="contracts"] [data-contract-open-customer],
#view[data-guard-page="contracts"] .table-row.head:has(+ [data-contract-open-customer]){
  grid-template-columns:minmax(170px,1.35fr) minmax(110px,.82fr) minmax(100px,.74fr) minmax(102px,.76fr) minmax(76px,.55fr) minmax(102px,.74fr) 78px 40px!important;
  column-gap:10px!important;
}

/* Keep every heading directly above its row content. */
#view[data-guard-page="contracts"] .table-row.head>span,
#view[data-guard-page="contracts"] [data-contract-open-customer]>*{
  box-sizing:border-box!important;
  min-width:0!important;
  justify-self:stretch!important;
}
#view[data-guard-page="contracts"] .table-row.head>span:first-child,
#view[data-guard-page="contracts"] [data-contract-open-customer]>*:first-child{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:left!important;
}
#view[data-guard-page="contracts"] .table-row.head>span:nth-child(n+2):nth-child(-n+7),
#view[data-guard-page="contracts"] [data-contract-open-customer]>*:nth-child(n+2):nth-child(-n+7){
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
#view[data-guard-page="contracts"] .table-row.head>span:last-child,
#view[data-guard-page="contracts"] [data-contract-open-customer]>*:last-child{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
#view[data-guard-page="contracts"] .guard-contract-ref-cell-v418{
  justify-content:center!important;
}
#view[data-guard-page="contracts"] .guard-contract-select-v418,
#view[data-guard-page="contracts"] .guard-contract-type-pill-v418{
  margin-left:auto!important;
  margin-right:auto!important;
}

#view[data-guard-page="contracts"] .guard-contract-status-head-v457,
#view[data-guard-page="contracts"] .guard-contract-status-cell-v457{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  text-align:center!important;
}

#view[data-guard-page="contracts"] .guard-contract-status-pill-v457{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:58px!important;
  height:22px!important;
  padding:0 8px!important;
  border-radius:999px!important;
  font-size:8px!important;
  font-weight:850!important;
  line-height:1!important;
  white-space:nowrap!important;
}
#view[data-guard-page="contracts"] .guard-contract-status-pill-v457.active{
  background:#e3f1e9!important;
  color:#27654c!important;
  border:1px solid #c7e3d3!important;
}
#view[data-guard-page="contracts"] .guard-contract-status-pill-v457.expired{
  background:#fee2e2!important;
  color:#991b1b!important;
  border:1px solid #fecaca!important;
}

@media(max-width:900px){
  #view[data-guard-page="contracts"] .contracts-table .table-row,
  #view[data-guard-page="contracts"] .panel.table .table-row:has([data-contract-open-customer]),
  #view[data-guard-page="contracts"] [data-contract-open-customer],
  #view[data-guard-page="contracts"] .table-row.head:has(+ [data-contract-open-customer]){
    grid-template-columns:minmax(145px,1.25fr) minmax(100px,.82fr) minmax(94px,.74fr) minmax(94px,.74fr) 70px minmax(94px,.74fr) 72px 36px!important;
    column-gap:8px!important;
  }
}

@media(max-width:760px){
  #view[data-guard-page="contracts"] .guard-contract-sort-v456{
    width:100%;
    min-width:0;
    margin:8px 0 0;
  }
}