/* GC Moped Rentals tab — works in both themes (uses the panel's CSS variables).
   Tables never scroll sideways: fixed layout + wrapping, and below 760px every row
   becomes a stacked card with the column name from data-l. */
.mp .mp-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:4px 2px 12px}
.mp .mp-head .sechead{margin:0}
.mp .mp-subs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mp .mp-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 2px 10px}
.mp .mp-warn{margin:0 0 12px;padding:9px 12px;font-size:13px;line-height:1.45}
.mp .mp-small,.mp-modal .mp-small{font-size:11.5px}
.mp .panel{overflow-x:visible}
.mp table.mp-t{table-layout:fixed;width:100%}
.mp table.mp-t th,.mp table.mp-t td{white-space:normal;overflow-wrap:anywhere;vertical-align:top}
.mp table.mp-set td:first-child{width:46%}
.mp table.mp-set input,.mp table.mp-set .dmyw{width:100%;max-width:340px}
.mp tr.mp-miss td:first-child{color:var(--amber);font-weight:600}
.mp tr.mp-miss td:first-child::before{content:"● ";color:var(--amber)}
.mp .cards .kpi{min-width:0}
.mp-modal{max-width:720px}
.mp-modal .mp-val{font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.mp-modal .mp-docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.mp-modal .mp-doc img{display:block;width:100%;max-height:150px;object-fit:cover;border:1px solid var(--line)}
.mp-modal .modal-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.mp-modal .modal-actions [data-mpclose]{margin-right:auto}
@media(max-width:760px){
  .mp table.mp-t thead{display:none}
  .mp table.mp-t,.mp table.mp-t tbody,.mp table.mp-t tr,.mp table.mp-t td{display:block;width:100%!important}
  .mp table.mp-t tr{padding:8px 4px;border-bottom:1px solid var(--line)}
  .mp table.mp-t td{border:0;padding:3px 8px}
  .mp table.mp-t td[data-l]:not([data-l=""])::before{content:attr(data-l);display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .mp table.mp-set td:first-child{width:100%}
}
.mp .mp-warn a{color:var(--brand);font-weight:600}
