.fleet-editor-page{border:1px solid transparent;border-radius:20px;background:var(--card,#f0f2f5);padding:28px;min-width:0}
:root .fleet-editor-page :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){background:#fff}
.fleet-editor-page form{margin:0;max-width:none}
.fleet-editor-page .form-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fleet-editor-page :is(input,select,textarea){min-width:0;max-width:100%}
.fleet-editor-page .modal-head>button{width:auto;min-width:70px;height:auto;min-height:44px;padding:8px 16px;font-size:16px}
.fleet-editor-page .modal-actions{margin-top:24px;border-top:1px solid var(--line);padding-top:20px}
.fleet-editor-page .vehicle-image-preview{display:grid;grid-template-columns:minmax(0,1fr) 240px;align-items:center;margin-bottom:24px}
:root .fleet-editor-page .vehicle-image-preview{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding-bottom:20px}
.fleet-editor-page .vehicle-image-preview-frame{height:140px}
.fleet-editor-page .vehicle-image-preview-frame>img{object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.04)}
.vehicle-image-preview-copy #changeVehiclePhoto{align-self:flex-start;min-height:44px;margin-top:8px;padding:8px 16px;color:var(--blue);background:#fff;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-weight:700;font-size:14px}
.vehicle-image-preview-copy #changeVehiclePhoto:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.vehicle-image-preview-copy small{font-size:12px;line-height:1.6;color:var(--muted);overflow-wrap:anywhere}
.vehicle-image-preview-copy #vehiclePhotoStatus{color:var(--blue)}
@media(max-width:1050px){
 .fleet-editor-page .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:540px){
 .fleet-editor-page{padding:18px}
 .fleet-editor-page .form-grid,.fleet-editor-page .vehicle-image-preview{grid-template-columns:minmax(0,1fr)}
 .fleet-editor-page .form-grid .wide{grid-column:1/-1}
 .fleet-editor-page .modal-actions{display:flex;gap:10px;flex-wrap:wrap}
 .fleet-editor-page .modal-actions button{flex:1;min-height:44px}
}
/* The delete button is the first action of the car page. The shared button rules (apple-buttons.css, admin-modal-actions.css)
   out-rank a class selector and paint it grey like Cancel, so an id restores the warning colours; the auto margin keeps it
   apart from Cancel and Save. */
#unitDialog .modal-actions>#deleteUnitButton{color:#b42318;background:#fff1f0;border-color:#f4c7c3;margin-inline-end:auto}
#unitDialog .modal-actions>#deleteUnitButton:not(:disabled):hover{background:#ffe4e1;border-color:#eba9a3}
/* On a phone every editor button grows to fill the row, which squeezed "حذف السيارة" onto two lines beside Cancel
   and Save; it gets a row of its own below them instead, as the calendar's danger action does. */
@media(max-width:540px){
 #unitDialog .modal-actions>#deleteUnitButton{flex-basis:100%;order:1;margin-inline-end:0}
}

#unitDialog .unit-editor-heading { gap:24px; align-items:center; }
#unitDialog .unit-editor-heading > div { flex:1; min-width:0; }
#unitCarPhoto { display:block; width:240px; max-width:40%; aspect-ratio:8/5; object-fit:cover; border-radius:16px; flex-shrink:0; }
@media(max-width:540px) {
 #unitDialog .unit-editor-heading { flex-wrap:wrap; gap:16px; }
 #unitCarPhoto { width:100%; max-width:100%; }
 #unitDialog .unit-editor-heading > div { flex-basis:100%; }
}