/* TruckFund V4.4 — FleetOS design language override
   Purpose: make TruckFund feel visually aligned with the attached FleetOS TMS design. */
:root{
  --bg:#f5f6f2; --card:#ffffff; --text:#1f2933; --muted:#6b7280; --line:#e4e6dc;
  --blue:#21456f; --blue2:#173457; --green:#3a7d44; --orange:#9a6500; --red:#b93a35;
  --soft:#e7f0fa; --shadow:0 16px 40px rgba(17,24,39,.08); --radius:16px; --radius-sm:11px;
  --nav:#142033; --nav2:#1f3f6d; --surface:#fff;
}
body{background:var(--bg);color:var(--text);font-family:'Plus Jakarta Sans',Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:-.015em}.public{background:linear-gradient(180deg,#fbfcf9 0%,#f5f6f2 100%)}
.container{max-width:1248px}.topbar{height:72px}.brand{color:var(--nav);font-weight:900}.nav{color:#405166;font-weight:800}.nav a.active,.nav a:hover{color:var(--primary,var(--blue))}.btn{border-radius:12px;font-weight:900;box-shadow:none;transition:.15s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(17,24,39,.08)}.btn.primary{background:var(--blue);border-color:var(--blue)}.btn.primary:hover{background:var(--blue2)}.btn.soft{background:#eef4f9;border-color:#d6e4f2;color:var(--blue)}.chip{border-color:var(--line);font-weight:900}.chip.active{background:var(--blue);border-color:var(--blue)}.chip.success,.status.active{background:#eaf5ec;color:var(--green);border-color:#cae5d0}.chip.warn{background:#fff1d6;color:var(--orange);border-color:#f5d48b}.public-card,.kpi,.card,.form-card,.offering-card,.why-card,.feature-card,.metric-card,.value-pill{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero{grid-template-columns:1fr 1.02fr;gap:40px;padding:42px 0 46px}.hero h1{color:#0f1b2d;font-size:50px;line-height:1.06;letter-spacing:-.055em;margin-bottom:20px;max-width:620px}.hero p{color:#59677a;font-size:16px;line-height:1.75;max-width:560px}.hero-visual{background:#e7edf2;border-color:#dfe5df;border-radius:24px;box-shadow:0 22px 50px rgba(20,32,51,.11)}.hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(245,246,242,.16),rgba(20,32,51,0) 35%,rgba(20,32,51,.08));pointer-events:none}.hero-stat{border-color:rgba(228,230,220,.9);box-shadow:0 18px 40px rgba(17,24,39,.16);border-radius:16px}.feature-strip{background:#fbfcf9;border-color:var(--line)}.feature .circle,.why-card .circle{background:#e7f0fa;color:var(--blue)}.logos span:before{color:var(--blue)}.section-head h1,.section-head h2{color:#0f1b2d;font-weight:900}.metric .value,.kpi .value,.stat-value{color:#0f1b2d}.detail-title h1,.app-header h1{color:#0f1b2d;font-weight:900}.progress-fill{background:linear-gradient(90deg,var(--blue),#3a7d44)}.radial{background:conic-gradient(var(--blue) 0 75%,#e8ecef 75% 100%)}
.app-shell{grid-template-columns:240px minmax(0,1fr);background:var(--bg)}.sidebar{background:var(--nav);border-right:0;color:#dbe4ef;padding:16px 12px}.side-brand{color:#fff;margin-bottom:16px;padding:8px 10px}.side-brand img{filter:brightness(0) invert(1);background:#fff;border-radius:11px;padding:4px}.side-nav{gap:4px}.side-nav a{color:#dbe4ef;border-radius:11px;font-weight:800;padding:10px 10px}.side-nav a span{width:22px;text-align:center;color:#fff}.side-nav a.active,.side-nav a:hover{background:rgba(255,255,255,.09);color:#fff}.main{padding:20px}.app-header{margin-bottom:16px}.user-menu{background:#fff;border-color:var(--line);border-radius:999px;box-shadow:0 10px 24px rgba(17,24,39,.04)}.role-switcher{background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px rgba(17,24,39,.04)}.role-chip{background:#e7f0fa;color:var(--blue)}
.table td{border-color:var(--line)}.tabs a.active,.tabs button.active{color:var(--blue);box-shadow:inset 0 -2px var(--blue)}.tabs a,.tabs button{font-weight:900}.auth-page{background:var(--bg)}.auth-left{background:linear-gradient(135deg,#142033,#1f3f6d);color:#fff}.auth-copy p{color:#c8d3e0}.auth-panel{background:var(--bg)}.form-card{border-radius:20px}.field input,.field select{border-color:var(--line);border-radius:12px}.password-wrap button{color:var(--blue)}
.alert{background:#fbfcf9;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius)}.alert.warn{background:#fff1d6;border-color:#f5d48b}.real-map,.tracking-map-card{border-color:var(--line)}.fleet-unit{border-color:var(--line);border-radius:14px}.fleet-unit.active{background:#e7f0fa;border-color:#c7dbef}.selected-unit{background:#fbfcf9;border-color:var(--line)}.nav-float{box-shadow:0 16px 34px rgba(17,24,39,.16)}
@media(max-width:960px){.hero{grid-template-columns:1fr}.app-shell{grid-template-columns:1fr}.sidebar{position:static;height:auto}.side-nav{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.hero h1{font-size:38px}}

/* FleetOS bridge page components */
.ops-hero{background:var(--nav);color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:22px;box-shadow:var(--shadow);display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:center;margin-bottom:14px}.ops-hero h2{font-size:25px;line-height:1.15;margin:0}.ops-hero p{color:#c8d3e0;line-height:1.55;margin:8px 0 0}.ops-hero .ops-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.ops-hero .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#fff}.ops-hero-panel{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:15px}.ops-hero-panel .row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid rgba(255,255,255,.12)}.ops-hero-panel .row:first-child{border-top:0}.ops-hero-panel span{color:#aebdd0;font-size:12px}.ops-hero-panel b{font-size:15px}.ops-kpi-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:14px 0}.ops-kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px;box-shadow:0 10px 26px rgba(17,24,39,.04)}.ops-kpi span{display:block;font-size:11px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.02em}.ops-kpi b{display:block;font-size:24px;color:#0f1b2d;margin-top:4px}.ops-kpi small{display:block;margin-top:4px;color:var(--muted);font-size:11px}.ops-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;align-items:start}.fleetos-map{height:430px;border:1px solid var(--line);border-radius:18px;background:radial-gradient(circle at 26% 28%,rgba(36,95,157,.2),transparent 18%),radial-gradient(circle at 62% 55%,rgba(58,125,68,.16),transparent 18%),linear-gradient(135deg,#e7f0fa,#fbfcf9 52%,#eaf5ec);position:relative;overflow:hidden}.fleetos-route{position:absolute;border:4px dashed rgba(36,95,157,.35);border-radius:50%;transform:rotate(-10deg)}.fleetos-route.r1{width:72%;height:48%;left:8%;top:22%}.fleetos-route.r2{width:46%;height:32%;right:-2%;top:42%;border-color:rgba(58,125,68,.35)}.fleetos-pin{position:absolute;width:34px;height:34px;border-radius:999px;background:#21456f;color:#fff;display:grid;place-items:center;font-weight:900;box-shadow:0 0 0 7px rgba(33,69,111,.12),0 12px 24px rgba(17,24,39,.2)}.fleetos-pin.green{background:#3a7d44;box-shadow:0 0 0 7px rgba(58,125,68,.14),0 12px 24px rgba(17,24,39,.2)}.fleetos-pin.amber{background:#9a6500;box-shadow:0 0 0 7px rgba(154,101,0,.16),0 12px 24px rgba(17,24,39,.2)}.fleetos-pin.red{background:#b93a35;box-shadow:0 0 0 7px rgba(185,58,53,.14),0 12px 24px rgba(17,24,39,.2)}.fleetos-pop{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:var(--shadow);min-width:190px}.fleetos-pop b{display:block}.fleetos-pop span{display:block;color:var(--muted);font-size:12px;margin-top:3px}.ops-board{display:grid;gap:10px}.ops-trip{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;background:#fbfcf9;border:1px solid var(--line);border-radius:14px;padding:11px}.ops-trip .num{width:32px;height:32px;border-radius:10px;background:#e7f0fa;color:var(--blue);display:grid;place-items:center;font-weight:900}.ops-trip b{display:block;font-size:13px}.ops-trip span{display:block;color:var(--muted);font-size:12px;margin-top:2px}.ops-iframe{width:100%;height:520px;border:1px solid var(--line);border-radius:18px;background:#fff}.ops-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.ops-link{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px;box-shadow:0 8px 18px rgba(17,24,39,.04)}.ops-link b{display:block}.ops-link span{display:block;color:var(--muted);font-size:12px;margin-top:4px}.section-title-inline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.section-title-inline h2{font-size:19px;margin:0}.tf-data-table{width:100%;border-collapse:separate;border-spacing:0 8px;font-size:13px}.tf-data-table th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;padding:0 10px}.tf-data-table td{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 10px}.tf-data-table td:first-child{border-left:1px solid var(--line);border-radius:12px 0 0 12px}.tf-data-table td:last-child{border-right:1px solid var(--line);border-radius:0 12px 12px 0}.entity{display:flex;align-items:center;gap:11px}.entity .avatar-mini{width:38px;height:38px;border-radius:12px;background:#e7f0fa;display:grid;place-items:center;color:var(--blue);font-weight:900}.ops-alert-list{display:grid;gap:10px}.ops-alert-item{display:flex;gap:10px;border:1px solid var(--line);border-radius:14px;background:#fbfcf9;padding:11px}.ops-alert-item i{width:10px;height:10px;border-radius:99px;background:var(--orange);margin-top:5px;flex:0 0 auto}.ops-alert-item.green i{background:var(--green)}.ops-alert-item.red i{background:var(--red)}.ops-alert-item b{display:block;font-size:13px}.ops-alert-item span{display:block;color:var(--muted);font-size:12px;line-height:1.4;margin-top:3px}
@media(max-width:1200px){.ops-layout,.ops-hero{grid-template-columns:1fr}.ops-kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-links{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.ops-kpi-strip,.ops-links{grid-template-columns:1fr}.fleetos-map{height:320px}.ops-iframe{height:420px}.tf-data-table{display:block;overflow:auto}.ops-trip{grid-template-columns:32px 1fr}}


/* V4.7 role/menu fixes */
.app-shell .sidebar,
.app-shell.admin-layout .sidebar,
.admin-layout .sidebar{
  background:#142033 !important;
  color:#dbe4ef !important;
  border-right:0 !important;
}
.app-shell .side-brand,
.app-shell.admin-layout .side-brand,
.admin-layout .side-brand{
  color:#ffffff !important;
}
.app-shell .side-nav a,
.app-shell.admin-layout .side-nav a,
.admin-layout .side-nav a{
  color:#dbe4ef !important;
  background:transparent !important;
}
.app-shell .side-nav a span,
.app-shell.admin-layout .side-nav a span,
.admin-layout .side-nav a span{
  color:#ffffff !important;
}
.app-shell .side-nav a.active,
.app-shell .side-nav a:hover,
.app-shell.admin-layout .side-nav a.active,
.app-shell.admin-layout .side-nav a:hover,
.admin-layout .side-nav a.active,
.admin-layout .side-nav a:hover{
  background:rgba(255,255,255,.10) !important;
  color:#ffffff !important;
}
.fleetos-header-cta{
  white-space:nowrap;
  box-shadow:0 12px 24px rgba(36,95,157,.18) !important;
}
.side-cta{
  margin:16px 6px 0;
  padding:12px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(36,95,157,.32),rgba(58,125,68,.22));
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
}
.side-cta-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#aebdd0;
  font-weight:900;
  margin-bottom:7px;
}
.side-cta a{
  color:#fff !important;
  font-size:12px;
  line-height:1.35;
  font-weight:900;
  display:block;
}
.owner-ops-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:linear-gradient(135deg,#142033,#1f3f6d);
  color:#fff;
  border-radius:18px;
  padding:16px 18px;
  box-shadow:0 16px 34px rgba(17,24,39,.14);
  margin-bottom:16px;
}
.owner-ops-banner h2{margin:0 0 4px;font-size:18px;color:#fff}.owner-ops-banner p{margin:0;color:#c8d3e0;line-height:1.45}.owner-ops-banner .btn{border-color:rgba(255,255,255,.18)}
@media(max-width:760px){.app-header{align-items:flex-start;gap:10px;flex-wrap:wrap}.fleetos-header-cta{order:5}.owner-ops-banner{align-items:flex-start;flex-direction:column}}


/* Keep bilingual toggle aligned with FleetOS theme */
.sidebar .lang-toggle{margin:12px}
body[data-role="admin"] .app-header .lang-toggle,
body[data-role="finance"] .app-header .lang-toggle{
  background:rgba(255,255,255,.9);
}