/* AJEROSA_WEB_R4 (round 4 GPS website) - loaded after round3.css */
/* G38: the welcome card's speaker (mute) sits beside Read aloud; muted shows red */
.r3-welcome-top .r4-mute{margin-left:-2px}
.r4-mute[aria-pressed="true"]{border-color:rgba(255,120,110,.55);background:rgba(255,90,80,.14);color:#ffb4a8}
/* G39 (AJEROSA_WEB_R4_TILE_SEAMS): no white grid lines between satellite tiles - on every map of the website.
   1) each tile is drawn 1 px larger so neighbours overlap (map-engine.js AJEROSA_WEB_R4_TILE_SEAMS: fractional
      transforms, browser zoom and the tilted view leave a sub-pixel gap otherwise); 2) the app's own tile rules (outline + hidden back face); 3) a dark map
      background, so any gap that is left can never show white. */
.leaflet-container{background:#0f1a20}
.leaflet-container .leaflet-tile-container img.leaflet-tile{outline:1px solid transparent;backface-visibility:hidden;-webkit-backface-visibility:hidden;image-rendering:auto}
.leaflet-container .leaflet-tile-container{backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* G43: the Jobs / Work button is compact, not a full-width bar */
.r4-compact{width:auto!important;align-self:flex-start;justify-self:start;min-height:34px;padding:7px 14px;font-size:13px;margin-top:8px}
/* G44: the app's Mileage chart - green bars, the km above each bar, the date below, a taller chart */
.mileage-chart,.r3-mileage-chart{height:280px;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(25px,1fr));align-items:end!important;gap:8px}
.mileage-chart .mileage-column{height:100%;display:flex!important;flex-direction:column!important;align-items:center;justify-content:flex-end!important;gap:5px}
.mileage-chart .mileage-column strong{order:1;font-size:11px;color:#dce6e7}
.mileage-chart .mileage-column i{order:2;display:block;width:min(32px,72%);min-height:2px;background:linear-gradient(180deg,#28d17e,#169d60)!important;border-radius:5px 5px 0 0;max-height:calc(100% - 40px)}
.mileage-chart .mileage-column span{order:3;font-size:10px;color:#9cafb6}
/* G45: Hour meter - a smaller "Current Fleet meter" card, then the four small cards in ONE even row */
.r4-hour-value{padding:10px 14px;gap:2px;max-width:340px}
.r4-hour-value strong{font-size:20px}
.asset-feature-metrics.r4-four{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px}
@media (max-width:760px){.asset-feature-metrics.r4-four{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* G51: the photo choice on Create standalone asset */
.r4-photo-field{display:grid;gap:8px}
.r4-photo-preview{min-height:64px;display:grid;place-items:center;padding:10px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:12px;text-align:center}
.r4-photo-preview img{max-width:180px;max-height:120px;border-radius:10px;object-fit:cover}
.r4-photo-actions{display:flex;gap:8px;flex-wrap:wrap}
/* G53 / P1: command replies - Dismiss per reply, Clear all */
.r4-replies-head{display:flex;justify-content:space-between;align-items:center;margin:4px 0 6px}
.r3-command-row{position:relative}
.r3-command-row .r4-dismiss{position:absolute;top:6px;right:6px;width:26px;height:26px;padding:0;line-height:1}
.r4-remote-card .asset-command-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.r4-remote-grid{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
.asset-command-grid button.danger:not(:disabled){border-color:rgba(255,100,90,.5)}
.r3-command-row:has(.r4-dismiss){padding-right:40px}