/* R19.22 — checkbox and option-row normalization for every customer/admin page. */
:where(.customer-app,.admin-app) input[type="checkbox"]{
  box-sizing:border-box!important;
  display:inline-block!important;
  flex:0 0 20px!important;
  inline-size:20px!important;
  block-size:20px!important;
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  min-height:20px!important;
  max-width:20px!important;
  max-height:20px!important;
  margin:2px 0 0!important;
  padding:0!important;
  vertical-align:top!important;
  accent-color:#008c98;
}
:where(.customer-app,.admin-app) label.check,
:where(.customer-app,.admin-app) label:has(>input[type="checkbox"]){
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:9px!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:24px!important;
  margin-inline:0;
  line-height:1.45!important;
  white-space:normal!important;
  overflow:visible!important;
}
:where(.customer-app,.admin-app) label.check>input[type="checkbox"],
:where(.customer-app,.admin-app) label:has(>input[type="checkbox"])>input[type="checkbox"]{order:0!important}
:where(.customer-app,.admin-app) label.check>:not(input),
:where(.customer-app,.admin-app) label:has(>input[type="checkbox"])>:not(input){min-width:0!important;max-width:100%!important}
:where(.customer-app,.admin-app) input[type="checkbox"]:focus-visible{outline:3px solid rgba(0,140,152,.28)!important;outline-offset:3px!important}
:where(.customer-app,.admin-app) input[type="checkbox"]:disabled{cursor:not-allowed;opacity:.55}

@media(max-width:760px){
  .customer-app .bf-addon{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:start!important;gap:8px 12px!important;width:100%!important;max-width:100%!important;padding:15px 0!important}
  .customer-app .bf-addon>div{grid-column:1!important;min-width:0!important;max-width:100%!important}
  .customer-app .bf-addon>label{grid-column:2!important;align-self:start!important;justify-self:end!important;min-width:0!important;max-width:112px!important;margin:0!important}
  .customer-app .bf-addon>label.check{display:inline-flex!important;width:auto!important;padding:2px 0 2px 6px!important;white-space:nowrap!important}
  .customer-app .bf-addon>img{grid-column:1!important;width:64px!important;max-width:64px!important;height:54px!important;object-fit:cover!important}
  .customer-app .bf-addon:has(>img){grid-template-columns:64px minmax(0,1fr)!important}
  .customer-app .bf-addon:has(>img)>div{grid-column:2!important}
  .customer-app .bf-addon:has(>img)>label{grid-column:1/-1!important}
  :where(.customer-app,.admin-app) :where(.custom-activity-grid,.setting-checks,.boat-master-days,.boat-weekdays) label{min-width:0!important;max-width:100%!important}
  .admin-app .addon-check-grid label.check,.admin-app .addon-check{width:100%!important}
}
@media(max-width:360px){.customer-app .bf-addon{gap:7px 9px!important}.customer-app .bf-addon>label{max-width:100px!important}}