/* ============================================================
   Fleets Hub Africa v7 — Glassmorphism + Uniform Grid Design System
   ADDITIVE ONLY. Loaded after app.css (and after app-v6.css if
   still linked — these rules win on conflicting selectors
   because of load order + specificity, nothing is deleted).
   Fixes from user feedback:
   - Uniform row/column alignment for all box groups (no more
     auto-fill causing uneven column counts).
   - Smooth, consistently rounded "pill" buttons everywhere.
   - True glassmorphism cards with blur + soft border glow.
   - iPhone-style spacing rhythm: consistent 8px-based scale,
     generous corner radii, calm shadows.
   - Dark / Light mode toggle for the System Owner panel.
   ============================================================ */

/* ── SPACING / RADIUS TOKENS (iPhone-style rhythm) ──────────── */
:root{
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px;
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-pill:999px;
  --glass-bg:rgba(255,255,255,0.55);
  --glass-border:rgba(255,255,255,0.35);
  --glass-shadow:0 8px 32px rgba(31,38,52,0.10);
}

/* ── UNIFORM GRID ALIGNMENT (fixes "boxes not in neat rows") ──
   Replaces auto-fill/minmax (which produces inconsistent column
   counts) with deterministic counts per breakpoint, so 2 items
   = 1 row of 2, 4 items = 2x2, 8 items = 2 rows of 4, etc. */
.metrics-row,
.vehicles-grid,
.obd-metrics,
.mod-grid,
.tile-grid{
  display:grid !important;
  gap:var(--s-4);
  align-items:stretch;
}
.metrics-row{ grid-template-columns:repeat(4, 1fr) !important; }
.vehicles-grid{ grid-template-columns:repeat(3, 1fr) !important; }
.obd-metrics{ grid-template-columns:repeat(4, 1fr) !important; }
.mod-grid{ grid-template-columns:repeat(4, 1fr) !important; }

/* Children of grid rows fill their cell uniformly — no orphan
   stretching or short last-row drift */
.metrics-row > *, .vehicles-grid > *, .obd-metrics > *, .mod-grid > *{
  width:100%; min-width:0;
}

@media(max-width:1100px){
  .metrics-row{ grid-template-columns:repeat(2,1fr) !important; }
  .vehicles-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .obd-metrics{ grid-template-columns:repeat(2,1fr) !important; }
  .mod-grid{ grid-template-columns:repeat(2,1fr) !important; }
}
@media(max-width:560px){
  .metrics-row{ grid-template-columns:repeat(2,1fr) !important; }
  .vehicles-grid{ grid-template-columns:1fr !important; }
  .obd-metrics{ grid-template-columns:repeat(2,1fr) !important; }
  .mod-grid{ grid-template-columns:1fr !important; }
}

/* ── SMOOTH PILL BUTTONS EVERYWHERE ──────────────────────────
   Every button-like element gets the same fully-rounded,
   soft-shadow treatment, regardless of which page defines it. */
.btn, button, input[type="submit"], .tog, a.btn{
  border-radius:var(--r-pill) !important;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease !important;
}
.btn:hover, button:hover, input[type="submit"]:hover{
  transform:translateY(-1px);
}
.btn:active, button:active{ transform:translateY(0); }

/* Toggle switches keep pill shape natively but smooth their motion */
.tog-sl{ transition:background .2s ease !important; }
.tog-sl::before{ transition:transform .2s cubic-bezier(.4,0,.2,1), background .2s ease !important; }

/* ── GLASSMORPHISM CARDS (applies system-wide, light contexts) ─
   Scoped OUT of platform.php's dark context: that page already
   ships its own dark-glass card styling inline (see the .card
   rules in platform.php's <style> block), and applying the
   light-glass background here on top of it washed out gray
   descriptive text to the point of being unreadable. */
body:not(.platform-body) .card,
body:not(.platform-body) .metric-card,
body:not(.platform-body) .vcard,
body:not(.platform-body) .modal-box{
  background:var(--glass-bg) !important;
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--glass-border) !important;
  box-shadow:var(--glass-shadow) !important;
  border-radius:var(--r-md) !important;
}
body:not(.platform-body) .card-head{
  background:rgba(255,255,255,0.35) !important;
  border-bottom:1px solid var(--glass-border) !important;
}

/* ── SYSTEM OWNER: DARK / LIGHT MODE TOGGLE ──────────────────
   Default platform.php styling (inline) is dark. Adding
   body.owner-light flips it to a light, solid (non-glass) theme;
   the JS toggle in platform.php sets this class + localStorage. */
body.owner-light{
  background:radial-gradient(circle at 8% 0%, #eef7f0 0%, #f5f8fb 45%, #ffffff 100%) !important;
  color:#1a2530 !important;
}
body.owner-light .card,
body.owner-light .mod-card,
body.owner-light .modal-box{
  background:#ffffff !important;
  border:1px solid rgba(0,0,0,0.06) !important;
  box-shadow:0 8px 28px rgba(20,30,40,0.08) !important;
  color:#1a2530;
}
body.owner-light .card-head{ color:#1a2530 !important; background:#f7f9f7 !important; }
body.owner-light .sidebar{
  background:#ffffff !important; border-right:1px solid rgba(0,0,0,0.06);
}
body.owner-light .nav-link{ color:#445566 !important; }
body.owner-light .nav-link.on{ color:#1a2530 !important; box-shadow:0 0 0 1px #f59e0b, 0 0 14px rgba(245,158,11,.2) !important; }
body.owner-light .inp{ background:#f5f7fa !important; border-color:rgba(0,0,0,0.08) !important; color:#1a2530 !important; }
body.owner-light .lbl{ color:#778899 !important; }
body.owner-light h1, body.owner-light h2, body.owner-light h3{ color:#1a2530 !important; }
body.owner-light .btn-gray{ background:#e8edf2 !important; color:#1a2530 !important; }
/* BUGFIX: several inline styles in platform.php hardcode #f0f6fc (near-white)
   text for dark mode, e.g. business names in tables and topbar h1. Force
   these back to a dark, readable color in light mode without touching the
   inline styles themselves. */
body.owner-light table strong[style*="f0f6fc"],
body.owner-light [style*="color:#f0f6fc"],
body.owner-light .topbar h1,
body.owner-light strong{ color:#1a2530 !important; }
body.owner-light .topbar{ background:#ffffff !important; border-bottom:1px solid rgba(0,0,0,0.06) !important; }
body.owner-light table thead{ background:#eef2f6 !important; color:#445566 !important; }
body.owner-light table thead th{ color:#445566 !important; }
body.owner-light td{ color:#1a2530 !important; }
body.owner-light td[style*="7d8590"]{ color:#778899 !important; }
body.owner-light .sb-name{ color:#1a2530 !important; }
body.owner-light .sb-name small{ color:#778899 !important; }

/* Theme toggle switch widget (rendered in platform.php topbar) */
.theme-toggle{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--r-pill); padding:6px 14px; font-size:12px; font-weight:600;
  color:#f0f6fc; transition:background .2s ease;
}
body.owner-light .theme-toggle{
  background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.08); color:#1a2530;
}
.theme-toggle:hover{ background:rgba(255,255,255,0.12); }

/* ── RESPONSIVE: phone / tablet / desktop fit ───────────────── */
@media(max-width:480px){
  .card, .modal-box{ border-radius:var(--r-sm) !important; }
  .btn, button{ min-height:44px; padding:10px 18px !important; }
}

/* ── BUGFIX: a generic, unscoped `.logo-text{color:#fff}` rule in
   app.css (meant only for the dark sidebar) was bleeding into the
   login card's logo, making "Fleet" invisible (white-on-white).
   Re-assert the correct dark color specifically inside the auth
   card without touching the legacy file. ───────────────────────── */
.auth-card .logo-text{ color:#1a3a1e !important; }
.auth-card .logo-text span{ color:var(--accent,#f59e0b) !important; }

/* ── BUGFIX: auth-body split layout needs full viewport height/width
   and its two halves need explicit height:100% so the green
   background doesn't show through around the white showcase panel. */
body.auth-body{
  min-height:100vh; width:100%;
}
.auth-wrap{ height:100vh; }
.auth-showcase{ height:100vh; width:100%; }

/* ── LOGIN CARD CENTERING (item 16): logo, title, subtitle, and every
   standalone link/row center on the card. Form field labels stay
   left-aligned above their inputs (centering label text above a
   full-width input looks broken), but the labels and inputs
   themselves are centered as a block within the card. ──────────── */
.auth-card{ text-align:center; }
.auth-logo{ justify-content:center; }
.auth-card .form-group{ text-align:left; max-width:400px; margin-left:auto; margin-right:auto; }
.auth-card form{ max-width:400px; margin-left:auto; margin-right:auto; }
#forgotPwPanel{ text-align:left; max-width:400px; margin-left:auto; margin-right:auto; }
#forgotPwPanel h3{ text-align:center; }

/* ── APPS PAGE GRID (item 9) ─────────────────────────────────────
   .apps-grid and .app-card had NO styling anywhere in the codebase,
   so every module card rendered as an unstyled full-width block
   (no card boundary, no grid, buttons stretching almost 1200px
   wide) - this is what "boxes are too big" meant in practice.
   Fixed column counts per breakpoint, same pattern as the v7
   metric/vehicle card grids elsewhere in the system. ───────────── */
.apps-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:12px;
  margin-top:16px;
}
.apps-grid.compact-grid{
  grid-template-columns:repeat(6,1fr); gap:10px;
}
.app-card{
  background:var(--surface,#fff); border:1px solid var(--border,#e2e8e3);
  border-radius:12px; padding:12px 10px; text-align:center;
  display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s;
  box-shadow:0 2px 8px rgba(20,30,20,0.04);
}
.app-card:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(20,30,20,0.10); }
.app-card.is-active{ border-color:var(--primary,#2d7a3a); }
.app-card.is-coming-soon{ opacity:0.7; }
.app-card-badges{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; min-height:22px; margin-bottom:2px; }
.app-card > div:nth-child(2){ font-size:22px !important; margin:4px 0 !important; } /* icon */
.app-card > div:nth-child(3){ font-size:13px !important; font-weight:600; } /* title */
.app-card > div:nth-child(4){ font-size:11px !important; min-height:32px !important; margin:4px 0 8px !important; color:var(--text3); } /* description */
.app-card .btn{ margin-top:auto; font-size:11px; padding:4px 8px; }
.compact-grid .app-card > div:nth-child(2){ font-size:18px !important; }
.compact-grid .app-card > div:nth-child(3){ font-size:11px !important; }
.compact-grid .app-card > div:nth-child(4){ display:none !important; } /* hide description in super-compact view */

@media(max-width:1200px){ .apps-grid{ grid-template-columns:repeat(4,1fr); } .apps-grid.compact-grid{ grid-template-columns:repeat(5,1fr); } }
@media(max-width:900px){ .apps-grid{ grid-template-columns:repeat(3,1fr); } .apps-grid.compact-grid{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:760px){ .apps-grid{ grid-template-columns:repeat(2,1fr); } .apps-grid.compact-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:480px){ .apps-grid,.apps-grid.compact-grid{ grid-template-columns:repeat(2,1fr); gap:8px; } .app-card{ padding:10px; } }