/* ============================================================================
   MASAR v5 — css5/9-pages-c.css
   Page-specific layout for the FLEET group only:
     .p-fleet   Fleet Registry
     .p-veh     Vehicle dashboard
     .p-crews   Drivers & Crews
     .p-maint   Maintenance & Diagnostics

   Everything here is layout or a small data ornament. Colour comes from the
   tokens in 1-tokens.css or from a data colour passed inline by the page.
   Logical properties only — no left/right — so RTL is the same stylesheet.
   ========================================================================== */

/* ============================== shared, fleet group ====================== */

.p-filters{
  display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;
  padding:var(--s-2) var(--s-3);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
}
.p-filters__l{
  display:inline-flex;align-items:center;gap:6px;
  font:var(--ty-label-sm);color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;
}
.p-filters__chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

.p-cls{display:inline-flex;align-items:center;gap:6px;min-width:0}
.p-cls svg{flex:0 0 auto;color:var(--text-3)}
.p-con{display:inline-flex;align-items:center;gap:7px;min-width:0}
.p-con i{width:8px;height:8px;border-radius:var(--r-full);flex:0 0 auto}

/* a bar and its number in one dense cell */
.p-cell-bar{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.p-cell-bar .m-bar{flex:1 1 auto;min-width:44px}
.p-cell-bar b{font-variant-numeric:tabular-nums;min-width:38px;text-align:end}

.p-acts{display:flex;align-items:center;gap:2px;justify-content:flex-end}
.p-stale{color:var(--crit-fill)}
.p-muted{color:var(--text-3)}
.p-red{color:var(--crit-fill);font-weight:600}
.p-amber{color:var(--warn-fill);font-weight:600}
.p-ar{color:var(--text-3);font-weight:400}
.p-lead{font:var(--ty-body-sm);color:var(--text-2);line-height:1.6;margin-block-end:var(--s-3)}

/* a link inside a table cell: a button, because a row is already clickable */
.m-link-btn{
  font:inherit;color:var(--accent);background:none;border:0;padding:0;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.m-link-btn:hover{color:var(--accent);text-decoration-thickness:2px}

/* label / value pairs, used by every drawer and identity block here */
.p-kvs{display:flex;flex-direction:column;gap:2px}
.p-kv{
  display:flex;align-items:baseline;gap:var(--s-3);
  padding:7px 0;border-bottom:1px solid var(--line-subtle);
}
.p-kv:last-child{border-bottom:0}
.p-kv > span{flex:0 0 42%;font:var(--ty-label-sm);color:var(--text-3)}
.p-kv > b{flex:1 1 auto;font:var(--ty-body-sm);font-weight:550;color:var(--text);min-width:0}
.p-kvs--tight .p-kv{padding:5px 0}
/* THE SPEC SHEET IS A GRID OF FACTS, NOT A PAGE OF SENTENCES.
   Ten label-and-value rows made the rail a column of text taller than the
   map beside it. The same facts as a two-column grid — label whispered
   above its value — read at a glance and take half the height. A fact
   whose value is a sentence (a maker and model, a contractor's full name)
   gets the whole row to itself. */
.p-kvs--grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;overflow:hidden;border-radius:var(--r-sm);
  background:var(--line-subtle);margin-block-start:var(--s-3);
}
.p-kvs--grid .p-kv{
  display:flex;flex-direction:column;gap:1px;align-items:stretch;
  padding:7px 10px;border-bottom:0;background:var(--surface);
}
.p-kvs--grid .p-kv > span{flex:0 0 auto;font:var(--ty-caption);font-size:10px;
  letter-spacing:.03em;text-transform:uppercase;color:var(--text-3)}
.p-kvs--grid .p-kv > b{font:var(--ty-body-sm);font-weight:550;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-kvs--grid .p-kv--wide{grid-column:1 / -1}
.p-kvs--grid .p-kv--wide > b{white-space:normal}
.p-meters{display:flex;flex-direction:column;gap:var(--s-3);margin-block-start:var(--s-4)}
.p-drawer-sec{margin-block-start:var(--s-5)}
.p-drawer-sec h4{font:var(--ty-h3);color:var(--text);margin-block-end:var(--s-2)}

/* counter tiles */
.p-counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s-2)}
.p-count{
  display:flex;flex-direction:column;gap:2px;padding:var(--s-3);
  background:var(--surface-subtle);border-radius:var(--r-sm);
}
.p-count span{font:var(--ty-label-sm);color:var(--text-3)}
.p-count b{font:var(--ty-metric-sm);color:var(--text);font-variant-numeric:tabular-nums}
.p-count i{font:var(--ty-caption);color:var(--text-3);font-style:normal}

/* ============================== fleet registry ========================== */

.p-fleet__chart{margin-block-start:var(--s-3)}

/* ============================== vehicle dashboard ======================= */

.p-veh__top{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--s-4);align-items:stretch}
.p-veh__side{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.p-veh__mapcard{display:flex;flex-direction:column;min-height:520px}
.p-veh__mapcard > .m-card__body{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
/* THE MAP TAKES WHAT THE CARD HAS.
   The card stretches to the height of the identity rail beside it, and the
   map inside was capped at 46vh — so on a normal desktop the card ended
   with a hundred-and-some pixels of white under the strip, which read as a
   half-loaded page. The cap is gone: whatever height the row settles at,
   the picture owns it. */
.p-veh__map{position:relative;inset:auto;flex:1 1 auto;min-height:300px;border-radius:0}

.p-map-ctl{
  display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;
  padding:var(--s-2) var(--s-3);border-block-start:1px solid var(--line);
  background:var(--surface-subtle);
}
.p-play{display:flex;align-items:center;gap:var(--s-2);flex:1 1 280px;min-width:220px}
.p-play__t{font:var(--ty-label);color:var(--text-2);font-variant-numeric:tabular-nums;direction:ltr}
.m-range{
  flex:1 1 auto;min-width:90px;accent-color:var(--accent);
  height:22px;background:transparent;cursor:pointer;
}
.m-range:disabled{opacity:.4;cursor:not-allowed}
.m-range:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-full)}

/* the strip under the map */
.p-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:var(--s-1);padding:var(--s-3);border-block-start:1px solid var(--line);
}
.p-strip__c{display:flex;align-items:flex-start;gap:8px;min-width:0}
.p-strip__c svg{flex:0 0 auto;color:var(--text-3);margin-block-start:2px}
.p-strip__c span{display:block;font:var(--ty-label-sm);color:var(--text-3)}
.p-strip__c b{display:block;font:var(--ty-body);font-weight:600;color:var(--text)}
.p-strip__c i{display:block;font:var(--ty-caption);color:var(--text-3);font-style:normal}

/* identity block */
.p-ident__head{display:flex;align-items:center;gap:var(--s-3);margin-block-end:var(--s-3)}
.p-ident__mark{
  width:42px;height:42px;border-radius:var(--r-md);display:grid;place-items:center;flex:0 0 auto;
  background:color-mix(in srgb,var(--vc) 14%,transparent);color:var(--vc);
}
.p-ident__x{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.p-ident__x b{font:var(--ty-h2);color:var(--text)}
.p-ident__alarms{display:flex;flex-direction:column;gap:6px;margin-block-start:var(--s-3)}

/* the four instruments */
.p-insts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.p-inst{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-width:0}
.p-inst__t{font:var(--ty-label-sm);color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.p-inst__f{font:var(--ty-caption);color:var(--text-2);font-style:normal;line-height:1.4}

/* numbered stops on the embedded map */
.p-stop{
  width:24px;height:24px;border-radius:var(--r-full);display:grid;place-items:center;
  font:600 11px/1 var(--font);font-variant-numeric:tabular-nums;
  background:var(--surface);color:var(--text-2);
  border:2px solid var(--text-3);box-shadow:var(--sh-map,0 1px 3px rgba(0,0,0,.3));cursor:pointer;
}
.p-stop--done{background:var(--ok-fill);color:#fff;border-color:var(--ok-fill)}
.p-stop--current{background:var(--accent);color:var(--accent-on);border-color:var(--accent);transform:scale(1.18)}
.p-stop--skipped{background:var(--surface);color:var(--crit-fill);border-color:var(--crit-fill);border-style:dashed}
.p-stops{margin-block-start:var(--s-3);max-height:340px;overflow:auto}

/* CAN / telematics grid */
.p-cans{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line-subtle)}
.p-can{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2);
  padding:8px var(--s-3);background:var(--surface)}
.p-can span{font:var(--ty-label-sm);color:var(--text-3)}
.p-can b{font:var(--ty-body-sm);font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.p-can--warn b{color:var(--warn-fill)}
.p-can--crit b{color:var(--crit-fill)}

/* ============================== communication =========================== */

.p-comm{display:flex;flex-direction:column;gap:var(--s-4)}
.p-comm__head{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.p-comm__link{display:flex;align-items:center;gap:8px;font:var(--ty-body-sm);color:var(--text-2)}
.p-comm__link span{color:var(--text-3);font:var(--ty-caption)}
.p-comm__pane{display:flex;flex-direction:column;gap:var(--s-3)}
.p-comm__call{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  padding:var(--s-3);background:var(--surface-subtle);border-radius:var(--r-sm)}
.p-comm__call .m-ent{flex:1 1 auto}
.p-comm__row{display:flex;gap:var(--s-2);flex-wrap:wrap}
.p-comm__ptt{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s-3);
  padding:var(--s-3);background:var(--surface-subtle);border-radius:var(--r-sm)}
.p-comm__ptt .p-kv{border-bottom:0;padding:0;flex-direction:column;gap:2px}
.p-comm__ptt .p-kv > span{flex:0 0 auto}
.p-ptt{touch-action:none;user-select:none}
.p-comm__live{display:flex;align-items:center;gap:8px;font:var(--ty-label);color:var(--crit-fill)}
.p-comm__quick{display:flex;gap:6px;flex-wrap:wrap}
.p-comm__cmds,.p-comm__jobs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s-2)}
.p-cmd,.p-job{
  display:flex;align-items:center;gap:var(--s-2);text-align:start;
  padding:var(--s-3);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);cursor:pointer;color:var(--text);
}
.p-cmd:hover,.p-job:hover{border-color:var(--accent);background:var(--surface-sunken)}
.p-cmd b,.p-job b{display:block;font:var(--ty-label);color:var(--text)}
.p-cmd span,.p-job span{display:block;font:var(--ty-caption);color:var(--text-2);flex:1 1 auto}
.p-job i{display:block;font:var(--ty-caption);color:var(--text-3);font-style:normal}
.p-cmd svg,.p-job svg{flex:0 0 auto;color:var(--text-3);margin-inline-start:auto}
.p-comm__logwrap h4{font:var(--ty-h3);color:var(--text);margin-block-end:var(--s-2)}
.p-comm__logwrap h4 i{color:var(--text-3);font-style:normal;font-weight:400}
.p-comm__log{display:flex;flex-direction:column;max-height:300px;overflow:auto}
.p-comm__le{display:flex;align-items:flex-start;gap:var(--s-2);padding:8px 0;
  border-bottom:1px solid var(--line-subtle)}
.p-comm__le-ic{color:var(--text-3);margin-block-start:2px;flex:0 0 auto}
.p-comm__le-x{flex:1 1 auto;min-width:0}
.p-comm__le-x b{display:block;font:var(--ty-body-sm);font-weight:550;color:var(--text)}
.p-comm__le-x span{display:block;font:var(--ty-caption);color:var(--text-3)}
.p-comm__le-x em{display:block;font:var(--ty-caption);color:var(--text-2);font-style:italic}
.p-commbar{display:flex;gap:6px;flex-wrap:wrap;margin-block-start:var(--s-3)}

/* ============================== maintenance ============================= */

.p-risks{display:flex;flex-direction:column;gap:var(--s-3)}
.p-risk{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.p-risk__h{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3);
  background:var(--surface-subtle);border-block-end:1px solid var(--line)}
.p-risk__h .m-ent{flex:1 1 auto}
.p-risk__b{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-3)}
.p-risk__ev{display:flex;gap:var(--s-2);flex-wrap:wrap}
.p-risk__e{display:inline-flex;align-items:baseline;gap:6px;padding:4px 9px;
  background:var(--surface-subtle);border-radius:var(--r-full);font:var(--ty-caption);color:var(--text-2)}
.p-risk__e b{font:var(--ty-label-sm);color:var(--text)}
.p-risk__e i{color:var(--text-3);font-style:normal;font-variant-numeric:tabular-nums}
.p-risk__f{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;
  font:var(--ty-body-sm);color:var(--text-2)}
.p-risk__f b{color:var(--text);font-variant-numeric:tabular-nums}

.p-bays{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s-2)}
.p-bay{display:flex;flex-direction:column;gap:3px;padding:var(--s-3);min-height:104px;
  border:1px dashed var(--line);border-radius:var(--r-sm);background:var(--surface-subtle)}
.p-bay.is-busy{border-style:solid;border-color:var(--warn-line,var(--line));
  background:var(--surface);cursor:pointer}
.p-bay.is-busy:hover{border-color:var(--accent)}
.p-bay__n{font:var(--ty-label-sm);color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.p-bay b{font:var(--ty-h3);color:var(--text)}
.p-bay__j{font:var(--ty-caption);color:var(--text-2)}
.p-bay i{font:var(--ty-caption);color:var(--text-3);font-style:normal}
.p-bay__free{font:var(--ty-body-sm);color:var(--text-3);margin-block:auto}

/* ============================== responsive ============================== */

@media (max-width:1280px){
  .p-veh__top{grid-template-columns:minmax(0,1fr) 330px}
}
@media (max-width:1100px){
  .p-veh__top{grid-template-columns:minmax(0,1fr)}
  .p-veh__mapcard{min-height:440px}
  .p-insts{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  .p-insts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-kv{flex-direction:column;gap:2px}
  .p-kv > span{flex:0 0 auto}
}

/* ============================== print =================================== */

@media print{
  .p-filters,.p-map-ctl,.p-commbar,.p-acts{display:none !important}
  .p-veh__top{grid-template-columns:minmax(0,1fr)}
}