/* ============================================================ Fleets Hub Africa v6 — Visual Overhaul Layer (ADDITIVE ONLY) Loaded after app.css. Does not modify or remove any existing rule — only adds new classes, refines spacing/elevation on existing selectors via higher-specificity additions, and introduces opt-in customization (background styles, animated icons, maintenance animations). Every color still resolves through the existing --primary / --accent / --bg variables set in layout_top.php, so per-business branding is untouched. ============================================================ */ /* ── DESKTOP REFRESH (ref: Desktop_UI_design — soft elevated cards, rounded pill buttons, generous spacing) ───────────── */ @media(min-width:901px){ .card{ border-radius:16px; box-shadow:0 4px 18px rgba(20,20,20,0.05); border:1px solid rgba(0,0,0,0.04); } .metric-card{ border-radius:16px; box-shadow:0 6px 20px rgba(20,20,20,0.06); transition:transform .18s ease, box-shadow .18s ease; } .metric-card:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(20,20,20,0.10); } .btn{ border-radius:24px; padding:10px 20px; } .sidebar{ border-radius:0 18px 18px 0; box-shadow:4px 0 24px rgba(0,0,0,0.12); } } /* ── MOBILE REFRESH (ref: Phone_app_UI_design — dark icon-grid panels, rounded selectable tiles, pill toggles) ──────────── */ @media(max-width:768px){ .metrics-row{ grid-template-columns:repeat(2,1fr) !important; gap:10px; } .metric-card{ border-radius:14px; padding:14px; text-align:center; } .metric-icon{ width:38px;height:38px;margin:0 auto 8px; display:flex;align-items:center;justify-content:center; background:rgba(var(--primary-rgb,45,122,58),0.12); border-radius:10px;font-size:18px; } .card{ border-radius:14px; } .btn{ min-height:44px; border-radius:22px; } /* App-icon-grid style tile, opt-in via class on nav/module links */ .tile-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:4px 0; } .tile-grid .tile{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 6px; border-radius:14px; background:var(--surface2); border:1px solid var(--border); font-size:11px; font-weight:600; color:var(--text2); } .tile-grid .tile.active{ background:var(--primary); color:#fff; border-color:var(--primary); } .tile-grid .tile .tile-icon{ font-size:22px; } } /* NOTE: platform.php's dark-glass treatment lives in its own inline