` for its form. On a 360px phone
* that's ~170px per column — too tight for label + input. The grids
* are inline-styled (React style prop), so we override with !important.
* Targeting the attribute selector matches React's serialization of
* `gridTemplateColumns: "1fr 1fr"` → `grid-template-columns: 1fr 1fr`.
* ============================================ */
@media (max-width: 640px) {
.modal-body div[style*="grid-template-columns"][style*="1fr 1fr"] {
grid-template-columns: 1fr !important;
}
/* Same applies to 3-col grids inside modals (a couple of inline
* "1fr 1fr 1fr" usages exist for tighter layouts that also crush). */
.modal-body div[style*="grid-template-columns"][style*="1fr 1fr 1fr"] {
grid-template-columns: 1fr !important;
}
}
/* ============================================
* ≤480px — Stack KPI + smallest tweaks
* ============================================ */
@media (max-width: 480px) {
.topbar {
padding: 8px 10px;
}
.topbar-title { font-size: 14px; }
.topbar-tools { gap: 4px; }
/* KPI single column on the smallest screens */
.kpi-strip {
grid-template-columns: 1fr;
gap: 8px;
}
/* Hide the live-indicator pill text on the tightest screens — the
* green dot alone is enough. We use a pseudo on the parent to keep
* the dot visible but hide the label text. */
.topbar-tools > div[title] {
font-size: 0; /* hides the text node */
padding: 3px;
}
.topbar-tools > div[title] span {
/* The dot stays visible because it's a span with explicit width/height */
font-size: initial;
}
}
/* ============================================
* ≤720px — Page-level responsive fixes
* --------------------------------------------
* Every list page (Drivers / Fleet / Orders / Stations / Customers /
* Invoices / Maintenance / Fuel) shares a common markup:
*
*
*
*
← actions
* [Filter] [Export] [+Add]
*
*
*
* On a 360-414px phone the actions row outgrows the available width,
* collides with the title, and the whole section becomes unreadable.
* Below we let the actions wrap onto their own line and stretch each
* button to share the row evenly. Same trick for the inline KPI grids
* (`gridTemplateColumns: "repeat(4, 1fr)"`) — squeeze them to 2 cols on
* phones and 1 col on the smallest viewports.
*
* All selectors target attributes/classes that already exist in the
* React markup — no JSX changes required for the 8 pages to react.
* ============================================ */
@media (max-width: 720px) {
/* (1) Section header: drop actions onto a second row when needed.
* Stretching width:100% + flex-wrap on the action container makes
* the buttons distribute evenly. Each button gets `flex:1` so 3
* equal buttons fit comfortably side-by-side.
*/
.h-row {
flex-wrap: wrap;
align-items: flex-start;
gap: 12px;
}
.h-row > div:last-child {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-start;
}
.h-row > div:last-child .btn {
flex: 1 1 0;
min-width: 0;
justify-content: center;
/* Trim padding so 3 buttons + Arabic labels still fit on a 360px screen */
padding: 8px 10px;
font-size: 12px;
}
/* (2) Inline 4/5-col KPI grids → 2 cols on phone.
* React inlines style={{gridTemplateColumns:"repeat(4, 1fr)"}} which
* CSS sees as `repeat(4` in the value. Attribute-substring selector
* matches both 4-col and 5-col variants used by Drivers/Reports.
*/
.page-pad div[style*="repeat(4"],
.page-pad div[style*="repeat(5"] {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
/* (3) Search row: ensure input grows + counter pill drops below if
* space runs out. The existing flex container has no flex-wrap,
* so set it here. The counter span gets a sensible whitespace.
*/
.page-pad > div[style*="display:flex"][style*="marginBottom"][style*="alignItems"] {
flex-wrap: wrap;
}
.page-pad input[type="text"],
.page-pad input[type="search"] {
min-width: 0;
flex: 1 1 200px;
}
/* (4) Tables: tighter cells + ellipsis on long IDs/notes
* The .table-wrap (parent .panel > overflow:auto div) already
* scrolls; this just trims wasted width inside.
*/
.table { font-size: 12px; }
.table th, .table td { padding: 8px 10px; }
.table td { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
/* Driver-row sub-line ("drv_xxx · صباحي") — keep the shift label,
* shrink the id so it doesn't wrap to two lines. */
.table td > div > div:nth-child(2) {
font-size: 10px;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
}
/* (5) Live-map header chips (the "بث مباشر • الرياض" pill, [إيقاف]
* button, the All/Moving/Stopped tab strip, and the active-orders
* dropdown trigger). The map container itself already shrinks; we
* just let the .map-pill chips in the .map-header wrap above the
* map instead of overlapping it.
*/
.map-header {
flex-wrap: wrap !important;
gap: 6px !important;
padding: 8px 10px !important;
}
.map-header .map-pill {
font-size: 10px !important;
padding: 3px 6px !important;
}
/* The All/Moving/Idle/Break filter tabs sit inside one .map-pill.
* Let the buttons wrap inside that container so all 4 stay reachable
* even when the pill itself takes the full row. */
.map-header .map-pill > button {
padding: 3px 6px !important;
font-size: 10px !important;
}
/* (6) Map overlays — GPS-status strip + legend.
* Both are absolute-positioned over the Leaflet canvas. On a 360px
* phone they cover most of the actual map. Promote them to flow
* under the map (still inside the .map-card) so the map stays
* visible. The legend stays compact horizontally; the GPS strip
* wraps if 3 cards don't fit on one row.
*/
.map-card .map-gps-strip,
.map-card .map-legend {
position: static !important;
margin: 8px 10px 0 !important;
}
.map-card .map-gps-strip {
flex-wrap: wrap;
pointer-events: auto;
}
.map-card .map-gps-strip .gps-card {
min-width: 70px !important;
flex: 1 1 90px;
padding: 6px 8px !important;
}
.map-card .map-gps-strip .gps-card strong { font-size: 14px !important; }
.map-card .map-legend {
flex-direction: row !important;
flex-wrap: wrap;
padding: 8px 10px !important;
font-size: 10px !important;
gap: 8px !important;
margin-bottom: 8px !important;
}
.map-card .map-legend .legend-row {
gap: 5px !important;
}
}
/* ============================================
* ≤480px — Smallest phones (single-column everything)
* ============================================ */
@media (max-width: 480px) {
/* KPI grids collapse to a single column — 2 cols become unreadable
* once the card padding eats most of the width. */
.page-pad div[style*="repeat(4"],
.page-pad div[style*="repeat(5"],
.page-pad div[style*="repeat(3"] {
grid-template-columns: 1fr !important;
}
/* Section title row: scale the heading slightly so it doesn't dominate
* the viewport. */
.h-row h2 { font-size: 16px; }
.h-row p { font-size: 11px; }
/* Action buttons: keep them readable but smaller. The flex:1 from the
* 720px block already makes them share the row evenly. */
.h-row > div:last-child .btn {
padding: 7px 8px;
font-size: 11px;
gap: 4px;
}
/* Hide button icons under 360px to give the Arabic label more room.
* (svg is the icon; first-of-type targets only the leading icon, keeping
* any trailing arrows intact.) */
.h-row > div:last-child .btn > svg:first-of-type {
width: 12px;
height: 12px;
}
/* Tables: hide the long sub-line entirely on the tightest screens —
* the row is still clickable to open the edit modal which shows full
* details. */
.table td > div > div:nth-child(2) {
display: none;
}
}