.driver-avatar { --driver-avatar-size: 44px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--driver-avatar-size); width: var(--driver-avatar-size); height: var(--driver-avatar-size); min-height: 0; overflow: hidden; border-radius: 50%; background: #edf1fb; color: #314b88; font: 600 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.driver-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.driver-directory-filter { display: flex; gap: 6px; width: fit-content; padding: 4px; margin: 0 0 16px; border-radius: 12px; background: #eef2f8; }
.driver-directory-filter button { min-width: 96px; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 9px; background: transparent; color: #718095; font-size: 13px; font-weight: 600; }
.driver-directory-filter button[aria-pressed="true"] { background: #fff; color: #2c4786; box-shadow: 0 1px 5px #26385312; }
#driver-list .driver-card { display: flex; align-items: flex-start; gap: 14px; height: auto; min-height: 108px; overflow: visible; padding: 18px; text-align: left; border: 1px solid #e6eaf2; border-radius: 14px; background: #fff; color: #273851; }
#driver-list .driver-card > .driver-card__body { display: grid; min-width: 0; gap: 6px; flex: 1; }
#driver-list .driver-card strong { display: block; font-size: 16px; line-height: 1.35; font-weight: 600; }
#driver-list .driver-card small { display: block; color: #768398; font-size: 12px; line-height: 1.4; font-weight: 400; white-space: normal; overflow-wrap: anywhere; }
#driver-list .driver-card .driver-card__jobs { color: #4b628c; }
#driver-list .driver-card .driver-card__state { font-style: normal; font-size: 11px; font-weight: 500; color: #a07639; }
#driver-list .driver-card--inactive { background: #fafbfc; }
#driver-list { grid-auto-rows: max-content; align-content: start; }
.driver-photo-field { display: flex; align-items: center; gap: 16px; padding: 2px 0 8px; }
.driver-dialog .driver-new-vehicle { min-width: 0; grid-column: 1 / -1; margin: 0; padding: 18px; border: 1px solid #dce4f3; border-radius: 14px; background: #f7f9fe; display: grid; gap: 14px; }
.driver-new-vehicle legend { padding: 0 6px; color: #203880; font-weight: 600; }
.driver-new-vehicle .driver-vehicle-types, .driver-new-vehicle .driver-vehicle-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.driver-new-vehicle .driver-vehicle-details { align-items: end; }
.driver-dialog .driver-vehicle-types label { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; margin: 0; padding: 12px; border: 1px solid #cbd6eb; border-radius: 10px; background: #fff; color: #203880; cursor: pointer; }
.driver-dialog .driver-vehicle-types label:has(input:checked) { background: #203880; border-color: #203880; color: #fff; }
.driver-dialog .driver-vehicle-types input { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; margin: 0; padding: 0; accent-color: #203880; }
.driver-dialog .driver-vehicle-types label:focus-within { outline: 3px solid #8babef; outline-offset: 2px; }
.driver-new-vehicle .field-help { margin: 0; }
@media (max-width: 360px) { .driver-new-vehicle .driver-vehicle-details { grid-template-columns: minmax(0, 1fr); } }
.driver-photo-field__actions { flex: 1; min-width: 0; }
.driver-photo-field__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.driver-dialog .driver-photo-upload, .driver-dialog #driver-photo-remove { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 12px; margin: 0; border: 1px solid #dfe5ef; border-radius: 9px; background: #fff; color: #35518b; font-size: 12px; font-weight: 550; cursor: pointer; }
.driver-dialog #driver-photo-input { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; border: 0; clip-path: inset(50%); overflow: hidden; }
.driver-photo-upload:focus-within { outline: 2px solid #466ac0; outline-offset: 3px; }
.driver-dialog #driver-photo-status { margin: 7px 0 0; min-height: 0; font-size: 11px; line-height: 1.4; color: #7a879a; }
.driver-dialog #driver-password-section { padding: 14px; border: 1px solid #e4e9f2; border-radius: 11px; background: #f8faff; }
.driver-dialog #driver-password-section summary { min-height: 44px; align-content: center; cursor: pointer; color: #496083; font-size: 13px; font-weight: 550; }
.driver-dialog #driver-password-section[open] summary { margin-bottom: 12px; }
.driver-dialog #driver-reactivate-field { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid #d9e5dc; border-radius: 11px; background: #f1f8f3; }
.driver-dialog #driver-reactivate { width: 20px; height: 20px; min-height: 20px; flex: 0 0 20px; padding: 0; margin: 0; accent-color: #284986; }
.driver-dialog #driver-reactivate-field strong { display: block; font-size: 13px; font-weight: 550; color: #345b45; }
.driver-dialog #driver-reactivate-field small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: #6f8376; }
.driver-dialog .driver-password-controls button { min-height: 44px; }
.driver-dialog .icon-button { flex-basis: 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
@media (max-width: 480px) { #driver-list .driver-card { padding: 15px; gap: 12px; } .driver-dialog .driver-photo-field { gap: 12px; } }