/* Professional, compact rider directory. Loaded last to unify legacy styles. */
#ridersView .riders-grid{
  grid-template-columns:repeat(3,minmax(250px,1fr))!important;
  gap:12px!important;
}
#ridersView .rider-card{
  position:relative;
  display:flex!important;
  min-width:0;
  padding:12px!important;
  flex-direction:column;
  gap:8px!important;
  overflow:hidden;
  border:1px solid #dce7e9!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,#fff 0%,#fbfdfd 100%)!important;
  box-shadow:0 8px 22px rgba(24,55,66,.08)!important;
  color:#173443;
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif!important;
}
#ridersView .rider-card::before{
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:#1c8c6a;
  content:"";
}
#ridersView .rider-card.is-off::before{background:#b7c4c8}
#ridersView .rider-card.is-off{opacity:.78!important}
#ridersView .rider-card__top{align-items:center!important;gap:8px!important}
#ridersView .rider-card__person{min-width:0;gap:8px!important;flex-wrap:nowrap!important}
#ridersView .rider-card .avatar{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  font-size:12px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
#ridersView .rider-card__person>div:last-child{min-width:0}
#ridersView .rider-card__name{
  overflow:hidden;
  color:#143747!important;
  font-family:inherit!important;
  font-size:14px!important;
  font-weight:850!important;
  line-height:1.1!important;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#ridersView .rider-card__phone{margin-top:3px!important;color:#71858e!important;font-size:12px!important;line-height:1.1!important}
#ridersView .rider-card__number{
  padding:4px 7px;
  border-radius:999px;
  background:#edf3f5;
  color:#47636f!important;
  font-size:11px!important;
  font-weight:850!important;
  white-space:nowrap;
}
#ridersView .vehicle-label{
  margin-left:auto!important;
  padding:3px 6px!important;
  border-radius:999px!important;
  background:#f2f6f7!important;
  color:#526c77!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1!important;
  white-space:nowrap;
}
#ridersView .rider-live-state{
  display:flex!important;
  min-height:0!important;
  margin:0!important;
  padding:6px 8px!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  border:1px solid #dce8e9!important;
  border-radius:9px!important;
  background:#f5f9f9!important;
  font-size:11px!important;
  line-height:1.15!important;
}
#ridersView .rider-live-state strong{color:#285765;font-size:11px!important;letter-spacing:.03em}
#ridersView .rider-live-state span{overflow:hidden;color:#71858e;white-space:nowrap;text-overflow:ellipsis}
#ridersView .rider-card__status{
  width:max-content;
  max-width:100%;
  min-height:0!important;
  margin:0!important;
  padding:5px 8px!important;
  border:1px solid #e2eaec;
  border-radius:999px!important;
  background:#f7f9fa!important;
  color:#536b75!important;
  font-size:11px!important;
  font-weight:750;
  line-height:1!important;
}
#ridersView .rider-card__footer{
  display:grid!important;
  grid-template-columns:1fr auto;
  gap:8px!important;
  margin-top:0;
  padding-top:8px!important;
}
#ridersView .card-action,
#ridersView .rider-code-actions button,
#ridersView .rider-contact-box>button{
  min-height:32px!important;
  margin:0!important;
  padding:6px 9px!important;
  border:1px solid #cbdadd!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#234b5a!important;
  font-family:inherit!important;
  font-size:11px!important;
  font-weight:850!important;
  line-height:1.1!important;
  text-align:center;
  cursor:pointer;
}
#ridersView .card-action:hover,
#ridersView .rider-code-actions button:hover,
#ridersView .rider-contact-box>button:hover{border-color:#78aa9d!important;background:#f1f8f5!important}
#ridersView .rider-card__turn{gap:6px!important;white-space:nowrap}
#ridersView .rider-card__turn span{color:#657b84!important;font-size:11px!important;font-weight:750}
#ridersView .invite-box{
  display:grid!important;
  grid-column:auto!important;
  gap:6px!important;
  margin:0!important;
  padding:8px!important;
  border:1px solid #e0e9eb!important;
  border-radius:10px!important;
  background:#f8fbfb!important;
}
#ridersView .rider-code-box{grid-template-columns:1fr 1fr!important}
#ridersView .rider-code-box>strong:first-child,
#ridersView .rider-code-box>small:first-of-type{
  display:block;
  min-width:0;
  padding:6px 7px;
  border-radius:7px;
  background:#fff;
  color:#294d5a;
  font-size:11px!important;
  font-weight:800;
  line-height:1.2;
}
#ridersView .rider-code-box>small:nth-of-type(2){grid-column:1/-1;color:#71858e;font-size:10px!important;line-height:1.2}
#ridersView .rider-code-value{
  grid-column:1/-1;
  padding:7px 9px!important;
  border:1px dashed #adc4ca;
  border-radius:8px!important;
  background:#fff!important;
  color:#153f50!important;
  font-size:12px!important;
  letter-spacing:.09em!important;
  text-align:center;
}
#ridersView .rider-code-actions{display:grid!important;grid-column:1/-1;grid-template-columns:1fr 1fr;gap:6px!important}
#ridersView .rider-contact-box{grid-template-columns:1fr 1fr!important}
#ridersView .whatsapp-invite{
  display:flex!important;
  grid-column:1/-1;
  min-height:34px!important;
  padding:6px 8px!important;
  align-items:center!important;
  gap:7px!important;
  border-radius:8px!important;
  background:#187b58!important;
  box-shadow:none!important;
}
#ridersView .whatsapp-invite .whatsapp-icon{width:22px!important;height:22px!important;min-width:22px;font-size:13px!important}
#ridersView .whatsapp-invite span:nth-child(2){min-width:0}
#ridersView .whatsapp-invite small{font-size:8px!important;line-height:1!important}
#ridersView .whatsapp-invite strong{font-size:12px!important;line-height:1.1!important;white-space:normal!important}
#ridersView .whatsapp-invite b{font-size:12px!important}
#ridersView .rider-contact-box>button{grid-column:1/-1;background:#eef5f7!important}
#ridersView .rider-contact-box>strong{
  display:block!important;
  grid-column:1/-1;
  margin:0!important;
  padding:8px 10px!important;
  border:1px solid #b8dfd0;
  border-radius:8px;
  background:#eaf8f1;
  color:#126344!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1.15!important;
  text-align:center;
}

/* Customer history follows the same professional visual system. */
#customersView .customer-history{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))!important;gap:12px!important}
#customersView .customer-card{position:relative;display:flex;min-width:0;padding:15px!important;flex-direction:column;overflow:hidden;border:1px solid #dce7e9!important;border-radius:15px!important;background:linear-gradient(180deg,#fff,#fbfdfd)!important;box-shadow:0 8px 22px rgba(24,55,66,.08)!important;font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif!important}
#customersView .customer-card::before{position:absolute;inset:0 auto 0 0;width:4px;background:#168354;content:""}
#customersView .customer-card>div:first-child{align-items:flex-start!important;gap:10px!important}
#customersView .customer-card>div:first-child strong{color:#143747;font-size:15px;line-height:1.15}
#customersView .customer-card>div:first-child a{font-size:12px;white-space:nowrap}
#customersView .customer-stats{margin:11px 0!important;padding:9px 10px!important;border:1px solid #e0eaec;border-radius:9px!important;background:#f3f8f8!important}
#customersView .customer-stats span{font-size:11px;color:#526b75}
#customersView .customer-stats b{color:#173f50;font-size:13px}
#customersView .customer-card>p{margin:0 0 6px;color:#334f5b;font-size:11px;line-height:1.4}
#customersView .customer-card>small{min-height:0!important;color:#71858e;font-size:10px;line-height:1.35}
#customersView .customer-card-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:7px!important;margin-top:auto!important;padding-top:12px}
#customersView .customer-card-actions button,#customersView .customer-edit{min-height:34px!important;margin:0!important;padding:6px 8px!important;border-radius:8px!important;font-family:inherit!important;font-size:10px!important;font-weight:850!important}
#customersView .customer-edit{margin-top:9px!important}
#customersView .customer-coupon-badge{padding:8px 9px!important;font-size:10px!important}
@media(max-width:620px){#customersView .customer-history{grid-template-columns:1fr!important}#customersView .customer-card{padding:13px!important}}
@media(max-width:1100px){#ridersView .riders-grid{grid-template-columns:repeat(2,minmax(240px,1fr))!important}}
@media(max-width:760px){
  #ridersView .riders-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  #ridersView .rider-card{display:flex!important;padding:9px!important;gap:6px!important}
  #ridersView .rider-card__footer{grid-template-columns:1fr!important}
  #ridersView .rider-card__turn{justify-content:space-between}
}
@media(max-width:560px){
  #ridersView .riders-grid{grid-template-columns:1fr!important}
  #ridersView .rider-card{padding:10px!important}
  #ridersView .rider-card__footer{grid-template-columns:1fr auto!important}
}