/* ==========================================================
   FIXFLEET REDESIGN
   Phase 1 — simplified operational shell
   ========================================================== */

:root{
  --ff2-blue:#35b8ff;
  --ff2-cyan:#59dcff;
  --ff2-mint:#62e7bb;
  --ff2-bg:#07111f;
  --ff2-panel:#0d1b2d;
  --ff2-panel2:#10243a;
  --ff2-line:rgba(255,255,255,.08);
}


/* ----------------------------------------------------------
   REMOVE OLD ADMIN NAVIGATION CLUTTER
   ---------------------------------------------------------- */

#admin .ff-sidebar{
  display:none !important;
}

#adminTabs{
  display:none !important;
}


/* ----------------------------------------------------------
   NEW PRIMARY NAVIGATION
   ---------------------------------------------------------- */

.ff2-shell-nav{
  position:sticky;
  top:0;
  z-index:80;

  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));

  gap:6px;

  width:100%;
  max-width:980px;

  margin:0 auto 18px;
  padding:7px;

  border:1px solid var(--ff2-line);
  border-radius:18px;

  background:
    rgba(6,15,27,.94);

  backdrop-filter:
    blur(18px);

  box-shadow:
    0 14px 35px rgba(0,0,0,.24);
}


.ff2-nav-button{
  appearance:none;
  border:0;
  outline:0;

  min-width:0;
  min-height:58px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:5px;

  padding:7px;

  border-radius:13px;

  color:
    rgba(255,255,255,.58);

  background:transparent;

  font:inherit;
  cursor:pointer;
}


.ff2-nav-button:hover{
  background:
    rgba(255,255,255,.045);
}


.ff2-nav-button.active{
  color:#fff;

  background:
    linear-gradient(
      145deg,
      rgba(53,184,255,.18),
      rgba(98,231,187,.09)
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(73,199,255,.18);
}


.ff2-nav-icon{
  font-size:19px;
  line-height:1;
}


.ff2-nav-label{
  font-size:11px;
  font-weight:850;
  letter-spacing:.15px;
}


/* ----------------------------------------------------------
   DASHBOARD HERO
   ---------------------------------------------------------- */

.ff2-dashboard-hero{
  overflow:hidden;

  margin-bottom:14px;
  padding:20px;

  border-radius:22px;

  border:
    1px solid rgba(66,195,255,.16);

  background:
    radial-gradient(
      circle at top right,
      rgba(53,184,255,.16),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(14,31,52,.98),
      rgba(7,18,33,.98)
    );
}


.ff2-dashboard-eyebrow{
  margin-bottom:5px;

  font-size:10px;
  font-weight:900;

  letter-spacing:1.2px;
  text-transform:uppercase;

  color:var(--ff2-cyan);
}


.ff2-dashboard-hero h2{
  margin:0;

  font-size:27px;
  line-height:1.1;
}


.ff2-dashboard-hero p{
  max-width:700px;

  margin:8px 0 0;

  line-height:1.5;
}


.ff2-quick-actions{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:9px;

  margin-top:18px;
}


.ff2-quick-action{
  min-height:72px;

  display:flex;
  align-items:center;

  gap:10px;

  padding:13px;

  border-radius:15px;

  border:
    1px solid rgba(255,255,255,.07);

  background:
    rgba(255,255,255,.035);

  color:#fff;

  font:inherit;

  text-align:left;
  cursor:pointer;
}


.ff2-quick-action:hover{
  background:
    rgba(255,255,255,.065);
}


.ff2-quick-action-icon{
  flex:0 0 auto;

  width:37px;
  height:37px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:11px;

  background:
    rgba(53,184,255,.10);

  font-size:19px;
}


.ff2-quick-action strong{
  display:block;
  font-size:13px;
}


.ff2-quick-action span:last-child{
  display:block;
  margin-top:3px;

  font-size:10px;
  line-height:1.3;

  opacity:.5;
}


/* ----------------------------------------------------------
   NEW HUBS
   ---------------------------------------------------------- */

.ff2-page{
  width:100%;
}


.ff2-page-heading{
  margin-bottom:18px;
}


.ff2-page-eyebrow{
  margin-bottom:5px;

  font-size:10px;
  font-weight:900;

  letter-spacing:1.1px;

  color:var(--ff2-cyan);
}


.ff2-page-heading h1{
  margin:0;

  font-size:31px;
  line-height:1.1;
}


.ff2-page-heading p{
  margin-top:8px;
  margin-bottom:0;

  max-width:680px;
}


.ff2-action-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:12px;
}


.ff2-action-card{
  position:relative;

  min-height:142px;

  display:flex;
  align-items:flex-start;

  gap:14px;

  padding:18px;

  border-radius:19px;

  border:
    1px solid var(--ff2-line);

  background:
    linear-gradient(
      145deg,
      rgba(15,31,51,.97),
      rgba(9,21,37,.97)
    );

  color:#fff;

  font:inherit;

  text-align:left;
}


button.ff2-action-card{
  cursor:pointer;
}


button.ff2-action-card:hover{
  border-color:
    rgba(53,184,255,.24);

  transform:
    translateY(-1px);
}


.ff2-action-icon{
  flex:0 0 auto;

  width:47px;
  height:47px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:14px;

  background:
    linear-gradient(
      145deg,
      rgba(53,184,255,.16),
      rgba(98,231,187,.09)
    );

  font-size:23px;
}


.ff2-action-content{
  min-width:0;
}


.ff2-action-content h3{
  margin:1px 0 5px;

  font-size:17px;
}


.ff2-action-content p{
  margin:0;

  font-size:12px;
  line-height:1.45;

  opacity:.58;
}


.ff2-action-arrow{
  position:absolute;

  right:16px;
  bottom:15px;

  opacity:.45;
}


/* ----------------------------------------------------------
   PO AUTHORISATION
   ---------------------------------------------------------- */

.ff2-po-card{
  margin-top:14px;
  padding:18px;

  border-radius:19px;

  border:
    1px solid rgba(255,194,79,.18);

  background:
    linear-gradient(
      145deg,
      rgba(48,37,17,.34),
      rgba(13,25,42,.97)
    );
}


.ff2-po-heading{
  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:14px;
}


.ff2-po-heading h3{
  margin:0 0 5px;
}


.ff2-status-chip{
  flex:0 0 auto;

  display:inline-flex;
  align-items:center;

  min-height:29px;

  padding:5px 9px;

  border-radius:999px;

  font-size:10px;
  font-weight:900;

  letter-spacing:.3px;
}


.ff2-status-ready{
  background:
    rgba(255,190,70,.10);

  color:#ffd684;

  border:
    1px solid rgba(255,190,70,.18);
}


.ff2-po-flow{
  display:flex;
  flex-wrap:wrap;

  gap:7px;

  margin-top:13px;
}


.ff2-flow-step{
  padding:7px 9px;

  border-radius:10px;

  background:
    rgba(255,255,255,.04);

  border:
    1px solid rgba(255,255,255,.055);

  font-size:10px;
  font-weight:800;
}


/* ----------------------------------------------------------
   INTEGRATIONS
   ---------------------------------------------------------- */

.ff2-integration-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:10px;

  margin-top:14px;
}


.ff2-integration-card{
  min-height:125px;

  padding:16px;

  border-radius:17px;

  border:
    1px solid var(--ff2-line);

  background:
    rgba(255,255,255,.025);
}


.ff2-integration-card strong{
  display:block;

  margin-bottom:5px;

  font-size:16px;
}


.ff2-integration-state{
  display:inline-flex;

  margin-top:12px;

  padding:5px 8px;

  border-radius:999px;

  font-size:9px;
  font-weight:900;

  color:#9edcff;

  border:
    1px solid rgba(53,184,255,.18);

  background:
    rgba(53,184,255,.07);
}


/* ----------------------------------------------------------
   DASHBOARD INTEGRATION STRIP
   ---------------------------------------------------------- */

.ff2-system-strip{
  display:flex;
  flex-wrap:wrap;

  gap:7px;

  margin-top:14px;
}


.ff2-system-pill{
  display:inline-flex;
  align-items:center;

  gap:6px;

  padding:6px 9px;

  border-radius:999px;

  border:
    1px solid rgba(255,255,255,.06);

  background:
    rgba(255,255,255,.03);

  font-size:9px;
  font-weight:850;

  opacity:.75;
}


.ff2-system-dot{
  width:7px;
  height:7px;

  border-radius:999px;

  background:#f6bc56;
}


/* ----------------------------------------------------------
   EXISTING ADMIN PAGE CLEANUP
   ---------------------------------------------------------- */

#admin .ff-page-head{
  margin-bottom:12px;
}

#admin .ff-page-head h1{
  font-size:21px;
}

#admin .admin-tab-panel{
  animation:
    ff2Fade .15s ease-out;
}


@keyframes ff2Fade{
  from{
    opacity:0;
    transform:translateY(3px);
  }

  to{
    opacity:1;
    transform:none;
  }
}


/* ----------------------------------------------------------
   MOBILE APP MODE
   ---------------------------------------------------------- */

@media(max-width:760px){

  #admin{
    padding-bottom:86px;
  }


  .ff2-shell-nav{
    position:fixed;

    left:8px;
    right:8px;
    bottom:
      calc(
        8px +
        env(safe-area-inset-bottom)
      );

    top:auto;

    z-index:500;

    width:auto;
    max-width:none;

    margin:0;

    border-radius:18px;

    box-shadow:
      0 18px 50px
      rgba(0,0,0,.55);
  }


  .ff2-nav-button{
    min-height:57px;
    padding:5px 2px;
  }


  .ff2-nav-label{
    font-size:9px;
  }


  .ff2-dashboard-hero{
    padding:17px;
    border-radius:19px;
  }


  .ff2-dashboard-hero h2{
    font-size:23px;
  }


  .ff2-quick-actions{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .ff2-quick-action{
    min-height:69px;
  }


  .ff2-action-grid{
    grid-template-columns:1fr;
  }


  .ff2-action-card{
    min-height:112px;
  }


  .ff2-page-heading h1{
    font-size:27px;
  }


  .ff2-integration-grid{
    grid-template-columns:1fr;
  }


  .ff2-po-heading{
    flex-direction:column;
  }

}


@media(max-width:390px){

  .ff2-nav-icon{
    font-size:17px;
  }

  .ff2-nav-label{
    font-size:8px;
  }

}


/* FIXFLEET REDESIGN PHASE 1.1 */


/* Old Dashboard / Fleet Diary widget is no longer part
   of the primary mobile dashboard. */
#fixFleetDashboardDiary{
  display:none !important;
}


/* The redesigned dashboard is the single primary view. */
#adminOverviewTab{
  padding-bottom:20px;
}


/* Stop map attribution being covered by the app navigation. */
.ff-command-map,
.ff-tracking-map{
  overflow:hidden;
}


/* Give the mobile app enough room above the persistent nav. */
@media(max-width:760px){

  #admin{
    padding-bottom:
      calc(
        138px +
        env(safe-area-inset-bottom)
      ) !important;
  }

  #adminOverviewTab,
  #adminFleetTab,
  #adminBreakdownsTab,
  #adminFinanceTab,
  #adminTeamTab,
  #ff2JobsHub,
  #ff2MoreHub,
  .ff-shell-hub{
    padding-bottom:
      calc(
        112px +
        env(safe-area-inset-bottom)
      );
  }


  .ff2-shell-nav{
    left:10px;
    right:10px;

    grid-template-columns:
      repeat(5,minmax(0,1fr));

    gap:3px;

    padding:6px;

    min-height:70px;
  }


  .ff2-nav-button{
    min-width:0;
    overflow:hidden;
  }


  .ff2-nav-label{
    width:100%;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    text-align:center;
  }


  .ff-command-map,
  .ff-tracking-map{
    height:360px !important;
    min-height:360px !important;
  }

}



/* Keep the FixFleet assistant clear of the new bottom nav. */
@media(max-width:760px){
  /* ==========================================================
   FIXFLEET AI FLOATING ASSISTANT
========================================================== */

.ff-ai-launcher{
    bottom:
      calc(
        94px +
        env(safe-area-inset-bottom)
      ) !important;

    right:14px !important;
  }
}


/* =========================================================
   FIXFLEET MONDAY ACTION CENTRE / DESKTOP CLEANUP
   ========================================================= */

@media (min-width:901px){

  /* Desktop already has the permanent left sidebar.
     Do not show a second navigation system. */
  .ff2-shell-nav{
    display:none !important;
  }

  .ff2-dashboard-hero{
    margin-top:0 !important;
  }
}


.ff2-dashboard-hero{
  padding:20px !important;
}


.ff2-action-centre-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}


.ff2-action-centre-head h2{
  margin:4px 0 4px;
}


.ff2-unread-chip{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  padding:8px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:rgba(255,181,46,.12);
  border:1px solid rgba(255,181,46,.3);
}


.ff2-action-summary{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:15px;
  padding:13px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.035);
}


.ff2-action-summary.urgent{
  border-color:rgba(255,181,46,.38);
  background:rgba(255,181,46,.08);
}


.ff2-action-summary.clear{
  border-color:rgba(50,190,110,.28);
  background:rgba(50,190,110,.06);
}


.ff2-action-summary span{
  font-size:13px;
  opacity:.78;
}


.ff2-action-centre-grid{
  display:grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}


.ff2-attention-card{
  appearance:none;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.035);
  color:inherit;
  border-radius:16px;
  min-height:86px;
  padding:14px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:11px;
  align-items:center;
  text-align:left;
  cursor:pointer;
}


.ff2-attention-card:hover{
  background:rgba(255,255,255,.06);
}


.ff2-attention-card.needs-action{
  border-color:rgba(255,181,46,.42);
  background:rgba(255,181,46,.075);
}


.ff2-attention-card.warning{
  border-color:rgba(255,90,90,.32);
  background:rgba(255,90,90,.055);
}


.ff2-attention-icon{
  font-size:23px;
}


.ff2-attention-content{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}


.ff2-attention-content strong{
  font-size:14px;
}


.ff2-attention-content span{
  font-size:12px;
  opacity:.7;
}


.ff2-attention-count{
  display:grid;
  place-items:center;
  min-width:32px;
  height:32px;
  padding:0 8px;
  border-radius:999px;
  font-size:14px;
  font-weight:900;
  background:rgba(255,255,255,.08);
}


.ff2-attention-card.needs-action
.ff2-attention-count{
  background:rgba(255,181,46,.18);
}


.ff2-dashboard-live-row{
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
}


.ff2-text-action{
  appearance:none;
  border:0;
  padding:4px;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  opacity:.85;
}


.ff2-text-action:hover{
  opacity:1;
}


@media (max-width:1150px){

  .ff2-action-centre-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}


@media (max-width:700px){

  .ff2-action-centre-head{
    display:block;
  }

  .ff2-unread-chip{
    margin-top:10px;
  }

  .ff2-action-centre-grid{
    grid-template-columns:1fr;
  }

  .ff2-dashboard-live-row{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* =========================================================
   PINNED DESKTOP NAVIGATION
   ========================================================= */

@media (min-width:901px){

  .ff2-pinned-desktop-sidebar{
    position:sticky !important;
    top:0 !important;

    align-self:flex-start !important;

    max-height:100vh !important;

    overflow-y:auto !important;
    overscroll-behavior:contain;

    scrollbar-width:thin;
  }
}


.ff2-action-centre-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}


.ff2-settings-shortcut{
  appearance:none;

  min-height:36px;

  padding:7px 11px;

  border-radius:10px;

  border:1px solid
    rgba(255,255,255,.12);

  background:
    rgba(255,255,255,.045);

  color:inherit;

  font:inherit;
  font-size:12px;
  font-weight:800;

  cursor:pointer;
}


.ff2-settings-shortcut:hover{
  background:
    rgba(255,255,255,.08);
}


@media (max-width:700px){

  .ff2-action-centre-tools{
    justify-content:flex-start;
    margin-top:10px;
  }
}



/* FIXFLEET PREMIUM SHELL */

:root{
  --ff-accent:#4bd9c8;
  --ff-success:#3fd08a;
  --ff-warning:#f2b642;
  --ff-danger:#ff626b;
  --ff-text:#f3f8fc;
  --ff-muted:#8fa6b8;
}


body{
  background:
    radial-gradient(
      circle at 80% 0%,
      rgba(36,116,146,.15),
      transparent 35%
    ),
    #06101c !important;
}


@media (min-width:901px){

  .ff2-shell-nav{
    display:none !important;
  }

  .ff-premium-sidebar{
    position:sticky !important;
    top:0 !important;

    align-self:flex-start !important;

    width:240px !important;
    min-width:240px !important;

    height:100vh !important;
    max-height:100vh !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    padding:18px 14px !important;

    background:
      linear-gradient(
        180deg,
        #0a1928 0%,
        #06111f 100%
      ) !important;

    border-right:
      1px solid
      rgba(104,176,200,.14) !important;

    box-shadow:
      18px 0 50px
      rgba(0,0,0,.17);

    scrollbar-width:none;
  }

  .ff-premium-sidebar::-webkit-scrollbar{
    display:none;
  }
}


.ff-brand-lockup{
  display:flex;
  align-items:center;
  gap:12px;

  padding:
    4px 4px 18px;

  margin-bottom:14px;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}


.ff-brand-mark{
  width:46px;
  height:46px;

  border-radius:14px;

  box-shadow:
    0 9px 25px
    rgba(58,216,198,.22);
}


.ff-brand-copy{
  display:flex;
  flex-direction:column;
}


.ff-brand-copy strong{
  font-size:19px;
  color:var(--ff-text);
  letter-spacing:-.4px;
}


.ff-brand-copy span{
  margin-top:3px;
  font-size:11px;
  color:var(--ff-muted);
}


.ff-premium-nav-item{
  width:100% !important;

  min-height:45px !important;

  margin:3px 0 !important;

  padding:
    10px 12px !important;

  border-radius:
    12px !important;

  border:
    1px solid
    transparent !important;

  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease !important;
}


.ff-premium-nav-item:hover{
  transform:
    translateX(2px);

  background:
    rgba(75,217,200,.065) !important;

  border-color:
    rgba(75,217,200,.1) !important;
}


.ff-premium-nav-item.active{
  background:
    linear-gradient(
      90deg,
      rgba(75,217,200,.20),
      rgba(75,217,200,.06)
    ) !important;

  border-color:
    rgba(75,217,200,.18) !important;

  box-shadow:
    inset 3px 0
    var(--ff-accent);
}


.ff-premium-dashboard-heading{
  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:16px;

  margin:
    0 0 16px;

  padding:
    4px 2px 10px;
}


.ff-premium-eyebrow{
  color:
    var(--ff-accent);

  font-size:10px;

  font-weight:900;

  letter-spacing:
    1.7px;

  margin-bottom:
    8px;
}


.ff-premium-dashboard-heading h1{
  margin:0;

  color:
    var(--ff-text);

  font-size:
    clamp(27px,3vw,35px);

  line-height:1.05;

  letter-spacing:
    -.8px;
}


.ff-premium-dashboard-heading p{
  margin:
    7px 0 0;

  color:
    var(--ff-muted);

  font-size:
    13px;
}


.ff-premium-heading-actions{
  display:flex;
  gap:8px;
}


.ff-premium-header-button{
  appearance:none;

  min-height:38px;

  padding:
    8px 12px;

  border-radius:11px;

  border:
    1px solid
    rgba(150,190,216,.13);

  background:
    rgba(255,255,255,.035);

  color:#eef7fb;

  font:inherit;

  font-size:12px;
  font-weight:800;

  cursor:pointer;
}


.ff2-dashboard-hero{
  padding:
    20px !important;

  border-radius:
    21px !important;

  background:
    linear-gradient(
      145deg,
      rgba(12,31,49,.97),
      rgba(7,20,34,.97)
    ) !important;

  border:
    1px solid
    rgba(100,169,199,.15) !important;

  box-shadow:
    0 20px 65px
    rgba(0,0,0,.17) !important;
}


.ff-premium-action-centre{
  border-radius:18px;
}


.ff2-attention-card{
  min-height:
    96px !important;

  border-radius:
    15px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.047),
      rgba(255,255,255,.02)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.075) !important;

  transition:
    transform .16s ease,
    border-color .16s ease !important;
}


.ff2-attention-card:hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(75,217,200,.23) !important;
}


.ff2-attention-card.needs-action{
  border-color:
    rgba(242,182,66,.3) !important;

  background:
    linear-gradient(
      145deg,
      rgba(242,182,66,.12),
      rgba(242,182,66,.035)
    ) !important;
}


#adminOverviewTab .card,
#admin .card{
  border-radius:
    18px !important;

  border-color:
    rgba(111,170,197,.12) !important;

  box-shadow:
    0 14px 45px
    rgba(0,0,0,.10);
}


@media(max-width:900px){

  .ff-brand-lockup{
    display:none;
  }

  .ff-premium-heading-actions{
    display:none;
  }

}


/* =========================================================
   FIXFLEET GOAL DASHBOARD
   ========================================================= */

.ff-goal-mode{
  background:
    radial-gradient(
      circle at 85% 0%,
      rgba(15,95,137,.11),
      transparent 32%
    ),
    #06101c !important;

  padding:
    18px !important;
}


.ff-goal-mode >
:not(#ffGoalDashboard){
  display:none !important;
}


.ff-goal-dashboard{
  --goal-bg:#06101c;
  --goal-card:#0a1929;
  --goal-card2:#0c1d2e;
  --goal-border:rgba(110,171,201,.15);
  --goal-text:#f3f8fb;
  --goal-muted:#8da4b5;
  --goal-teal:#47dcc9;
  --goal-green:#36d48d;
  --goal-red:#ff5d68;
  --goal-yellow:#f1b744;
  --goal-blue:#58aeee;

  width:100%;

  max-width:
    1500px;

  margin:
    0 auto;

  color:
    var(--goal-text);
}


/* =========================================================
   SIDEBAR BRAND
   ========================================================= */

.ff-brand-lockup{
  display:none !important;
}


.ff-goal-brand{
  display:flex !important;

  align-items:center;

  gap:11px;

  margin:
    0 3px 18px;

  padding:
    3px 3px 18px;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}


.ff-goal-brand img{
  width:48px;

  height:48px;

  flex:0 0 48px;

  border-radius:
    13px;

  box-shadow:
    0 9px 27px
    rgba(71,220,201,.19);
}


.ff-goal-brand>div{
  display:flex;

  flex-direction:column;
}


.ff-goal-brand strong{
  display:block;

  font-size:22px;

  line-height:1;

  letter-spacing:
    -.7px;
}


.ff-goal-brand strong span{
  color:#f5f9fc;
}


.ff-goal-brand strong b{
  color:
    #53dfcd;
}


.ff-goal-brand small{
  margin-top:
    6px;

  color:
    #4ed9c7;

  font-size:
    7px;

  font-weight:
    900;

  letter-spacing:
    1.7px;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.ff-goal-topbar{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:22px;

  margin-bottom:
    18px;
}


.ff-goal-greeting h1{
  margin:0;

  color:
    #f5f9fc;

  font-size:
    clamp(
      28px,
      3vw,
      39px
    );

  letter-spacing:
    -1.1px;

  line-height:1;
}


.ff-goal-greeting h1 span{
  font-size:.72em;
}


.ff-goal-greeting p{
  margin:
    7px 0 0;

  color:
    #95aaba;

  font-size:
    14px;
}


.ff-goal-top-tools{
  position:relative;

  display:flex;

  align-items:center;

  justify-content:flex-end;

  gap:10px;
}


.ff-goal-top-tools time{
  margin-left:5px;

  color:
    #9bb1c1;

  font-size:
    11px;

  white-space:
    nowrap;
}


.ff-goal-search{
  position:relative;

  width:
    min(330px,30vw);
}


.ff-goal-search>span{
  position:absolute;

  left:14px;

  top:50%;

  transform:
    translateY(-50%);

  z-index:2;

  color:
    #8fb2c8;

  font-size:
    20px;
}


.ff-goal-search input{
  width:100%;

  height:42px;

  padding:
    0 14px 0 42px !important;

  border-radius:
    999px !important;

  border:
    1px solid
    rgba(59,150,204,.45) !important;

  background:
    rgba(9,39,64,.72) !important;

  color:
    #e9f3f8 !important;

  outline:none;
}


.ff-goal-search input::placeholder{
  color:
    #83a0b3;
}


.ff-goal-search-results{
  position:absolute;

  top:48px;

  left:0;

  right:0;

  z-index:10000;

  overflow:hidden;

  border-radius:
    13px;

  border:
    1px solid
    rgba(89,167,201,.2);

  background:
    #091827;

  box-shadow:
    0 20px 55px
    rgba(0,0,0,.36);
}


.ff-goal-search-results button{
  width:100%;

  display:flex;

  flex-direction:column;

  gap:3px;

  padding:
    10px 12px;

  text-align:left;

  border:0;

  border-bottom:
    1px solid
    rgba(255,255,255,.055);

  background:
    transparent;

  color:
    #eef7fb;

  cursor:pointer;
}


.ff-goal-search-results button:hover{
  background:
    rgba(71,220,201,.06);
}


.ff-goal-search-results span{
  color:
    #8099aa;

  font-size:
    10px;
}


.ff-goal-search-empty{
  padding:12px;

  color:
    #879eae;

  font-size:
    11px;
}


.ff-goal-bell{
  position:relative;

  width:42px;

  height:42px;

  flex:0 0 42px;

  border-radius:
    12px;

  border:
    1px solid
    rgba(121,180,206,.13);

  background:
    rgba(255,255,255,.035);

  color:white;

  cursor:pointer;

  font-size:17px;
}


.ff-goal-bell b{
  position:absolute;

  top:-4px;

  right:-4px;

  min-width:18px;

  height:18px;

  padding:
    0 4px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:
    999px;

  background:
    #f14e5a;

  color:white;

  font-size:9px;

  border:
    2px solid
    #071321;
}


.ff-goal-manager{
  display:flex;

  align-items:center;

  gap:8px;
}


.ff-goal-manager>div{
  width:38px;

  height:38px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:
    999px;

  background:
    linear-gradient(
      145deg,
      #1f5c8a,
      #123958
    );

  border:
    1px solid
    rgba(108,181,220,.28);

  color:#eaf6fb;

  font-size:12px;

  font-weight:900;
}


.ff-goal-manager>span{
  display:flex;

  flex-direction:column;
}


.ff-goal-manager strong{
  color:
    #eaf3f8;

  font-size:
    11px;
}


.ff-goal-manager small{
  margin-top:2px;

  color:
    #7f98aa;

  font-size:
    8px;
}


/* =========================================================
   KPI CARDS
   ========================================================= */

.ff-goal-kpis{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:12px;

  margin-bottom:
    14px;
}


.ff-goal-kpi{
  appearance:none;

  min-height:
    116px;

  display:flex;

  align-items:center;

  gap:14px;

  padding:
    17px;

  text-align:left;

  border-radius:
    15px;

  border:
    1px solid
    var(--goal-border);

  background:
    linear-gradient(
      145deg,
      rgba(12,32,51,.97),
      rgba(7,23,39,.97)
    );

  box-shadow:
    0 11px 35px
    rgba(0,0,0,.10);

  color:inherit;

  cursor:pointer;

  transition:
    transform .16s ease,
    border-color .16s ease;
}


div.ff-goal-kpi{
  cursor:default;
}


.ff-goal-kpi:hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(71,220,201,.24);
}


.ff-goal-kpi-icon{
  width:48px;

  height:48px;

  flex:
    0 0 48px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:
    999px;

  font-size:20px;
}


.ff-goal-kpi-icon.teal{
  color:
    var(--goal-teal);

  background:
    rgba(71,220,201,.10);
}


.ff-goal-kpi-icon.green{
  color:
    var(--goal-green);

  background:
    rgba(54,212,141,.10);
}


.ff-goal-kpi-icon.red{
  color:
    var(--goal-red);

  background:
    rgba(255,93,104,.10);
}


.ff-goal-kpi>div:last-child{
  display:flex;

  flex-direction:column;
}


.ff-goal-kpi strong{
  color:
    #f3f8fb;

  font-size:
    25px;

  line-height:1;
}


.ff-goal-kpi span{
  margin-top:
    5px;

  color:
    #bad0dd;

  font-size:
    11px;
}


.ff-goal-kpi small{
  margin-top:
    10px;

  font-size:
    9px;

  font-weight:
    800;
}


.ff-goal-kpi small.good{
  color:
    var(--goal-green);
}


.ff-goal-kpi small.bad{
  color:
    var(--goal-red);
}


.ff-goal-kpi small.warning{
  color:
    var(--goal-yellow);
}


/* =========================================================
   PANELS
   ========================================================= */

.ff-goal-primary-grid{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:12px;

  margin-bottom:
    12px;
}


.ff-goal-secondary-grid{
  display:grid;

  grid-template-columns:
    1.05fr .85fr 1fr;

  gap:12px;
}


.ff-goal-panel{
  min-width:0;

  overflow:hidden;

  border-radius:
    16px;

  border:
    1px solid
    var(--goal-border);

  background:
    linear-gradient(
      145deg,
      rgba(10,28,45,.98),
      rgba(6,20,34,.98)
    );

  box-shadow:
    0 15px 45px
    rgba(0,0,0,.11);
}


.ff-goal-alert-panel{
  border-color:
    rgba(255,93,104,.31);
}


.ff-goal-panel>header{
  min-height:
    51px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  padding:
    12px 14px;

  border-bottom:
    1px solid
    rgba(255,255,255,.06);
}


.ff-goal-panel>header>div{
  display:flex;

  align-items:center;

  gap:8px;

  min-width:0;
}


.ff-goal-panel h2{
  margin:0;

  color:
    #eef6fa;

  font-size:
    14px;

  letter-spacing:
    -.2px;
}


.ff-goal-panel>header button{
  border:0;

  background:
    transparent;

  color:
    #75cfe0;

  font-size:
    9px;

  font-weight:
    800;

  cursor:pointer;

  white-space:
    nowrap;
}


.ff-goal-panel-icon{
  width:26px;

  height:26px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:
    8px;

  font-size:12px;
}


.ff-goal-panel-icon.red{
  color:
    #ff6b74;

  background:
    rgba(255,93,104,.10);
}


.ff-goal-panel-icon.teal{
  color:
    #50e1cf;

  background:
    rgba(71,220,201,.10);
}


.ff-goal-panel-icon.blue{
  color:
    #6cbaf3;

  background:
    rgba(88,174,238,.10);
}


.ff-goal-count-badge{
  min-width:22px;

  height:22px;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:
    0 5px;

  border-radius:
    999px;

  background:
    #ef4f5b;

  color:white;

  font-size:9px;
}


.ff-goal-panel-body{
  padding:10px;
}


/* =========================================================
   BREAKDOWNS
   ========================================================= */

.ff-goal-breakdown-row{
  width:100%;

  display:grid;

  grid-template-columns:
    36px 1fr auto;

  align-items:center;

  gap:10px;

  margin-bottom:
    8px;

  padding:
    10px;

  border-radius:
    12px;

  border:
    1px solid
    rgba(255,93,104,.16);

  border-left:
    3px solid
    #ff5964;

  background:
    rgba(16,38,58,.78);

  color:inherit;

  font:inherit;

  text-align:left;

  cursor:pointer;
}


.ff-goal-breakdown-row:last-child{
  margin-bottom:0;
}


.ff-goal-truck-icon{
  width:34px;

  height:34px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:
    9px;

  background:
    rgba(113,166,198,.07);

  font-size:15px;
}


.ff-goal-breakdown-copy{
  min-width:0;
}


.ff-goal-row-title{
  display:flex;

  align-items:center;

  gap:8px;
}


.ff-goal-row-title strong{
  color:
    #f1f6f9;

  font-size:
    11px;
}


.ff-goal-row-title span{
  padding:
    3px 6px;

  border-radius:
    999px;

  color:
    #ffdce0;

  background:
    rgba(223,46,60,.55);

  font-size:
    7px;

  font-weight:
    900;
}


.ff-goal-breakdown-copy small{
  display:block;

  margin-top:
    3px;

  color:
    #9ab1c0;

  font-size:
    9px;
}


.ff-goal-breakdown-copy p{
  margin:
    4px 0 0;

  overflow:hidden;

  color:
    #8ea6b5;

  font-size:
    9px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ff-goal-row-side{
  display:flex;

  flex-direction:column;

  align-items:flex-end;

  gap:8px;
}


.ff-goal-row-side small{
  color:
    #8299aa;

  font-size:
    8px;
}


.ff-goal-row-side b{
  padding:
    6px 9px;

  border-radius:
    8px;

  border:
    1px solid
    rgba(94,154,194,.28);

  color:
    #c9e2ef;

  background:
    rgba(31,82,118,.26);

  font-size:
    8px;
}


/* =========================================================
   BID APPROVALS
   ========================================================= */

.ff-goal-bid-row{
  width:100%;

  min-height:
    38px;

  display:grid;

  grid-template-columns:
    74px 1fr auto 40px;

  align-items:center;

  gap:8px;

  padding:
    7px 8px;

  border:0;

  border-bottom:
    1px solid
    rgba(255,255,255,.055);

  background:
    transparent;

  color:inherit;

  text-align:left;

  cursor:pointer;
}


.ff-goal-bid-row:last-child{
  border-bottom:0;
}


.ff-goal-bid-row strong{
  color:
    #e9f3f8;

  font-size:
    9px;
}


.ff-goal-bid-row span{
  overflow:hidden;

  color:
    #93a9b8;

  font-size:
    9px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ff-goal-bid-row b{
  color:
    #55e0ce;

  font-size:
    10px;

  white-space:
    nowrap;
}


.ff-goal-bid-row small{
  color:
    #889fad;

  font-size:
    8px;

  white-space:
    nowrap;
}


.ff-goal-authorise{
  width:
    calc(100% - 20px);

  min-height:
    44px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:9px;

  margin:
    0 10px 10px;

  border-radius:
    11px;

  border:
    1px solid
    rgba(86,241,220,.37);

  background:
    linear-gradient(
      90deg,
      #45dfb6,
      #30c8ca
    );

  color:
    #05221f;

  font:inherit;

  font-size:
    11px;

  font-weight:
    950;

  cursor:pointer;

  box-shadow:
    0 9px 28px
    rgba(44,206,186,.12);
}


.ff-goal-authorise span{
  margin-left:
    auto;

  padding-right:
    4px;
}


/* =========================================================
   FLEET OVERVIEW
   ========================================================= */

.ff-goal-fleet-overview{
  min-height:
    202px;

  display:flex;

  align-items:center;

  gap:22px;

  padding:
    16px;
}


.ff-goal-donut{
  width:126px;

  height:126px;

  flex:
    0 0 126px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:
    999px;

  background:
    conic-gradient(
      #42dcb3
      0 var(--ff-up),
      #193349
      var(--ff-up) 100%
    );

  position:relative;
}


.ff-goal-donut::after{
  content:"";

  position:absolute;

  inset:18px;

  border-radius:
    999px;

  background:
    #081827;

  box-shadow:
    inset 0 0 20px
    rgba(0,0,0,.23);
}


.ff-goal-donut>div{
  position:relative;

  z-index:2;

  display:flex;

  flex-direction:column;

  align-items:center;
}


.ff-goal-donut strong{
  color:white;

  font-size:
    22px;
}


.ff-goal-donut span{
  margin-top:2px;

  color:
    #9ab0bf;

  font-size:
    9px;
}


.ff-goal-fleet-legend{
  flex:1;

  display:flex;

  flex-direction:column;

  gap:11px;
}


.ff-goal-fleet-legend>div{
  display:grid;

  grid-template-columns:
    9px 1fr auto;

  align-items:center;

  gap:7px;
}


.ff-goal-fleet-legend i{
  width:8px;

  height:8px;

  border-radius:
    999px;
}


.ff-goal-fleet-legend i.road{
  background:#40d695;
}


.ff-goal-fleet-legend i.workshop{
  background:#789bc7;
}


.ff-goal-fleet-legend i.spare{
  background:#f2b643;
}


.ff-goal-fleet-legend i.vor{
  background:#ef4e59;
}


.ff-goal-fleet-legend span{
  color:
    #9bb0be;

  font-size:
    9px;
}


.ff-goal-fleet-legend strong{
  color:
    #e1edf3;

  font-size:
    9px;
}


/* =========================================================
   QUICK ACTIONS
   ========================================================= */

.ff-goal-quick-actions{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:8px;

  padding:12px;
}


.ff-goal-quick-actions button{
  min-height:
    76px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:7px;

  padding:9px;

  border-radius:
    11px;

  border:
    1px solid
    rgba(105,170,204,.19);

  background:
    rgba(18,48,74,.55);

  color:
    #d8e9f2;

  font:inherit;

  font-size:
    9px;

  font-weight:
    800;

  cursor:pointer;
}


.ff-goal-quick-actions button:hover{
  border-color:
    rgba(71,220,201,.28);

  background:
    rgba(31,79,104,.60);
}


.ff-goal-quick-actions span{
  font-size:
    20px;
}


/* =========================================================
   ACTIVITY
   ========================================================= */

.ff-goal-activity{
  padding:
    10px 13px;
}


.ff-goal-activity-row{
  min-height:
    38px;

  display:grid;

  grid-template-columns:
    9px 1fr auto;

  align-items:start;

  gap:8px;

  padding:
    7px 0;
}


.ff-goal-activity-row i{
  width:8px;

  height:8px;

  margin-top:3px;

  border-radius:
    999px;

  box-shadow:
    0 0 9px
    currentColor;
}


.ff-goal-activity-row i.blue{
  color:#53c9de;
  background:#53c9de;
}


.ff-goal-activity-row i.green{
  color:#38d48d;
  background:#38d48d;
}


.ff-goal-activity-row>div{
  display:flex;

  flex-direction:column;

  min-width:0;
}


.ff-goal-activity-row strong{
  color:
    #dfeaf0;

  font-size:
    9px;
}


.ff-goal-activity-row span{
  margin-top:
    2px;

  overflow:hidden;

  color:
    #8099aa;

  font-size:
    8px;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


.ff-goal-activity-row small{
  color:
    #778f9f;

  font-size:
    8px;

  white-space:
    nowrap;
}


/* =========================================================
   GENERAL
   ========================================================= */

.ff-goal-empty{
  min-height:86px;

  display:flex;

  align-items:center;

  justify-content:center;

  color:
    #7f98a8;

  font-size:
    10px;

  text-align:center;
}


.ff-goal-footer{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:15px;

  padding:
    14px 3px 3px;

  color:
    #6f899c;

  font-size:
    8px;
}


.ff-goal-footer>div:first-child{
  display:flex;

  align-items:center;

  gap:8px;
}


.ff-goal-footer strong{
  color:
    #4edbc9;

  font-size:
    10px;
}


.ff-goal-load-error{
  min-height:
    260px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:6px;

  border:
    1px solid
    rgba(255,94,104,.17);

  border-radius:
    18px;

  background:
    rgba(255,94,104,.04);
}


.ff-goal-load-error strong{
  color:
    #f4f7f9;
}


.ff-goal-load-error span{
  color:
    #a0b2bd;

  font-size:
    11px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1150px){

  .ff-goal-kpis{
    grid-template-columns:
      1fr 1fr;
  }


  .ff-goal-secondary-grid{
    grid-template-columns:
      1fr 1fr;
  }


  .ff-goal-secondary-grid
  .ff-goal-panel:last-child{
    grid-column:
      1 / -1;
  }

}


@media(max-width:850px){

  .ff-goal-mode{
    padding:
      12px !important;
  }


  .ff-goal-topbar{
    align-items:flex-start;
  }


  .ff-goal-top-tools{
    display:none;
  }


  .ff-goal-primary-grid,
  .ff-goal-secondary-grid{
    grid-template-columns:
      1fr;
  }


  .ff-goal-secondary-grid
  .ff-goal-panel:last-child{
    grid-column:auto;
  }

}


@media(max-width:620px){

  .ff-goal-kpis{
    grid-template-columns:
      1fr 1fr;

    gap:8px;
  }


  .ff-goal-kpi{
    min-height:
      100px;

    padding:
      12px;

    gap:9px;
  }


  .ff-goal-kpi-icon{
    width:37px;

    height:37px;

    flex-basis:37px;

    font-size:15px;
  }


  .ff-goal-kpi strong{
    font-size:21px;
  }


  .ff-goal-kpi span{
    font-size:9px;
  }


  .ff-goal-kpi small{
    font-size:7px;
  }


  .ff-goal-fleet-overview{
    flex-direction:column;
  }


  .ff-goal-breakdown-row{
    grid-template-columns:
      30px 1fr;
  }


  .ff-goal-row-side{
    grid-column:
      2;

    flex-direction:row;

    align-items:center;
  }


  .ff-goal-bid-row{
    grid-template-columns:
      64px 1fr auto;
  }


  .ff-goal-bid-row small{
    display:none;
  }

}



/* =========================================================
   FIXFLEET FINAL SHELL POLISH
   ========================================================= */

.ff-final-hide-header,
.ff-final-hide-brand{
  display:none !important;
}


@media(min-width:901px){

  .ff-final-sidebar{
    position:sticky !important;

    top:0 !important;

    height:100vh !important;

    min-height:100vh !important;

    max-height:100vh !important;

    overflow-y:auto !important;

    overflow-x:hidden !important;

    background:
      linear-gradient(
        180deg,
        #081827 0%,
        #06111f 100%
      ) !important;

    border-right:
      1px solid
      rgba(95,173,201,.12) !important;

    box-shadow:
      18px 0 46px
      rgba(0,0,0,.16);
  }


  .ff-final-brand-kept{
    margin-bottom:
      16px !important;
  }

}


.ff-final-dashboard-root{
  min-height:
    auto !important;

  padding-top:
    12px !important;
}


.ff-final-dashboard{
  margin-top:
    0 !important;

  padding-top:
    0 !important;
}


.ff-final-dashboard
.ff-goal-topbar{
  margin-top:
    0 !important;

  margin-bottom:
    14px !important;
}


.ff-final-dashboard
.ff-goal-greeting h1{
  font-size:
    clamp(
      30px,
      3vw,
      39px
    ) !important;
}


.ff-final-dashboard
.ff-goal-kpis{
  margin-bottom:
    12px !important;
}


.ff-final-dashboard
.ff-goal-kpi{
  min-height:
    110px !important;
}


.ff-final-dashboard
.ff-goal-primary-grid{
  margin-bottom:
    11px !important;
}


.ff-final-dashboard
.ff-goal-panel{
  box-shadow:
    0 14px 44px
    rgba(0,0,0,.13) !important;
}


.ff-final-dashboard
.ff-goal-footer{
  margin-top:
    5px;

  padding-bottom:
    9px;
}


@media(min-width:1200px){

  .ff-final-dashboard
  .ff-goal-primary-grid{
    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr) !important;
  }


  .ff-final-dashboard
  .ff-goal-secondary-grid{
    grid-template-columns:
      1.08fr .87fr 1fr !important;
  }

}



/* =========================================================
   LOCKED FIXFLEET BRAND / SIDEBAR
   ========================================================= */

@media(min-width:901px){

  .ff-locked-sidebar{
    position:sticky !important;

    top:0 !important;

    width:250px !important;

    min-width:250px !important;

    height:100vh !important;

    min-height:100vh !important;

    max-height:100vh !important;

    display:flex !important;

    flex-direction:column !important;

    padding:
      25px 17px 20px !important;

    overflow:hidden !important;

    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(18,86,122,.13),
        transparent 38%
      ),
      linear-gradient(
        180deg,
        #071827 0%,
        #061421 55%,
        #06111e 100%
      ) !important;

    border-right:
      1px solid
      rgba(78,156,192,.14) !important;

    box-shadow:
      17px 0 48px
      rgba(0,0,0,.17);
  }

}


.ff-locked-old-nav{
  display:none !important;
}


.ff-locked-brand{
  display:flex;

  align-items:center;

  gap:11px;

  flex:
    0 0 auto;

  min-height:82px;

  padding:
    1px 7px 21px;

  border-bottom:
    1px solid
    rgba(255,255,255,.055);
}


.ff-locked-mark{
  position:relative;

  width:61px;

  height:60px;

  flex:
    0 0 61px;

  transform:
    skewX(-12deg);
}


.ff-locked-mark span{
  position:absolute;

  display:block;

  height:11px;

  border-radius:
    3px;

  background:
    linear-gradient(
      90deg,
      #61eadb,
      #27c4b4
    );

  box-shadow:
    0 0 15px
    rgba(61,222,204,.12);
}


.ff-mark-top{
  width:55px;

  left:6px;

  top:5px;
}


.ff-mark-mid{
  width:40px;

  left:13px;

  top:24px;
}


.ff-mark-low{
  width:25px;

  left:8px;

  top:43px;
}


.ff-locked-wordmark{
  display:flex;

  flex-direction:column;

  min-width:0;
}


.ff-locked-wordmark strong{
  display:block;

  line-height:1;

  font-size:
    25px;

  font-style:italic;

  font-weight:
    950;

  letter-spacing:
    -1px;

  white-space:
    nowrap;
}


.ff-locked-wordmark strong span{
  color:
    #f1f7fb;
}


.ff-locked-wordmark strong b{
  color:
    #52ddcb;
}


.ff-locked-wordmark small{
  margin-top:
    7px;

  color:
    #43d4c2;

  font-size:
    7px;

  line-height:1;

  font-weight:
    950;

  letter-spacing:
    1.5px;

  white-space:
    nowrap;
}


.ff-locked-navigation{
  display:flex;

  flex-direction:column;

  gap:6px;

  margin-top:
    18px;

  flex:
    0 0 auto;
}


.ff-locked-nav-button{
  appearance:none;

  width:100%;

  min-height:
    49px;

  display:flex;

  align-items:center;

  gap:14px;

  padding:
    9px 13px;

  border-radius:
    11px;

  border:
    1px solid
    transparent;

  background:
    transparent;

  color:
    #b7c9d7;

  font:inherit;

  font-size:
    13px;

  font-weight:
    650;

  text-align:left;

  cursor:pointer;

  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    transform .16s ease;
}


.ff-locked-nav-button:hover{
  color:
    #edf7fb;

  transform:
    translateX(2px);

  background:
    rgba(44,134,180,.08);
}


.ff-locked-nav-button.active{
  color:
    #f0f8fc;

  background:
    linear-gradient(
      90deg,
      rgba(37,132,183,.39),
      rgba(25,96,137,.28)
    );

  border-color:
    rgba(61,157,209,.38);

  box-shadow:
    inset 0 0 25px
    rgba(55,153,206,.075);
}


.ff-locked-nav-icon{
  width:25px;

  height:25px;

  flex:
    0 0 25px;

  display:flex;

  align-items:center;

  justify-content:center;
}


.ff-locked-nav-icon svg{
  width:23px;

  height:23px;

  fill:none;

  stroke:
    #a9ccee;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.ff-locked-nav-button.active
.ff-locked-nav-icon svg{
  fill:
    rgba(197,234,255,.08);

  stroke:
    #cbeeff;
}


.ff-locked-slogan{
  position:relative;

  margin-top:auto;

  min-height:245px;

  padding:
    170px 12px 6px;

  display:flex;

  flex-direction:column;

  gap:7px;

  overflow:hidden;
}


.ff-road-art{
  position:absolute;

  left:-22px;

  right:-60px;

  top:10px;

  height:165px;

  border-top:
    2px solid
    rgba(28,104,140,.20);

  border-radius:
    50% 50% 0 0;

  transform:
    rotate(-19deg);
}


.ff-road-art::before{
  content:"";

  position:absolute;

  inset:
    13px 0 auto 0;

  height:
    110px;

  border-top:
    2px solid
    rgba(28,104,140,.11);

  border-radius:
    50% 50% 0 0;
}


.ff-road-art i{
  position:absolute;

  width:26px;

  height:10px;

  border-radius:
    2px;

  background:
    linear-gradient(
      90deg,
      rgba(32,127,145,.45),
      rgba(43,198,171,.48)
    );

  transform:
    rotate(-12deg);
}


.ff-road-art i:nth-child(1){
  right:105px;
  top:50px;
}


.ff-road-art i:nth-child(2){
  right:92px;
  top:78px;
}


.ff-road-art i:nth-child(3){
  right:78px;
  top:106px;
}


.ff-road-art i:nth-child(4){
  right:61px;
  top:136px;
}


.ff-road-art i:nth-child(5){
  right:41px;
  top:166px;
}


.ff-locked-slogan strong,
.ff-locked-slogan span{
  position:relative;

  z-index:2;

  color:
    #b9cbd7;

  font-size:
    8px;

  line-height:1;

  font-weight:
    850;

  letter-spacing:
    1.7px;
}


.ff-locked-slogan span{
  color:
    #d7e3ea;
}


/* =========================================================
   FINAL DASHBOARD POLISH
   ========================================================= */

.ff-goal-dashboard{
  background:
    radial-gradient(
      circle at 85% -10%,
      rgba(17,88,130,.10),
      transparent 37%
    );
}


.ff-goal-topbar{
  border-bottom:
    1px solid
    rgba(104,166,196,.08);

  padding-bottom:
    13px;
}


.ff-goal-panel,
.ff-goal-kpi{
  box-shadow:
    0 16px 45px
    rgba(0,0,0,.13),
    inset 0 1px 0
    rgba(255,255,255,.015) !important;
}


.ff-goal-authorise{
  background:
    linear-gradient(
      90deg,
      #42dfb5,
      #24ced0
    ) !important;

  box-shadow:
    0 10px 30px
    rgba(37,205,188,.16) !important;
}


/* =========================================================
   LIVE TRACKING MAP — LOCKED REFERENCE
   ========================================================= */

.ff-final-map-panel{
  margin-top:
    12px;

  overflow:hidden;

  border-radius:
    16px;

  border:
    1px solid
    rgba(73,151,190,.24);

  background:
    linear-gradient(
      145deg,
      rgba(7,24,39,.99),
      rgba(5,17,29,.99)
    );

  box-shadow:
    0 18px 52px
    rgba(0,0,0,.16);
}


.ff-final-map-header{
  min-height:
    62px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:16px;

  padding:
    11px 16px;

  border-bottom:
    1px solid
    rgba(255,255,255,.055);
}


.ff-final-map-title{
  display:flex;

  align-items:center;

  gap:10px;
}


.ff-final-map-pin{
  width:32px;

  height:32px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:
    9px;

  color:
    #51dfcf;

  background:
    rgba(59,220,201,.08);

  font-size:
    17px;
}


.ff-final-map-title h2{
  margin:0;

  color:
    #eef7fb;

  font-size:
    15px;
}


.ff-final-map-title p{
  margin:
    3px 0 0;

  color:
    #849dad;

  font-size:
    9px;
}


.ff-final-map-legend{
  display:flex;

  align-items:center;

  flex-wrap:wrap;

  justify-content:flex-end;

  gap:13px;

  color:
    #9db0bd;

  font-size:
    8px;
}


.ff-final-map-legend span{
  display:flex;

  align-items:center;

  gap:6px;
}


.ff-final-map-legend i{
  width:8px;

  height:8px;

  display:block;

  border-radius:
    999px;
}


.ff-final-map-legend i.on-road{
  background:#39dd99;
}


.ff-final-map-legend i.breakdown{
  background:#ff5562;
}


.ff-final-map-legend i.workshop{
  background:#4eaaf1;
}


.ff-final-map-legend i.idle{
  background:#8cafcf;
}


.ff-final-map-wrap{
  position:relative;
}


.ff-final-map-canvas{
  width:100%;

  height:
    clamp(
      330px,
      43vh,
      510px
    );

  min-height:
    330px;

  background:
    #071522;
}


.ff-final-map-canvas
.leaflet-tile-pane{
  filter:
    brightness(.43)
    saturate(.78)
    contrast(1.22)
    hue-rotate(165deg);
}


.ff-final-map-canvas
.leaflet-control-zoom{
  border:
    1px solid
    rgba(119,178,205,.22) !important;

  border-radius:
    9px !important;

  overflow:hidden;

  box-shadow:
    0 8px 24px
    rgba(0,0,0,.28) !important;
}


.ff-final-map-canvas
.leaflet-control-zoom a{
  width:32px !important;

  height:32px !important;

  line-height:
    32px !important;

  background:
    #081a2a !important;

  color:
    #d9ecf5 !important;

  border-color:
    rgba(255,255,255,.06) !important;
}


.ff-final-map-canvas
.leaflet-control-attribution{
  background:
    rgba(5,16,27,.78) !important;

  color:
    #627d8f !important;

  font-size:
    7px !important;
}


.ff-final-map-canvas
.leaflet-control-attribution a{
  color:
    #6da9c4 !important;
}


.ff-live-map-divicon{
  background:
    transparent !important;

  border:0 !important;
}


.ff-live-map-marker{
  width:36px;

  height:36px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:
    10px;

  border:
    2px solid
    rgba(235,252,255,.84);

  color:white;

  font-size:
    13px;

  font-weight:
    950;
}


.ff-live-map-marker.road{
  background:
    #19bf92;

  box-shadow:
    0 0 0 5px
    rgba(25,191,146,.13),
    0 0 24px
    rgba(25,191,146,.42);
}


.ff-live-map-marker.breakdown{
  background:
    #d94c5a;

  box-shadow:
    0 0 0 5px
    rgba(217,76,90,.16),
    0 0 24px
    rgba(217,76,90,.44);
}


.ff-live-map-marker.workshop{
  background:
    #318bd0;

  box-shadow:
    0 0 0 5px
    rgba(49,139,208,.15),
    0 0 24px
    rgba(49,139,208,.40);
}


.ff-live-map-marker.idle{
  background:
    #6386a5;

  box-shadow:
    0 0 0 5px
    rgba(99,134,165,.13);
}


.ff-final-map-canvas
.leaflet-popup-content-wrapper,
.ff-final-map-canvas
.leaflet-popup-tip{
  background:
    #081827 !important;

  color:
    white !important;

  border:
    1px solid
    rgba(91,170,202,.20);

  box-shadow:
    0 15px 40px
    rgba(0,0,0,.35);
}


.ff-map-popup{
  min-width:
    145px;

  display:flex;

  flex-direction:column;

  gap:4px;
}


.ff-map-popup strong{
  color:
    #eff7fb;

  font-size:
    12px;
}


.ff-map-popup span{
  color:
    #50ddcb;

  font-size:
    7px;

  font-weight:
    950;

  letter-spacing:
    .8px;
}


.ff-map-popup p{
  margin:0;

  color:
    #8ea6b5;

  font-size:
    9px;
}


.ff-final-map-status{
  position:absolute;

  left:14px;

  bottom:14px;

  z-index:500;
}


.ff-map-info-pill{
  max-width:
    390px;

  display:flex;

  align-items:center;

  gap:8px;

  padding:
    8px 11px;

  border-radius:
    999px;

  border:
    1px solid
    rgba(116,169,195,.19);

  background:
    rgba(5,20,33,.88);

  color:
    #91a9b8;

  backdrop-filter:
    blur(10px);

  font-size:
    8px;

  box-shadow:
    0 8px 25px
    rgba(0,0,0,.19);
}


.ff-map-info-pill.good{
  color:
    #5ce0ae;

  border-color:
    rgba(52,216,146,.25);
}


.ff-map-unavailable{
  height:100%;

  display:flex;

  align-items:center;

  justify-content:center;

  color:
    #839bab;
}


@media(max-width:900px){

  .ff-locked-brand,
  .ff-locked-navigation,
  .ff-locked-slogan{
    display:none;
  }


  .ff-final-map-header{
    align-items:flex-start;

    flex-direction:column;
  }


  .ff-final-map-legend{
    justify-content:flex-start;
  }

}


@media(max-width:620px){

  .ff-final-map-canvas{
    height:
      370px;

    min-height:
      370px;
  }

}



/* =========================================================
   FIXFLEET MASTER SIDEBAR
   ========================================================= */

@media(min-width:901px){

  .ff-master-sidebar{
    position:fixed;

    z-index:50000;

    top:0;
    bottom:0;
    left:0;

    width:260px;

    display:flex;

    flex-direction:column;

    padding:
      26px 18px 20px;

    overflow:hidden;

    background:
      radial-gradient(
        circle at 95% 0%,
        rgba(24,111,150,.12),
        transparent 38%
      ),
      linear-gradient(
        180deg,
        #071827 0%,
        #061420 55%,
        #05111d 100%
      );

    border-right:
      1px solid
      rgba(83,156,188,.17);

    box-shadow:
      18px 0 55px
      rgba(0,0,0,.24);
  }

}


.ff-master-brand{
  display:flex;

  align-items:center;

  gap:11px;

  padding:
    2px 7px 25px;

  border-bottom:
    1px solid
    rgba(255,255,255,.055);
}


.ff-master-symbol{
  position:relative;

  width:63px;

  height:62px;

  flex:
    0 0 63px;

  transform:
    skewX(-13deg);
}


.ff-master-symbol i{
  position:absolute;

  display:block;

  height:10px;

  border-radius:
    2px;

  background:
    linear-gradient(
      90deg,
      #5af0df,
      #20c9b6
    );

  box-shadow:
    0 0 16px
    rgba(54,220,201,.13);
}


.ff-master-symbol i:nth-child(1){
  width:57px;
  left:5px;
  top:5px;
}


.ff-master-symbol i:nth-child(2){
  width:42px;
  left:12px;
  top:24px;
}


.ff-master-symbol i:nth-child(3){
  width:27px;
  left:7px;
  top:43px;
}


.ff-master-symbol b{
  position:absolute;

  display:block;

  width:8px;

  height:30px;

  border-radius:
    2px;

  bottom:3px;

  background:
    linear-gradient(
      180deg,
      #36dcca,
      #17ad9d
    );

  transform:
    skewX(-10deg);
}


.ff-master-symbol b:nth-of-type(1){
  left:25px;
}


.ff-master-symbol b:nth-of-type(2){
  left:39px;
}


.ff-master-word{
  display:flex;

  flex-direction:column;
}


.ff-master-word strong{
  line-height:1;

  font-size:
    25px;

  font-style:
    italic;

  font-weight:
    950;

  letter-spacing:
    -1px;

  white-space:
    nowrap;
}


.ff-master-word strong span{
  color:#f4f8fb;
}


.ff-master-word strong em{
  color:#4addca;

  font-style:
    italic;
}


.ff-master-word small{
  margin-top:
    7px;

  color:
    #42d8c5;

  font-size:
    7px;

  font-weight:
    950;

  letter-spacing:
    1.55px;

  white-space:
    nowrap;
}


.ff-master-navigation{
  display:flex;

  flex-direction:
    column;

  gap:7px;

  margin-top:
    21px;
}


.ff-master-nav{
  appearance:none;

  width:100%;

  min-height:
    51px;

  display:flex;

  align-items:center;

  gap:15px;

  padding:
    10px 13px;

  border-radius:
    11px;

  border:
    1px solid
    transparent;

  background:
    transparent;

  color:
    #b8cbda;

  font:inherit;

  font-size:
    13px;

  font-weight:
    650;

  text-align:left;

  cursor:pointer;

  transition:
    .16s ease;
}


.ff-master-nav:hover{
  color:
    #eef7fb;

  transform:
    translateX(2px);

  background:
    rgba(46,137,179,.075);
}


.ff-master-nav.active{
  color:
    #f1f8fc;

  border-color:
    rgba(54,159,212,.38);

  background:
    linear-gradient(
      90deg,
      rgba(38,132,180,.39),
      rgba(20,85,125,.27)
    );

  box-shadow:
    inset 0 0 28px
    rgba(63,165,216,.06);
}


.ff-master-icon{
  width:26px;

  height:26px;

  flex:
    0 0 26px;
}


.ff-master-icon svg{
  width:25px;

  height:25px;

  fill:none;

  stroke:
    #aacdeb;

  stroke-width:
    1.85;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.ff-master-nav.active
.ff-master-icon svg{
  stroke:
    #d1f0ff;

  fill:
    rgba(201,239,255,.06);
}


.ff-master-bottom{
  position:relative;

  margin-top:auto;

  min-height:
    250px;

  overflow:hidden;
}


.ff-master-road{
  position:absolute;

  width:340px;

  height:230px;

  left:-93px;

  top:3px;

  border-top:
    2px solid
    rgba(36,112,145,.22);

  border-radius:
    50%;

  transform:
    rotate(-20deg);
}


.ff-master-road::before{
  content:"";

  position:absolute;

  inset:
    15px auto auto 16px;

  width:295px;

  height:185px;

  border-top:
    2px solid
    rgba(35,109,143,.10);

  border-radius:
    50%;
}


.ff-master-road i{
  position:absolute;

  width:29px;

  height:10px;

  border-radius:
    2px;

  transform:
    rotate(-10deg);

  background:
    linear-gradient(
      90deg,
      rgba(26,115,144,.43),
      rgba(44,202,173,.48)
    );
}


.ff-master-road i:nth-child(1){
  right:70px;
  top:45px;
}


.ff-master-road i:nth-child(2){
  right:57px;
  top:75px;
}


.ff-master-road i:nth-child(3){
  right:42px;
  top:106px;
}


.ff-master-road i:nth-child(4){
  right:27px;
  top:138px;
}


.ff-master-road i:nth-child(5){
  right:10px;
  top:171px;
}


.ff-master-slogan{
  position:absolute;

  left:13px;

  bottom:5px;

  z-index:2;

  display:flex;

  flex-direction:
    column;

  gap:7px;
}


.ff-master-slogan strong,
.ff-master-slogan span{
  color:
    #b8cbd8;

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    1.7px;
}


.ff-master-slogan span{
  color:
    #e0e9ef;
}


@media(max-height:740px) and (min-width:901px){

  .ff-master-sidebar{
    padding-top:
      18px;
  }


  .ff-master-brand{
    padding-bottom:
      16px;
  }


  .ff-master-navigation{
    margin-top:
      12px;

    gap:3px;
  }


  .ff-master-nav{
    min-height:
      43px;
  }


  .ff-master-bottom{
    min-height:
      125px;
  }


  .ff-master-road{
    display:none;
  }


  .ff-master-slogan{
    bottom:8px;
  }

}


@media(max-width:900px){

  .ff-master-sidebar{
    display:none !important;
  }

}



/* =========================================================
   SIDEBAR UNDERLAY CLEANUP
   ========================================================= */

@media(min-width:901px){

  .ff-legacy-sidebar-hidden{
    visibility:hidden !important;
    pointer-events:none !important;
  }


  #ffMasterSidebar{
    background:
      radial-gradient(
        circle at 95% 0%,
        rgba(24,111,150,.12),
        transparent 38%
      ),
      linear-gradient(
        180deg,
        #071827 0%,
        #061420 55%,
        #05111d 100%
      ) !important;

    opacity:1 !important;

    overflow:hidden !important;
  }

}


/* Keep every required menu item visible on laptop screens */

@media(min-width:901px) and (max-height:900px){

  .ff-master-sidebar{
    padding:
      18px 16px 14px !important;
  }


  .ff-master-brand{
    padding:
      0 6px 15px !important;
  }


  .ff-master-symbol{
    width:54px !important;
    height:52px !important;
    flex-basis:54px !important;
  }


  .ff-master-word strong{
    font-size:
      22px !important;
  }


  .ff-master-navigation{
    margin-top:
      12px !important;

    gap:
      2px !important;
  }


  .ff-master-nav{
    min-height:
      41px !important;

    padding:
      7px 12px !important;
  }


  .ff-master-icon{
    width:
      23px !important;

    height:
      23px !important;

    flex-basis:
      23px !important;
  }


  .ff-master-icon svg{
    width:
      22px !important;

    height:
      22px !important;
  }


  .ff-master-bottom{
    min-height:
      105px !important;
  }


  .ff-master-road{
    height:
      105px !important;

    top:
      0 !important;
  }


  .ff-master-slogan{
    bottom:
      3px !important;
  }

}



/* HARD LEGACY SIDEBAR REMOVAL */

@media(min-width:901px){

  .ff-hide-old-sidebar-hard{
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  #ffMasterSidebar{
    z-index:60000 !important;

    opacity:1 !important;

    background:
      linear-gradient(
        180deg,
        #071827 0%,
        #061420 55%,
        #05111d 100%
      ) !important;
  }

}



/* =========================================================
   REMOVE OLD COMMAND CENTRE RAIL
   ========================================================= */

@media(min-width:901px){

  .ff-centre-rail-dead{
    display:none !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
  }


  .ff-centre-text-dead{
    display:none !important;
  }


  #ffMasterSidebar{
    z-index:70000 !important;
  }

}



/* =========================================================
   CLOSE LEGACY SIDEBAR GAP
   ========================================================= */

@media(min-width:901px){

  #ffGoalDashboard.ff-sidebar-gap-closed{
    position:relative !important;

    z-index:5 !important;
  }


  /*
    The old sidebar may still exist invisibly for navigation.
    It must never show through our finished dashboard.
  */

  .ff-legacy-sidebar-hidden,
  .ff-hide-old-sidebar-hard{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

}



/* =========================================================
   DETACHED PREMIUM DASHBOARD
   Old shell can no longer bleed through
   ========================================================= */

@media(min-width:901px){

  #ffDesktopDashboardHost{
    position:fixed !important;

    top:0 !important;
    right:0 !important;
    bottom:0 !important;

    z-index:60000 !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    padding:
      18px 22px 30px !important;

    background:
      radial-gradient(
        circle at 84% 0%,
        rgba(16,88,126,.12),
        transparent 34%
      ),
      linear-gradient(
        180deg,
        #06101c 0%,
        #050d17 100%
      ) !important;

    box-sizing:border-box !important;
  }


  #ffDesktopDashboardHost
  #ffGoalDashboard{
    width:100% !important;

    max-width:none !important;

    margin:0 !important;

    position:relative !important;

    left:auto !important;
    right:auto !important;

    transform:none !important;
  }


  /*
    The original dashboard and old rail stay
    behind the new product instead of showing
    through it.
  */
  body.ff-detached-dashboard-active
  .ff-old-dashboard-underlay{
    visibility:hidden !important;
    pointer-events:none !important;
  }


  /*
    Premium sidebar remains above everything.
  */
  #ffMasterSidebar{
    z-index:70000 !important;

    opacity:1 !important;

    background:
      linear-gradient(
        180deg,
        #071827 0%,
        #061420 55%,
        #05111d 100%
      ) !important;
  }


  /*
    Kill every previous gap/position adjustment
    now that the dashboard has its own host.
  */
  #ffDesktopDashboardHost
  .ff-sidebar-gap-closed{
    margin-left:0 !important;
    width:100% !important;
  }

}


/* Mobile continues using the normal app structure */

@media(max-width:900px){

  #ffDesktopDashboardHost{
    display:contents !important;
  }

}




/* =========================================================
   FIXFLEET FINAL WHATSAPP DESKTOP CSS
   ========================================================= */

@media(min-width:901px){

  #ffMasterSidebar{
    width:260px !important;
    min-width:260px !important;
    max-width:260px !important;

    padding:
      22px 17px 18px !important;

    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(18,107,145,.14),
        transparent 38%
      ),
      linear-gradient(
        180deg,
        #071827 0%,
        #061420 58%,
        #05111d 100%
      ) !important;

    border-right:
      1px solid
      rgba(78,157,192,.18) !important;

    box-shadow:
      18px 0 50px
      rgba(0,0,0,.19) !important;
  }


  #ffDesktopDashboardHost{
    left:260px !important;

    padding:
      18px 20px 28px !important;

    background:
      radial-gradient(
        circle at 82% -5%,
        rgba(13,91,134,.13),
        transparent 35%
      ),
      linear-gradient(
        180deg,
        #06111e,
        #050d17
      ) !important;
  }

}


/* Exact logo from WhatsApp */

.ff-master-brand{
  min-height:
    96px !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  padding:
    0 2px 18px !important;

  overflow:visible !important;
}


.ff-final-whatsapp-logo{
  display:block;

  width:100%;

  max-width:
    220px;

  height:auto;

  object-fit:contain;

  border-radius:
    4px;

  filter:
    drop-shadow(
      0 6px 16px
      rgba(43,215,197,.12)
    );
}


.ff-master-symbol,
.ff-master-word{
  display:none !important;
}


/* Sidebar */

.ff-master-navigation{
  margin-top:
    14px !important;

  gap:
    5px !important;
}


.ff-master-nav{
  min-height:
    47px !important;

  padding:
    9px 13px !important;

  border-radius:
    11px !important;

  font-size:
    13px !important;
}


.ff-master-nav.active{
  background:
    linear-gradient(
      90deg,
      rgba(35,137,185,.41),
      rgba(22,97,138,.29)
    ) !important;

  border-color:
    rgba(61,168,213,.40) !important;

  box-shadow:
    inset 0 0 26px
    rgba(53,168,207,.07),
    0 8px 24px
    rgba(0,0,0,.08) !important;
}


.ff-master-slogan strong,
.ff-master-slogan span{
  letter-spacing:
    1.8px !important;
}


/* Top header */

.ff-goal-topbar{
  min-height:
    86px !important;

  padding:
    2px 2px 14px !important;

  margin-bottom:
    13px !important;

  border-bottom:
    1px solid
    rgba(95,164,196,.09) !important;
}


.ff-goal-greeting h1{
  font-size:
    clamp(
      31px,
      3vw,
      40px
    ) !important;

  letter-spacing:
    -1.25px !important;
}


.ff-goal-greeting p{
  margin-top:
    7px !important;

  color:
    #9aafbe !important;

  font-size:
    13px !important;
}


.ff-goal-search{
  width:
    clamp(
      275px,
      29vw,
      375px
    ) !important;
}


.ff-goal-search input{
  height:
    42px !important;

  border-color:
    rgba(49,153,205,.48) !important;

  background:
    linear-gradient(
      90deg,
      rgba(8,39,65,.84),
      rgba(9,44,72,.68)
    ) !important;
}


/* KPI cards */

.ff-goal-kpi{
  position:relative !important;

  overflow:hidden !important;

  min-height:
    112px !important;

  border-color:
    rgba(66,158,194,.20) !important;

  background:
    linear-gradient(
      145deg,
      rgba(10,31,50,.99),
      rgba(6,23,39,.99)
    ) !important;
}


.ff-goal-kpi:nth-child(1)::after,
.ff-goal-kpi:nth-child(2)::after,
.ff-goal-kpi:nth-child(4)::after{
  content:"";

  position:absolute;

  right:11px;
  bottom:10px;

  width:92px;
  height:34px;

  background-repeat:no-repeat;

  background-position:center;

  background-size:contain;

  pointer-events:none;
}


.ff-goal-kpi:nth-child(1)::after,
.ff-goal-kpi:nth-child(4)::after{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 32'%3E%3Cpath d='M2 27 L13 23 L24 24 L35 18 L46 20 L56 13 L68 16 L81 7 L98 12' fill='none' stroke='%2347dcc9' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


.ff-goal-kpi:nth-child(2)::after{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 32'%3E%3Cpath d='M2 27 L14 24 L24 25 L36 19 L47 21 L59 12 L70 16 L82 7 L98 12' fill='none' stroke='%23ef5563' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* Dashboard panels */

.ff-goal-panel{
  border-color:
    rgba(79,153,187,.17) !important;

  background:
    linear-gradient(
      145deg,
      rgba(9,27,44,.99),
      rgba(6,20,34,.99)
    ) !important;

  box-shadow:
    0 15px 44px
    rgba(0,0,0,.13) !important;
}


.ff-goal-alert-panel{
  border-color:
    rgba(255,81,96,.34) !important;
}


.ff-goal-authorise{
  min-height:
    47px !important;

  background:
    linear-gradient(
      90deg,
      #43dfb4,
      #25cfd0
    ) !important;

  border-color:
    rgba(89,244,221,.44) !important;

  color:
    #04251f !important;

  font-size:
    12px !important;

  box-shadow:
    0 10px 31px
    rgba(40,210,191,.16) !important;
}


/* Premium dark map */

.ff-final-map-panel{
  margin-top:
    12px !important;

  border-color:
    rgba(58,151,193,.27) !important;

  background:
    #061421 !important;
}


.ff-final-map-header{
  min-height:
    61px !important;
}


.ff-final-map-view{
  appearance:none;

  min-height:
    35px;

  padding:
    7px 12px;

  margin-left:auto;

  border-radius:
    9px;

  border:
    1px solid
    rgba(72,161,205,.32);

  background:
    rgba(19,65,95,.48);

  color:
    #c9e7f5;

  font:inherit;

  font-size:
    9px;

  font-weight:
    800;

  cursor:pointer;
}


.ff-final-map-canvas{
  height:
    clamp(
      340px,
      43vh,
      520px
    ) !important;

  background:
    #06131f !important;
}


.ff-final-map-canvas
.leaflet-tile-pane{
  filter:
    brightness(.46)
    saturate(.76)
    contrast(1.22)
    hue-rotate(155deg) !important;
}


/* Full-screen map */

.ff-final-map-panel.ff-map-expanded{
  position:fixed !important;

  z-index:
    90000 !important;

  inset:
    18px !important;

  margin:
    0 !important;

  border-radius:
    18px !important;

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.55) !important;
}


.ff-final-map-panel.ff-map-expanded
.ff-final-map-canvas{
  height:
    calc(100vh - 105px) !important;
}


body.ff-map-expanded-body{
  overflow:hidden !important;
}


/* Remove floating AI button from dashboard */

.ff-final-dashboard-ai-hidden{
  display:none !important;
}


/* Laptop height optimisation */

@media(min-width:901px) and (max-height:820px){

  .ff-master-navigation{
    gap:
      1px !important;

    margin-top:
      9px !important;
  }


  .ff-master-nav{
    min-height:
      40px !important;
  }


  .ff-master-bottom{
    min-height:
      115px !important;
  }

}



/* =========================================================
   FIXFLEET CLEAN LEGACY LAYOUT
   Dashboard is deliberately untouched.
   ========================================================= */

@media(min-width:901px){

  /*
    Remove the original application's
    abandoned 230px grid column.
  */

  body.ff-clean-legacy > main{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }


  body.ff-clean-legacy
  #admin:not(.hidden){

    display:block !important;

    width:
      calc(100vw - 260px) !important;

    max-width:
      none !important;

    min-height:
      100vh !important;

    margin:
      0 0 0 260px !important;

    padding:
      24px !important;

    box-sizing:
      border-box !important;

    grid-template-columns:
      none !important;

    gap:
      0 !important;

    overflow-x:
      hidden !important;
  }


  body.ff-clean-legacy
  #fixFleetAdminSidebar,

  body.ff-clean-legacy
  #adminTabs,

  body.ff-clean-legacy
  #admin > .ff-page-head,

  body.ff-clean-legacy
  #welcome,

  body.ff-clean-legacy
  #companyLine{

    display:none !important;
  }


  body.ff-clean-legacy
  #admin > :not(#fixFleetAdminSidebar){

    grid-column:
      auto !important;

    grid-row:
      auto !important;

    width:
      100% !important;

    max-width:
      none !important;

    margin-left:
      0 !important;

    margin-right:
      0 !important;

    box-sizing:
      border-box !important;
  }


  body.ff-clean-legacy
  #admin
  .admin-tab-panel:not(.hidden),

  body.ff-clean-legacy
  #admin
  .ff-shell-hub:not(.hidden){

    width:
      100% !important;

    max-width:
      none !important;

    margin:
      0 !important;

    box-sizing:
      border-box !important;
  }


  body.ff-clean-legacy
  #admin
  .ff-page-heading{

    width:
      100% !important;

    max-width:
      none !important;
  }

}


/* =========================================================
   CLEAN PAGE BACK BUTTON
   ========================================================= */

.ff-clean-back-row{
  width:100%;

  display:flex;

  margin:
    0 0 16px;
}


.ff-clean-back-button{
  appearance:none;

  display:inline-flex;

  align-items:center;

  gap:
    9px;

  min-height:
    38px;

  padding:
    8px 13px;

  border:
    1px solid
    rgba(63,184,210,.34);

  border-radius:
    10px;

  background:
    rgba(9,38,59,.82);

  color:
    #dceff6;

  font:
    inherit;

  font-size:
    11px;

  font-weight:
    800;

  cursor:
    pointer;
}


.ff-clean-back-button span{
  color:
    #45dcc4;

  font-size:
    18px;
}


/* =========================================================
   SIDEBAR ROAD — REFERENCE STYLE
   ========================================================= */

/*
  Ignore all previous road elements.
*/

#ffMasterSidebar
.ff-master-road,

#ffMasterSidebar
.ff-unified-road{

  display:none !important;
}


#ffMasterSidebar
.ff-master-bottom{

  position:relative !important;

  overflow:hidden !important;

  min-height:
    235px !important;
}


/*
  One single vector illustration.
  Because this is one image rather than five
  positioned DOM blocks, it cannot fall apart.
*/

#ffMasterSidebar
.ff-master-bottom::before{

  content:"";

  position:absolute;

  z-index:1;

  left:
    -10px;

  bottom:
    34px;

  width:
    255px;

  height:
    220px;

  pointer-events:none;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 255 220'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23136d88' stop-opacity='.72'/%3E%3Cstop offset='1' stop-color='%233de1b5' stop-opacity='.96'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-35 224 C26 178 75 143 133 117 C169 101 205 88 270 72' fill='none' stroke='%231b688d' stroke-opacity='.34' stroke-width='2'/%3E%3Cpath d='M-44 240 C23 188 78 153 138 128 C180 110 218 99 272 88' fill='none' stroke='%23185880' stroke-opacity='.16' stroke-width='2'/%3E%3Cpolygon points='34,187 79,169 89,180 45,199' fill='url(%23g)'/%3E%3Cpolygon points='80,158 118,144 127,153 90,169' fill='url(%23g)'/%3E%3Cpolygon points='122,134 153,123 161,131 130,143' fill='url(%23g)'/%3E%3Cpolygon points='159,114 184,106 191,112 166,121' fill='url(%23g)'/%3E%3Cpolygon points='192,98 211,92 216,97 197,104' fill='url(%23g)'/%3E%3C/svg%3E");

  background-repeat:
    no-repeat;

  background-size:
    contain;

  background-position:
    left bottom;

  filter:
    drop-shadow(
      0 5px 13px
      rgba(35,200,173,.08)
    );
}


#ffMasterSidebar
.ff-master-slogan{

  position:absolute !important;

  z-index:
    3 !important;

  left:
    12px !important;

  bottom:
    8px !important;
}


/* MacBook screen */

@media(min-width:901px) and (max-height:820px){

  #ffMasterSidebar
  .ff-master-bottom{

    min-height:
      175px !important;
  }


  #ffMasterSidebar
  .ff-master-bottom::before{

    width:
      205px;

    height:
      165px;

    bottom:
      28px;
  }

}



/* =========================================================
   FIXFLEET DASHBOARD OVERLAY VISIBILITY FIX
   ========================================================= */

@media(min-width:901px){

  /*
    Whenever a real application page is open,
    the custom Dashboard must physically leave
    the screen rather than covering it.
  */

  body.ff-show-real-page
  #ffDesktopDashboardHost{

    display:none !important;

    visibility:hidden !important;

    pointer-events:none !important;

    z-index:-1 !important;

  }


  /*
    Ensure the actual application can then
    occupy the visible area.
  */

  body.ff-show-real-page
  #admin:not(.hidden){

    visibility:visible !important;

    opacity:1 !important;

    pointer-events:auto !important;

  }

}



/* =========================================================
   FIXFLEET FINAL BUG CSS 20260912
   Dashboard / map / sidebar intentionally untouched.
   ========================================================= */


/* ---------------------------------------------------------
   CONTENT WIDTH SAFETY
   --------------------------------------------------------- */

@media(min-width:901px){

  body.ff-show-real-page
  #admin
  .admin-tab-panel:not(.hidden),

  body.ff-clean-legacy
  #admin
  .admin-tab-panel:not(.hidden){

    max-width:
      100% !important;

    box-sizing:
      border-box !important;

    overflow-x:
      hidden;

  }


  .ff-final-wide-shell{

    width:
      100% !important;

    max-width:
      100% !important;

    box-sizing:
      border-box !important;

    margin-left:
      0 !important;

    margin-right:
      0 !important;

    transform:
      none !important;

  }

}


/* ---------------------------------------------------------
   REPORT HEADERS
   Keep Download CSV / Print PDF on-screen.
   --------------------------------------------------------- */

#admin .ff-report-head{

  display:flex;

  flex-wrap:
    wrap !important;

  align-items:
    flex-start !important;

  gap:
    12px !important;

  max-width:
    100% !important;

  box-sizing:
    border-box !important;

}


#admin .ff-report-head > *{

  min-width:
    0;

  max-width:
    100%;

}


/* ---------------------------------------------------------
   REPORT TABLES
   Wide records scroll inside the card rather
   than forcing the entire application off-screen.
   --------------------------------------------------------- */

.ff-report-scroll-safe{

  width:
    100% !important;

  max-width:
    100% !important;

  overflow-x:
    auto !important;

  overflow-y:
    hidden;

  box-sizing:
    border-box;

  -webkit-overflow-scrolling:
    touch;

}


.ff-report-scroll-safe
.ff-report-table{

  width:
    max-content;

  min-width:
    100%;

}


/* ---------------------------------------------------------
   BACK TO REPORTS CENTRE
   --------------------------------------------------------- */

.ff-back-reports-row{

  display:flex;

  align-items:center;

  width:
    100%;

  margin:
    0 0 14px;

}


.ff-back-reports-button{

  appearance:none;

  display:inline-flex;

  align-items:center;

  gap:
    9px;

  min-height:
    38px;

  padding:
    9px 13px;

  border:
    1px solid
    rgba(65,185,214,.34);

  border-radius:
    11px;

  background:
    rgba(8,38,59,.82);

  color:
    #ddf3fa;

  font:
    inherit;

  font-size:
    11px;

  font-weight:
    850;

  cursor:
    pointer;

  box-shadow:
    0 8px 25px
    rgba(0,0,0,.14);

}


.ff-back-reports-button:hover{

  border-color:
    rgba(64,220,205,.48);

  background:
    rgba(11,52,73,.94);

}


.ff-back-reports-button span{

  color:
    #42ddc8;

  font-size:
    18px;

  line-height:
    1;

}


/* ---------------------------------------------------------
   ASK FIXFLEET AI
   Fixed safe position with room below real pages.
   --------------------------------------------------------- */

@media(min-width:901px){

  .ff-final-ai-control{

    position:
      fixed !important;

    right:
      22px !important;

    bottom:
      20px !important;

    left:
      auto !important;

    top:
      auto !important;

    z-index:
      76000 !important;

    margin:
      0 !important;

    transform:
      none !important;

  }


  body.ff-show-real-page
  #admin,

  body.ff-clean-legacy
  #admin{

    padding-bottom:
      90px !important;

  }

}


/* ---------------------------------------------------------
   Generic field/form safety for detached sub-pages.
   --------------------------------------------------------- */

.ff-final-wide-shell input,
.ff-final-wide-shell select,
.ff-final-wide-shell textarea,
.ff-final-wide-shell .field{

  max-width:
    100% !important;

  box-sizing:
    border-box !important;

}


/* Mobile remains untouched. */

@media(max-width:900px){

  .ff-back-reports-row{

    display:none;

  }

}



/* =========================================================
   FIXFLEET REAL CONTENT BOUNDARY
   FINAL desktop geometry authority
   ========================================================= */

:root{

  --ff-real-content-left:
    290px;

  --ff-real-content-right:
    18px;

}


@media(min-width:901px){

  /*
    These are the OLD interface elements visible
    behind the finished FixFleet shell.

    Hide them ALWAYS on desktop — not only when a
    particular temporary body class happens to exist.
  */

  #fixFleetAdminSidebar,
  #adminTabs,
  #admin > .ff-page-head,
  #welcome,
  #companyLine{

    display:none !important;

    visibility:hidden !important;

    pointer-events:none !important;

  }


  /*
    NON-DASHBOARD APPLICATION PAGES

    Use the actual right edge of #ffMasterSidebar
    measured in JavaScript.

    No more 260px / 278px guesses.
  */

  body.ff-show-real-page
  #admin:not(.hidden),

  body.ff-clean-legacy
  #admin:not(.hidden),

  body.ff-unified-legacy-view
  #admin:not(.hidden){

    display:block !important;

    position:relative !important;

    left:auto !important;
    right:auto !important;

    transform:none !important;

    margin-top:0 !important;

    margin-right:
      var(--ff-real-content-right) !important;

    margin-bottom:0 !important;

    margin-left:
      var(--ff-real-content-left) !important;

    padding:
      22px 0 90px 0 !important;

    width:
      calc(
        100vw -
        var(--ff-real-content-left) -
        var(--ff-real-content-right)
      ) !important;

    max-width:none !important;

    min-width:0 !important;

    box-sizing:border-box !important;

    grid-template-columns:
      none !important;

    gap:0 !important;

    overflow-x:hidden !important;

  }


  /*
    Retire every old grid-column instruction.
  */

  body.ff-show-real-page
  #admin > :not(#fixFleetAdminSidebar),

  body.ff-clean-legacy
  #admin > :not(#fixFleetAdminSidebar),

  body.ff-unified-legacy-view
  #admin > :not(#fixFleetAdminSidebar){

    grid-column:
      auto !important;

    grid-row:
      auto !important;

    position:relative;

    left:auto !important;

    right:auto !important;

    margin-left:
      0 !important;

    margin-right:
      0 !important;

    transform:
      none !important;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    box-sizing:
      border-box !important;

  }


  /*
    ==============================================
    DRIVER HOURS / MONITORING

    We now know its exact ID.
    ==============================================
  */

  #driverHoursCentre{

    position:relative !important;

    inset:auto !important;

    left:auto !important;

    right:auto !important;

    top:auto !important;

    bottom:auto !important;

    transform:none !important;

    margin:
      0 !important;

    padding-left:
      0 !important;

    padding-right:
      0 !important;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    box-sizing:
      border-box !important;

  }


  #driverHoursCentreContent{

    position:relative !important;

    left:auto !important;

    right:auto !important;

    transform:none !important;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    margin:
      0 !important;

    box-sizing:
      border-box !important;

  }


  /*
    ==============================================
    ADD VEHICLE

    Exact ID from the source inspection.
    ==============================================
  */

  #vehicleForm:not(.hidden){

    position:relative !important;

    inset:auto !important;

    left:auto !important;

    right:auto !important;

    top:auto !important;

    transform:none !important;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    margin:
      0 !important;

    box-sizing:
      border-box !important;

  }


  #vehicleForm .row{

    max-width:
      100% !important;

    box-sizing:
      border-box !important;

  }


  #vehicleForm input,
  #vehicleForm select,
  #vehicleForm textarea,
  #vehicleForm .field{

    width:
      100%;

    max-width:
      100% !important;

    min-width:
      0 !important;

    box-sizing:
      border-box !important;

  }


  /*
    ==============================================
    ALL INTERNAL ADMIN PANELS

    Prevent another dynamically-created screen
    from repeating the same issue.
    ==============================================
  */

  #admin
  .admin-tab-panel:not(.hidden),

  #admin
  .ff-shell-hub:not(.hidden){

    position:relative !important;

    left:auto !important;

    right:auto !important;

    transform:none !important;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    margin-left:
      0 !important;

    margin-right:
      0 !important;

    box-sizing:
      border-box !important;

  }


  /*
    Reports can be wide, but the WHOLE page
    must never move underneath the sidebar.
  */

  #admin .ff-report-head,
  #admin .ff-reports-grid,
  #admin .ff-report-table,
  #admin .ff-settings-grid,
  #admin .ff-settings-page-card{

    max-width:
      100% !important;

    box-sizing:
      border-box !important;

  }


  #admin .ff-report-table{

    min-width:
      100%;

  }

}


/* =========================================================
   SIDEBAR ROAD — ONE AUTHORITY ONLY
   ========================================================= */

/*
  Kill every older attempt completely.
*/

#ffMasterSidebar
.ff-master-road,

#ffMasterSidebar
.ff-unified-road{

  display:none !important;

}


#ffMasterSidebar
.ff-master-bottom::before{

  content:none !important;

  display:none !important;

}


/*
  The road is now ONE vector image attached to the
  sidebar itself, so five separate blocks can no
  longer drift around independently.
*/

@media(min-width:901px){

  #ffMasterSidebar{

    overflow:hidden !important;

  }


  #ffMasterSidebar::after{

    content:"";

    position:absolute;

    z-index:0;

    left:
      -20px;

    bottom:
      48px;

    width:
      285px;

    height:
      245px;

    pointer-events:none;

    opacity:
      .88;

    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 285 245'%3E%3Cdefs%3E%3ClinearGradient id='lane' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23146b8a' stop-opacity='.56'/%3E%3Cstop offset='.55' stop-color='%2327c9bd' stop-opacity='.82'/%3E%3Cstop offset='1' stop-color='%2343efae' stop-opacity='.94'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-32 250 C28 196 89 155 145 127 C190 105 237 88 304 73' fill='none' stroke='%23175f88' stroke-opacity='.32' stroke-width='2.2'/%3E%3Cpath d='M-49 270 C17 211 83 169 147 141 C198 119 249 104 311 94' fill='none' stroke='%23145178' stroke-opacity='.16' stroke-width='2'/%3E%3Cpath d='M-8 234 C48 186 102 150 156 125 C200 105 243 91 295 80' fill='none' stroke='%232685a4' stroke-opacity='.10' stroke-width='24'/%3E%3Cpolygon points='34,201 83,181 96,193 47,216' fill='url(%23lane)'/%3E%3Cpolygon points='86,168 126,153 137,163 97,179' fill='url(%23lane)'/%3E%3Cpolygon points='132,141 165,129 174,137 142,149' fill='url(%23lane)'/%3E%3Cpolygon points='171,119 197,110 204,117 179,126' fill='url(%23lane)'/%3E%3Cpolygon points='205,102 225,95 231,100 211,107' fill='url(%23lane)'/%3E%3C/svg%3E");

    background-repeat:
      no-repeat;

    background-position:
      left bottom;

    background-size:
      contain;

  }


  /*
    Ensure actual sidebar content stays above road.
  */

  #ffMasterSidebar
  .ff-master-brand,

  #ffMasterSidebar
  .ff-master-navigation,

  #ffMasterSidebar
  .ff-master-bottom,

  #ffMasterSidebar
  .ff-master-slogan{

    position:relative;

    z-index:2;

  }

}



/* =========================================================
   FIXFLEET STANDALONE PAGE GEOMETRY
   ========================================================= */

:root{

  --ff-standalone-left:
    292px;

  --ff-standalone-right:
    18px;

}


@media(min-width:901px){

  /*
    Standalone app screens created directly
    under <main> now start AFTER the real sidebar.
  */

  main >
  .ff-standalone-real-page{

    position:
      relative !important;

    inset:
      auto !important;

    left:
      auto !important;

    right:
      auto !important;

    top:
      auto !important;

    bottom:
      auto !important;

    transform:
      none !important;

    margin-top:
      0 !important;

    margin-right:
      var(--ff-standalone-right) !important;

    margin-bottom:
      0 !important;

    margin-left:
      var(--ff-standalone-left) !important;

    padding:
      22px 0 90px 0 !important;

    width:
      calc(
        100vw -
        var(--ff-standalone-left) -
        var(--ff-standalone-right)
      ) !important;

    max-width:
      none !important;

    min-width:
      0 !important;

    box-sizing:
      border-box !important;

    overflow-x:
      hidden !important;

  }


  /*
    Exact Driver Hours container discovered
    from the source.
  */

  #driverHoursCentre.ff-standalone-real-page{

    display:
      block;

  }


  #driverHoursCentreContent{

    position:
      relative !important;

    inset:
      auto !important;

    transform:
      none !important;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    margin:
      0 !important;

    padding:
      0 !important;

    box-sizing:
      border-box !important;

  }


  #driverHoursCentreContent >
  *{

    max-width:
      100% !important;

    box-sizing:
      border-box !important;

  }


  /*
    Driver Hours summary.

    Four cards stay on one row when there
    is enough usable screen width.
  */

  #driverHoursCentre
  .driver-hours-summary{

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    box-sizing:
      border-box !important;

  }


  #driverHoursCentre
  .driver-hours-summary >
  *{

    min-width:
      0 !important;

  }


  /*
    Prevent long compliance text from forcing
    the page wider than the available screen.
  */

  #driverHoursCentre
  .card,

  #driverHoursCentre
  .notice,

  #driverHoursCentre
  .error,

  #driverHoursCentre
  .driver-hours-grid,

  #driverHoursCentre
  .driver-hours-driver-panel{

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    box-sizing:
      border-box !important;

  }


  /*
    Generic protection for Driver Compliance
    and any other standalone screen caught by
    the controller.
  */

  .ff-standalone-real-page
  .card,

  .ff-standalone-real-page
  .notice,

  .ff-standalone-real-page
  .error,

  .ff-standalone-real-page
  .row,

  .ff-standalone-real-page
  table{

    max-width:
      100% !important;

    box-sizing:
      border-box !important;

  }


  .ff-standalone-real-page
  input,

  .ff-standalone-real-page
  select,

  .ff-standalone-real-page
  textarea,

  .ff-standalone-real-page
  .field{

    max-width:
      100% !important;

    box-sizing:
      border-box !important;

  }


  /*
    Very wide tables scroll inside their own
    page instead of expanding underneath /
    beyond the sidebar.
  */

  .ff-standalone-real-page
  table{

    display:
      block;

    width:
      100%;

    overflow-x:
      auto;

    -webkit-overflow-scrolling:
      touch;

  }

}


/*
  MacBook width: let Driver Hours fall to two
  columns if four cards become too cramped.
*/

@media(min-width:901px) and (max-width:1120px){

  #driverHoursCentre
  .driver-hours-summary{

    grid-template-columns:
      repeat(2,minmax(0,1fr))
      !important;

  }

}


/*
  Existing mobile UI remains untouched.
*/

@media(max-width:900px){

  main >
  .ff-standalone-real-page{

    margin:
      initial !important;

    width:
      auto !important;

    padding:
      initial !important;

  }

}



/* =========================================================
   DRIVER HOURS — NATIVE ADMIN-SHELL FIX
   ========================================================= */

@media(min-width:901px){

  /*
    It now lives inside #admin, so treat it exactly
    like the other real admin pages.
  */

  #admin > #driverHoursCentre:not(.hidden){

    display:block !important;

    position:relative !important;

    grid-column:auto !important;
    grid-row:auto !important;

    inset:auto !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 0 80px !important;

    transform:none !important;

    box-sizing:border-box !important;
    overflow-x:hidden !important;
  }


  #driverHoursCentreContent{

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box !important;
  }


  #driverHoursCentreContent .card,
  #driverHoursCentreContent .notice,
  #driverHoursCentreContent .error,
  #driverHoursCentreContent .driver-hours-summary,
  #driverHoursCentreContent .driver-hours-grid,
  #driverHoursCentreContent .driver-hours-driver-panel{

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    box-sizing:border-box !important;
  }


  /*
    Four summary cards fit the usable content width.
  */

  #driverHoursCentre .driver-hours-summary{

    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;
  }


  #driverHoursCentre .driver-hours-summary > *,
  #driverHoursCentre .driver-hours-grid > *{

    min-width:0 !important;
  }

}


/* Smaller MacBook/browser widths */

@media(min-width:901px) and (max-width:1150px){

  #driverHoursCentre .driver-hours-summary{

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

}



/* =========================================================
   FIXFLEET FINAL SIDEBAR ROAD
   Cosmetic only — no application/layout changes.
   ========================================================= */

@media(min-width:901px){

  /* Remove all previous road attempts */

  #ffMasterSidebar .ff-master-road,
  #ffMasterSidebar .ff-unified-road,
  #ffMasterSidebar .ff-road-edge,
  #ffMasterSidebar .ff-unified-road i,
  #ffMasterSidebar .ff-master-bottom::before{

    display:none !important;
    content:none !important;

  }


  #ffMasterSidebar{

    position:fixed;
    overflow:hidden !important;

  }


  /*
    One clean SVG road.
  */

  #ffMasterSidebar::after{

    content:"" !important;

    display:block !important;

    position:absolute !important;

    left:-12px !important;

    bottom:72px !important;

    width:270px !important;

    height:130px !important;

    z-index:1 !important;

    pointer-events:none !important;

    opacity:.96 !important;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 270 130'%3E%3Cdefs%3E%3ClinearGradient id='road' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%2311253a' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%23162f49' stop-opacity='.45'/%3E%3C/linearGradient%3E%3ClinearGradient id='dash' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%232fd8d0'/%3E%3Cstop offset='1' stop-color='%2351f0b5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-25 125 C38 88 93 60 151 44 C194 32 232 26 290 25' fill='none' stroke='url(%23road)' stroke-width='30' stroke-linecap='round'/%3E%3Cpath d='M-25 108 C37 75 94 51 151 37 C196 26 235 21 289 21' fill='none' stroke='%23266b86' stroke-opacity='.32' stroke-width='2'/%3E%3Cpath d='M-25 139 C40 100 97 71 155 54 C199 42 237 36 290 34' fill='none' stroke='%23206983' stroke-opacity='.22' stroke-width='2'/%3E%3Cpath d='M-13 121 C43 88 97 62 153 47 C197 35 235 29 278 28' fill='none' stroke='url(%23dash)' stroke-width='9' stroke-linecap='round' stroke-dasharray='30 16'/%3E%3C/svg%3E") !important;

    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:100% 100% !important;

  }


  /*
    Keep logo/menu/slogan above artwork.
  */

  #ffMasterSidebar .ff-master-brand,
  #ffMasterSidebar .ff-master-navigation,
  #ffMasterSidebar .ff-master-nav,
  #ffMasterSidebar .ff-master-bottom,
  #ffMasterSidebar .ff-master-slogan{

    position:relative;
    z-index:3 !important;

  }

}



/* =========================================================
   FIXFLEET FINAL ROAD PERSPECTIVE
   Cosmetic-only final adjustment.
   ========================================================= */

@media(min-width:901px){

  #ffMasterSidebar::after{

    left:-18px !important;
    bottom:70px !important;

    width:285px !important;
    height:145px !important;

    opacity:.96 !important;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 285 145'%3E%3Cdefs%3E%3ClinearGradient id='road' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23102137' stop-opacity='.96'/%3E%3Cstop offset='1' stop-color='%23172d46' stop-opacity='.62'/%3E%3C/linearGradient%3E%3ClinearGradient id='mark' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%2328d9d1'/%3E%3Cstop offset='.55' stop-color='%233de6c5'/%3E%3Cstop offset='1' stop-color='%2356f1ac'/%3E%3C/linearGradient%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='2.2' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-32 142 C28 101 88 72 150 55 C198 42 241 36 303 35' fill='none' stroke='url(%23road)' stroke-width='30' stroke-linecap='round'/%3E%3Cpath d='M-35 125 C26 87 87 61 150 47 C199 36 244 31 304 31' fill='none' stroke='%23237090' stroke-opacity='.38' stroke-width='2.3'/%3E%3Cpath d='M-34 156 C30 111 92 81 154 64 C203 51 247 45 304 44' fill='none' stroke='%231a6685' stroke-opacity='.26' stroke-width='2.2'/%3E%3Cg fill='url(%23mark)' filter='url(%23glow)'%3E%3Cpolygon points='18,118 67,98 79,105 31,127'/%3E%3Cpolygon points='79,91 119,77 130,84 91,99'/%3E%3Cpolygon points='131,70 164,60 173,66 141,77'/%3E%3Cpolygon points='176,54 202,47 210,52 184,60'/%3E%3Cpolygon points='214,43 234,38 241,42 221,48'/%3E%3Cpolygon points='247,36 263,33 268,36 253,40'/%3E%3C/g%3E%3C/svg%3E") !important;

    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:100% 100% !important;

  }

}



/* =========================================================
   FIXFLEET DEMO CENTRE CSS 20260912
   ========================================================= */

:root{
  --ff-demo-left:285px;
}


.ff-demo-suspended{
  display:none !important;
}


.ff-demo-mode .ff-final-ai-control{
  display:none !important;
}


/* SIDEBAR */

.ff-demo-master-nav{
  width:100%;
  border:0;
  font:inherit;
  cursor:pointer;
  text-align:left;
}


.ff-demo-nav-icon{
  width:22px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  color:#47e5c3;
  font-size:13px;
}


/* MAIN DEMO SCREEN */

#ffDemoCentre{

  position:fixed;

  left:
    var(--ff-demo-left);

  right:0;
  top:0;
  bottom:0;

  z-index:60000;

  overflow-y:auto;
  overflow-x:hidden;

  padding:
    30px 34px 42px;

  box-sizing:border-box;

  color:#effaff;

  background:
    radial-gradient(
      circle at 80% -10%,
      rgba(31,155,205,.18),
      transparent 34%
    ),
    linear-gradient(
      150deg,
      #071522,
      #0a1c2d 52%,
      #081521
    );

}


#ffDemoCentre.hidden{
  display:none !important;
}


.ff-demo-topbar{

  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;

  margin-bottom:18px;

}


.ff-demo-eyebrow{

  color:#47e5c3;

  font-size:11px;
  font-weight:900;

  letter-spacing:2px;

}


.ff-demo-topbar h1{

  margin:
    5px 0 4px;

  font-size:
    clamp(27px,3vw,42px);

  line-height:1.05;

}


.ff-demo-topbar p{

  margin:0;

  color:#a8c0ce;

  max-width:680px;

}


.ff-demo-top-actions{

  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;

}


.ff-demo-btn{

  min-height:40px;

  padding:
    9px 14px;

  border:
    1px solid rgba(125,197,224,.25);

  border-radius:10px;

  color:#e9f9ff;

  background:
    rgba(14,48,68,.86);

  font:inherit;
  font-size:12px;
  font-weight:850;

  cursor:pointer;

}


.ff-demo-btn:hover{

  border-color:
    rgba(67,226,201,.55);

}


.ff-demo-btn-primary{

  border-color:
    rgba(59,221,198,.58);

  background:
    linear-gradient(
      135deg,
      #0d8091,
      #176a8b
    );

}


.ff-demo-btn:disabled{

  opacity:.35;
  cursor:default;

}


.ff-demo-disclaimer{

  padding:
    11px 14px;

  margin-bottom:16px;

  border:
    1px solid rgba(247,190,75,.18);

  border-radius:10px;

  background:
    rgba(247,190,75,.07);

  color:#b8c9d3;

  font-size:11px;

}


.ff-demo-disclaimer b{
  color:#f4c45c;
}


/* PROGRESS */

.ff-demo-progress{

  display:grid;

  grid-template-columns:
    repeat(8,minmax(0,1fr));

  gap:7px;

  margin-bottom:18px;

}


.ff-demo-step{

  min-width:0;

  padding:
    9px 6px;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:10px;

  background:
    rgba(255,255,255,.025);

  color:#718a99;

  text-align:center;

  font-size:10px;

}


.ff-demo-step span{

  width:22px;
  height:22px;

  display:flex;

  align-items:center;
  justify-content:center;

  margin:
    0 auto 5px;

  border-radius:50%;

  background:
    rgba(255,255,255,.06);

}


.ff-demo-step.active{

  color:#efffff;

  border-color:
    rgba(50,212,211,.56);

  background:
    rgba(31,137,160,.18);

}


.ff-demo-step.active span{

  color:#06131b;

  background:#48e3c7;

}


.ff-demo-step.done{

  color:#9bd8cc;
}


.ff-demo-step.done span{

  color:#08171b;

  background:#2fba9f;

}


/* STAGE */

.ff-demo-stage{

  min-height:
    calc(100vh - 275px);

  border:
    1px solid rgba(110,188,219,.16);

  border-radius:18px;

  background:
    rgba(5,20,31,.64);

  box-shadow:
    0 26px 80px rgba(0,0,0,.22);

  overflow:hidden;

}


.ff-demo-controls{

  display:flex;

  justify-content:
    space-between;

  align-items:center;

  gap:12px;

  padding-top:16px;

}


#ffDemoStageLabel{

  color:#91a9b7;

  font-size:12px;

}


.ff-demo-split{

  min-height:560px;

  display:grid;

  grid-template-columns:
    minmax(280px,.8fr)
    minmax(340px,1.2fr);

  align-items:center;

  gap:44px;

  padding:
    38px 5vw;

}


.ff-demo-story{

  max-width:500px;

}


.ff-demo-stage-number{

  color:#42e3c3;

  font-size:50px;
  font-weight:950;

  opacity:.18;

}


.ff-demo-story h2{

  margin:
    -13px 0 10px;

  font-size:
    clamp(28px,3.3vw,48px);

}


.ff-demo-story p{

  color:#9eb5c2;

  line-height:1.55;

}


.ff-demo-fact{

  display:flex;

  justify-content:space-between;

  gap:14px;

  margin-top:9px;

  padding:
    11px 13px;

  border-radius:9px;

  background:
    rgba(255,255,255,.045);

  color:#8da8b7;

}


.ff-demo-fact strong{
  color:#e9f8fd;
}


/* MOBILE APP */

.ff-demo-phone{

  width:min(385px,100%);

  justify-self:center;

  border:
    6px solid #17232b;

  border-radius:29px;

  padding:
    15px;

  box-sizing:border-box;

  background:#101214;

  color:#fff;

  box-shadow:
    0 25px 70px rgba(0,0,0,.48);

}


.ff-demo-phone-top{

  padding:
    7px 8px 16px;

  text-align:center;

  font-weight:850;

}


.ff-demo-phone-title{

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:
    10px 5px 13px;

  font-size:17px;
  font-weight:850;

}


.ff-demo-phone-title small{

  color:#879198;

  font-size:10px;

}


.ff-demo-check-row{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:7px;

  padding:
    13px 14px;

  border-radius:10px;

  background:#25282b;

  font-size:13px;

  font-weight:750;

}


.ff-demo-ok{
  color:#42d494;
}


.ff-demo-defect-row{

  border:
    1px solid rgba(244,98,81,.7);

  color:#ffb8ad;

}


.ff-demo-defect-row span{

  display:flex;

  width:22px;
  height:22px;

  justify-content:center;
  align-items:center;

  border-radius:50%;

  color:#190604;

  background:#ff765f;

  font-weight:950;

}


.ff-demo-mobile-card{

  margin-top:10px;

  padding:13px;

  border-radius:11px;

  background:#1b1e20;

}


.ff-demo-mobile-card small{

  color:#87949b;

  display:block;

  margin-bottom:5px;

}


.ff-demo-mobile-card p{

  color:#aab1b6;

  font-size:11px;

}


.ff-demo-photo-placeholder{

  display:flex;

  align-items:center;
  justify-content:center;

  min-height:80px;

  margin-top:9px;

  border:
    1px dashed rgba(255,255,255,.19);

  border-radius:9px;

  color:#829098;

  background:
    linear-gradient(
      145deg,
      #232629,
      #17191b
    );

  font-size:11px;
  font-weight:800;

}


.ff-demo-mobile-action{

  width:100%;

  min-height:43px;

  margin-top:11px;

  border:0;

  border-radius:10px;

  color:#071310;

  background:#53dfad;

  font-weight:950;

}


.ff-demo-tech-phone{

  background:
    #071822;

  border-color:
    #163243;

}


.ff-demo-job-number{

  color:#43e3c4;

  font-size:10px;
  font-weight:900;

}


.ff-demo-tech-location{

  padding:
    10px;

  border-radius:9px;

  background:
    rgba(31,147,186,.14);

  color:#a9ddec;

  font-size:11px;

}


/* FIXFLEET WINDOWS */

.ff-demo-fixfleet-window{

  min-height:560px;

  padding:
    32px;

  box-sizing:border-box;

}


.ff-demo-window-head{

  display:flex;

  justify-content:space-between;

  gap:20px;

  align-items:flex-start;

  margin-bottom:22px;

}


.ff-demo-window-head small{

  color:#53dbc6;

  font-size:10px;

  font-weight:900;

  letter-spacing:1.5px;

}


.ff-demo-window-head h2{

  margin:
    4px 0 0;

  font-size:
    clamp(25px,3vw,38px);

}


.ff-demo-live{

  color:#ff756c;

  font-weight:950;

}


.ff-demo-status-red,
.ff-demo-status-blue{

  padding:
    8px 11px;

  border-radius:999px;

  font-size:10px;
  font-weight:950;

}


.ff-demo-status-red{

  color:#ffb9b1;

  border:
    1px solid rgba(255,75,75,.42);

  background:
    rgba(255,53,53,.12);

}


.ff-demo-status-blue{

  color:#c9f5ff;

  border:
    1px solid rgba(53,191,224,.4);

  background:
    rgba(31,148,190,.13);

}


.ff-demo-alert-grid{

  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:12px;

}


.ff-demo-alert-card{

  padding:17px;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:13px;

  background:
    rgba(255,255,255,.035);

}


.ff-demo-alert-card small{

  color:#829cab;

  display:block;

  font-size:9px;
  font-weight:900;

}


.ff-demo-alert-card b{

  display:block;

  margin-top:4px;

  font-size:17px;

}


.ff-demo-alert-card p{

  color:#8ba4b2;

  margin-bottom:0;

  font-size:11px;

}


.ff-demo-danger{

  border-color:
    rgba(255,93,93,.26);
}


.ff-demo-map{

  position:relative;

  height:255px;

  margin-top:14px;

  overflow:hidden;

  border:
    1px solid rgba(77,169,198,.16);

  border-radius:14px;

  background:
    linear-gradient(
      145deg,
      #0b2630,
      #102735
    );

}


.ff-demo-map::before{

  content:"";

  position:absolute;

  inset:0;

  opacity:.12;

  background-image:
    linear-gradient(
      rgba(255,255,255,.15) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.15) 1px,
      transparent 1px
    );

  background-size:
    35px 35px;

}


.ff-demo-map-road{

  position:absolute;

  height:5px;

  border-radius:999px;

  background:#35525d;

  transform-origin:left center;

}


.ff-demo-map-road.road-a{

  width:80%;
  left:7%;
  top:55%;
  transform:rotate(-11deg);

}


.ff-demo-map-road.road-b{

  width:65%;
  left:28%;
  top:33%;
  transform:rotate(24deg);

}


.ff-demo-map-road.road-c{

  width:53%;
  left:5%;
  top:25%;
  transform:rotate(35deg);

}


.ff-demo-map-pin{

  position:absolute;

  left:59%;
  top:39%;

  display:flex;

  width:44px;
  height:44px;

  align-items:center;
  justify-content:center;

  border:
    3px solid #42e1c1;

  border-radius:50%;

  background:#09222d;

  box-shadow:
    0 0 0 9px rgba(66,225,193,.13);

}


.ff-demo-map-label{

  position:absolute;

  left:64%;
  top:41%;

  padding:
    7px 10px;

  border-radius:7px;

  background:
    rgba(3,15,22,.88);

  font-weight:900;

}


.ff-demo-map-label small{

  display:block;

  color:#7895a3;

  font-size:8px;

}


.ff-demo-action-strip{

  display:flex;

  justify-content:space-between;

  gap:15px;

  margin-top:13px;

  padding:
    13px 15px;

  border-radius:11px;

  background:
    rgba(31,125,154,.13);

  color:#94adba;

}


.ff-demo-action-strip b{
  color:#46dfc2;
}


/* VOR */

.ff-demo-two-vehicles{

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    60px
    minmax(0,1fr);

  gap:15px;

  align-items:center;

}


.ff-demo-vehicle-card{

  min-height:210px;

  padding:24px;

  border-radius:16px;

  background:
    rgba(255,255,255,.035);

  border:
    1px solid rgba(255,255,255,.09);

}


.ff-demo-vehicle-card small{
  color:#839aa7;
}


.ff-demo-vehicle-card h3{

  font-size:28px;

  margin:
    5px 0 16px;

}


.ff-demo-big-status{

  font-size:18px;
  font-weight:950;

}


.ff-demo-vehicle-card p{

  color:#89a0ad;

  font-size:11px;

}


.ff-demo-vehicle-vor{

  border-color:
    rgba(255,87,87,.28);

}


.ff-demo-vehicle-spare{

  border-color:
    rgba(59,218,167,.28);

}


.ff-demo-transfer{

  text-align:center;

  color:#42ddc2;

  font-size:32px;

}


.ff-demo-mini-integrations{

  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:10px;

  margin-top:18px;

}


.ff-demo-mini-integrations div{

  padding:12px;

  border-radius:10px;

  background:
    rgba(13,47,65,.72);

}


.ff-demo-mini-integrations b,
.ff-demo-mini-integrations span{

  display:block;

}


.ff-demo-mini-integrations span{

  margin-top:3px;

  color:#8ca8b6;

  font-size:10px;

}


/* TIMELINE */

.ff-demo-timeline{

  margin-top:20px;

}


.ff-demo-timeline div{

  position:relative;

  padding:
    11px 12px 11px 34px;

  color:#708b9a;

}


.ff-demo-timeline div::before{

  content:"";

  position:absolute;

  left:10px;
  top:15px;

  width:8px;
  height:8px;

  border-radius:50%;

  background:#314956;

}


.ff-demo-timeline .done{

  color:#95d8c8;

}


.ff-demo-timeline .done::before{

  background:#36c59e;

}


.ff-demo-timeline .active{

  color:#fff;

  background:
    rgba(43,161,190,.1);

  border-radius:8px;

}


.ff-demo-timeline .active::before{

  background:#49e1c2;

  box-shadow:
    0 0 0 5px rgba(73,225,194,.12);

}


/* EXTERNAL APP */

.ff-demo-external{

  min-height:560px;

  padding:20px;

  box-sizing:border-box;

}


.ff-demo-app-badge{

  display:inline-flex;

  gap:9px;

  align-items:center;

  margin-bottom:12px;

  padding:
    7px 10px;

  border-radius:999px;

  color:#d4e6ed;

  background:
    rgba(9,31,43,.94);

  font-size:11px;
  font-weight:900;

}


.ff-demo-app-badge small{

  color:#f1bd50;

  font-size:8px;

  letter-spacing:.8px;

}


.ff-reflow-demo{

  display:grid;

  grid-template-columns:
    155px minmax(0,1fr);

  min-height:485px;

  overflow:hidden;

  border-radius:13px;

  color:#24303a;

  background:#f6f7f8;

}


.ff-reflow-demo aside{

  padding:
    17px 11px;

  display:flex;

  flex-direction:column;

  gap:4px;

  color:#cfd8df;

  background:#273641;

}


.ff-reflow-logo{

  margin-bottom:10px;

  color:#ef4963;

  font-size:20px;
  font-weight:950;

}


.ff-reflow-logo small{

  display:block;

  color:#64b1dc;

  font-size:8px;

}


.ff-reflow-demo aside b{

  padding:
    7px 8px;

  border-radius:5px;

  font-size:10px;

}


.ff-reflow-demo aside b.selected{

  color:#fff;

  background:#1f7fbd;

}


.ff-reflow-content{

  padding:20px;

}


.ff-reflow-head{

  display:flex;

  align-items:center;
  justify-content:space-between;

}


.ff-reflow-head h2{

  margin:0;

  color:#273844;

}


.ff-reflow-head small{
  color:#88979f;
}


.ff-reflow-head button{

  padding:
    8px 12px;

  border:0;

  border-radius:4px;

  color:#fff;

  background:#2e89c5;

}


.ff-reflow-table{

  margin-top:18px;

  border:
    1px solid #dce2e6;

  border-radius:5px;

  overflow:hidden;

}


.ff-reflow-row{

  display:grid;

  grid-template-columns:
    .6fr 1.5fr 1fr .9fr .8fr;

  gap:8px;

  padding:
    11px 10px;

  border-bottom:
    1px solid #e4e8ea;

  font-size:10px;

}


.ff-reflow-header{

  color:#71818b;

  background:#f0f2f4;

  font-weight:850;

}


.ff-reflow-highlight{

  background:#edf8fe;

}


.ff-reflow-row i{

  padding:
    3px 5px;

  border-radius:3px;

  color:#fff;

  background:#39a6cf;

  font-style:normal;

}


.ff-reflow-row i.complete{

  background:#28b987;

}


.ff-reflow-row em{

  color:#147fad;

  font-style:normal;

  font-weight:900;

}


.ff-demo-external-note{

  margin-top:14px;

  padding:
    10px;

  border-radius:6px;

  color:#49606d;

  background:#eaf3f7;

  font-size:10px;

}


/* BIDS / PO */

.ff-demo-bids{

  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:12px;

}


.ff-demo-bid{

  position:relative;

  padding:19px;

  border:
    1px solid rgba(255,255,255,.09);

  border-radius:13px;

  background:
    rgba(255,255,255,.035);

}


.ff-demo-bid small{
  color:#7f97a5;
}


.ff-demo-bid h3{

  margin:
    5px 0;

  font-size:27px;

}


.ff-demo-bid p{

  color:#8ba1ae;

  font-size:11px;

}


.ff-demo-bid button{

  padding:
    7px 10px;

  border:
    1px solid rgba(100,190,215,.25);

  border-radius:7px;

  color:#d5f3fb;

  background:#143247;

}


.ff-demo-bid-selected{

  border-color:
    rgba(62,219,184,.5);

  box-shadow:
    inset 0 0 0 1px
    rgba(62,219,184,.13);

}


.ff-demo-recommended{

  position:absolute;

  top:10px;
  right:10px;

  color:#48e0c0;

  font-size:8px;
  font-weight:950;

}


.ff-demo-po{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:25px;

  margin-top:17px;

  padding:20px;

  border:
    1px solid rgba(245,194,79,.22);

  border-radius:13px;

  background:
    rgba(245,194,79,.06);

}


.ff-demo-po small{
  color:#e8ba54;
}


.ff-demo-po h3{

  margin:
    4px 0;

}


.ff-demo-po p{

  max-width:550px;

  margin-bottom:0;

  color:#92a8b4;

  font-size:11px;

}


.ff-demo-po-control{

  display:flex;

  flex-direction:column;

  gap:8px;

  min-width:220px;

}


.ff-demo-po-control input{

  padding:11px;

  border:
    1px solid rgba(255,255,255,.13);

  border-radius:8px;

  color:#dcebf0;

  background:#0a1c28;

  font-weight:900;

}


.ff-demo-po-control button{

  padding:11px;

  border:0;

  border-radius:8px;

  color:#071710;

  background:#4bd4a3;

  font-weight:950;

}


/* REPAIR */

.ff-demo-proof-list{

  margin-top:20px;

}


.ff-demo-proof-list div{

  display:flex;

  gap:10px;

  margin-top:7px;

  padding:10px;

  border-radius:8px;

  background:
    rgba(255,255,255,.035);

}


.ff-demo-proof-list span{
  color:#41d6a9;
}


.ff-demo-repair-card{

  overflow:hidden;

  border:
    1px solid rgba(75,198,206,.18);

  border-radius:16px;

  background:
    rgba(8,35,48,.9);

}


.ff-demo-repair-photo{

  min-height:245px;

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:10px;

  background:
    radial-gradient(
      circle at 50% 50%,
      #263a41,
      #111a20 70%
    );

  color:#83949c;

}


.ff-demo-wheel{

  display:flex;

  width:120px;
  height:120px;

  align-items:center;
  justify-content:center;

  border:
    22px solid #242a2e;

  border-radius:50%;

  color:#737c80;

  font-size:50px;

}


.ff-demo-repair-photo span{

  font-size:9px;
  font-weight:900;

}


.ff-demo-repair-info{

  padding:18px;

}


.ff-demo-repair-info small{
  color:#6ccfbc;
}


.ff-demo-repair-info h3{

  margin:
    5px 0 13px;

}


.ff-demo-road-test{

  display:flex;

  gap:12px;

  padding:11px;

  border-radius:9px;

  color:#a3e9d9;

  background:
    rgba(53,190,150,.1);

}


.ff-demo-road-test > span{

  font-size:21px;

}


.ff-demo-road-test small{

  display:block;

  margin-top:2px;

  color:#86a79f;

}


.ff-demo-repair-info button{

  width:100%;

  margin-top:11px;

  padding:11px;

  border:0;

  border-radius:8px;

  color:#06140f;

  background:#4edcac;

  font-weight:950;

}


/* FINISH */

.ff-demo-finish{

  padding:32px;

}


.ff-demo-finish-hero{

  display:flex;

  align-items:center;

  gap:20px;

  padding:
    20px 22px;

  border:
    1px solid rgba(65,222,180,.3);

  border-radius:15px;

  background:
    rgba(46,184,146,.08);

}


.ff-demo-finish-icon{

  display:flex;

  width:66px;
  height:66px;

  flex:0 0 66px;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:#092019;

  background:#49dfae;

  font-size:33px;
  font-weight:950;

}


.ff-demo-finish-hero small{

  color:#4be0b0;

  font-size:9px;
  font-weight:900;

}


.ff-demo-finish-hero h2{

  margin:
    4px 0;

  font-size:
    clamp(25px,3vw,38px);

}


.ff-demo-finish-hero p{

  margin:0;

  color:#8ea8b4;

}


.ff-demo-return-grid{

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:12px;

  margin-top:15px;

}


.ff-demo-return-card{

  padding:17px;

  border-radius:12px;

  background:
    rgba(255,255,255,.035);

}


.ff-demo-return-card small{
  color:#7c96a3;
}


.ff-demo-return-card h3{

  margin:
    5px 0;

}


.ff-demo-return-card p{

  color:#819aa6;

  font-size:11px;

}


.ff-demo-app-results{

  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:12px;

  margin-top:15px;

}


.ff-demo-result-app{

  min-height:205px;

  padding:16px;

  box-sizing:border-box;

  border:
    1px solid rgba(255,255,255,.09);

  border-radius:13px;

  background:
    rgba(255,255,255,.035);

}


.ff-demo-result-app h3{

  margin:
    4px 0 10px;

}


.ff-demo-result-app p{

  color:#829aa6;

  font-size:10px;

}


.ff-demo-result-status{

  display:inline-block;

  padding:
    6px 8px;

  border-radius:7px;

  color:#87ecd1;

  background:
    rgba(60,199,160,.1);

  font-size:10px;
  font-weight:950;

}


.ff-demo-michelin-title{

  color:#fff;

  font-size:19px;
  font-weight:950;

  letter-spacing:-.7px;

}


.ff-demo-michelin-title small{

  display:block;

  color:#8698a2;

  font-size:9px;

  letter-spacing:0;

}


.ff-demo-key-row{

  display:flex;

  justify-content:space-between;

  gap:8px;

  margin-top:8px;

  padding:
    10px;

  border-radius:7px;

  background:
    rgba(255,255,255,.04);

  font-size:10px;

}


.ff-demo-key-row span{

  color:#6edebf;

  font-size:8px;
  font-weight:900;

}


.ff-demo-final-message{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-top:16px;

  padding:
    16px 18px;

  border-radius:12px;

  color:#dff8f2;

  background:
    linear-gradient(
      100deg,
      rgba(22,126,139,.35),
      rgba(37,168,135,.18)
    );

}


.ff-demo-final-message span{

  color:#61dec3;

  font-size:11px;
  font-weight:900;

  letter-spacing:1px;

}


/* MACBOOK RESPONSIVE */

@media(max-width:1180px){

  .ff-demo-progress{
    grid-template-columns:
      repeat(4,minmax(0,1fr));
  }

  .ff-demo-split{
    gap:25px;
  }

  .ff-demo-alert-grid{
    grid-template-columns:
      1fr;
  }

  .ff-demo-map{
    height:210px;
  }

}


@media(max-width:900px){

  #ffDemoCentre{

    left:0;

    padding:
      18px 14px 35px;

  }

  .ff-demo-topbar,
  .ff-demo-window-head,
  .ff-demo-po{

    flex-direction:column;

  }

  .ff-demo-split{

    grid-template-columns:1fr;

    padding:
      25px 17px;

  }

  .ff-demo-two-vehicles{

    grid-template-columns:1fr;

  }

  .ff-demo-transfer{

    transform:rotate(90deg);

  }

  .ff-demo-bids,
  .ff-demo-app-results,
  .ff-demo-return-grid,
  .ff-demo-mini-integrations{

    grid-template-columns:1fr;

  }

  .ff-reflow-demo{

    grid-template-columns:1fr;

  }

  .ff-reflow-demo aside{
    display:none;
  }

}


/* =========================================================
   FIXFLEET UTILISATION WIDTH / BACK FIX 20260914
   Keep the application inside the visible content area.
   Any wide vehicle table scrolls locally, never the page.
   ========================================================= */

#ffVehicleUtilisationWorkspace{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow-x:hidden !important;
  box-sizing:border-box !important;
}


/* Back button stays on the LEFT and always visible */

#ffVehicleUtilisationWorkspace .ff-util-head{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  gap:12px !important;
}

#ffVehicleUtilisationWorkspace .ff-util-back{
  order:-1 !important;
  position:static !important;
  margin:0 !important;
  flex:0 0 auto !important;
}


/* Heading must be allowed to shrink */

#ffVehicleUtilisationWorkspace .ff-util-head-left{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}


/* KPI cards reflow rather than making the page wider */

#ffVehicleUtilisationWorkspace .ff-util-kpis{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(135px,1fr)
    ) !important;
}


/* Search and filters remain inside the workspace */

#ffVehicleUtilisationWorkspace .ff-util-controls{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

#ffVehicleUtilisationWorkspace .ff-util-filters{
  max-width:100% !important;
  min-width:0 !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  flex-wrap:nowrap !important;
  padding-bottom:3px;
}

#ffVehicleUtilisationWorkspace .ff-util-filter{
  flex:0 0 auto !important;
}


/*
  If the detailed vehicle columns genuinely need more room,
  the TABLE scrolls - not the entire application.
*/

#ffVehicleUtilisationWorkspace .ff-util-table{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
}


/* Desktop detailed table */

@media(min-width:761px){

  #ffVehicleUtilisationWorkspace .ff-util-row{
    min-width:760px;
  }

}


/* Mobile/tablet stays properly responsive */

@media(max-width:760px){

  #ffVehicleUtilisationWorkspace{
    padding-right:0 !important;
  }

  #ffVehicleUtilisationWorkspace .ff-util-row{
    min-width:0 !important;
    width:100% !important;
  }

}


/*
  While Utilisation is open there must be no
  document-level horizontal scrolling.
*/

body.ff-utilisation-open{
  overflow-x:hidden !important;
}

body.ff-utilisation-open #admin{
  min-width:0 !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}


/* =========================================================
   FIXFLEET UTILISATION RESPONSIVE FINAL 20260914

   No sideways scrolling anywhere on Utilisation.
   Rows adapt to the actual available screen width.
   ========================================================= */

body.ff-utilisation-open,
body.ff-utilisation-open #admin,
body.ff-utilisation-open #ffVehicleUtilisationWorkspace{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow-x:hidden !important;
}


/* ---------------------------------------------------------
   KPI CARDS
   --------------------------------------------------------- */

#ffVehicleUtilisationWorkspace .ff-util-kpis{
  display:grid !important;
  grid-template-columns:
    repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
}

#ffVehicleUtilisationWorkspace .ff-util-kpi{
  min-width:0 !important;
  overflow:hidden !important;
}


/* ---------------------------------------------------------
   FILTERS
   --------------------------------------------------------- */

#ffVehicleUtilisationWorkspace .ff-util-controls{
  min-width:0 !important;
  overflow:hidden !important;
}

#ffVehicleUtilisationWorkspace .ff-util-filters{
  display:flex !important;
  flex-wrap:wrap !important;
  overflow:visible !important;
  width:100% !important;
}

#ffVehicleUtilisationWorkspace .ff-util-filter{
  flex:0 0 auto !important;
}


/* ---------------------------------------------------------
   TABLE - NEVER FORCE A MINIMUM WIDTH
   --------------------------------------------------------- */

#ffVehicleUtilisationWorkspace .ff-util-table{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
}


/*
  Header becomes a simpler four-column view.
*/

#ffVehicleUtilisationWorkspace .ff-util-table-head{
  display:grid !important;

  grid-template-columns:
    minmax(95px,.8fr)
    minmax(145px,1.2fr)
    minmax(105px,.8fr)
    minmax(150px,1.2fr) !important;

  gap:10px !important;
}


/*
  Hide Job as a separate header.
  Job still appears inside the vehicle row below.
*/

#ffVehicleUtilisationWorkspace
.ff-util-table-head
.ff-util-job-column{
  display:none !important;
}

#ffVehicleUtilisationWorkspace
.ff-util-table-head
>div:last-child{
  display:none !important;
}


/* ---------------------------------------------------------
   VEHICLE ROWS
   --------------------------------------------------------- */

#ffVehicleUtilisationWorkspace .ff-util-row{

  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;

  display:grid !important;

  grid-template-columns:
    minmax(95px,.8fr)
    minmax(145px,1.2fr)
    minmax(105px,.8fr)
    minmax(150px,1.2fr) !important;

  gap:10px !important;

  align-items:center !important;
}


/*
  Vehicle
*/

#ffVehicleUtilisationWorkspace
.ff-util-row > div:nth-child(1){
  min-width:0 !important;
}


/*
  Make/model/depot
*/

#ffVehicleUtilisationWorkspace
.ff-util-row > div:nth-child(2){
  min-width:0 !important;
  overflow:hidden !important;
}

#ffVehicleUtilisationWorkspace
.ff-util-row > div:nth-child(2) strong,
#ffVehicleUtilisationWorkspace
.ff-util-row > div:nth-child(2) .ff-util-sub{
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}


/*
  Status
*/

#ffVehicleUtilisationWorkspace
.ff-util-row > div:nth-child(3){
  min-width:0 !important;
}


/*
  Driver / allocation
*/

#ffVehicleUtilisationWorkspace
.ff-util-driver-column{
  min-width:0 !important;
  overflow:hidden !important;
}

#ffVehicleUtilisationWorkspace
.ff-util-driver-column strong,
#ffVehicleUtilisationWorkspace
.ff-util-driver-column .ff-util-sub{
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}


/*
  Job reference now appears beneath Driver instead of taking
  another full-width column.
*/

#ffVehicleUtilisationWorkspace
.ff-util-job-column{
  grid-column:4 !important;
  min-width:0 !important;
  margin-top:-5px !important;
  padding-top:0 !important;
}

#ffVehicleUtilisationWorkspace
.ff-util-job-column strong{
  font-size:12px !important;
}

#ffVehicleUtilisationWorkspace
.ff-util-job-column .ff-util-sub{
  display:none !important;
}


/*
  Arrow sits at far right without creating another column.
*/

#ffVehicleUtilisationWorkspace
.ff-util-arrow{
  position:absolute !important;
  right:10px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
}

#ffVehicleUtilisationWorkspace
button.ff-util-row{
  position:relative !important;
  padding-right:28px !important;
}


/* ---------------------------------------------------------
   SMALL LAPTOP / TABLET
   --------------------------------------------------------- */

@media(max-width:1100px){

  #ffVehicleUtilisationWorkspace .ff-util-kpis{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }


  #ffVehicleUtilisationWorkspace
  .ff-util-table-head{
    display:none !important;
  }


  #ffVehicleUtilisationWorkspace .ff-util-row{

    grid-template-columns:
      minmax(100px,.8fr)
      minmax(0,1.4fr) !important;

    gap:8px 14px !important;

    padding:14px 32px 14px 14px !important;
  }


  #ffVehicleUtilisationWorkspace
  .ff-util-row > div:nth-child(1){
    grid-column:1 !important;
    grid-row:1 !important;
  }


  #ffVehicleUtilisationWorkspace
  .ff-util-row > div:nth-child(2){
    grid-column:2 !important;
    grid-row:1 !important;
  }


  #ffVehicleUtilisationWorkspace
  .ff-util-row > div:nth-child(3){
    grid-column:1 !important;
    grid-row:2 !important;
  }


  #ffVehicleUtilisationWorkspace
  .ff-util-driver-column{
    grid-column:2 !important;
    grid-row:2 !important;
  }


  #ffVehicleUtilisationWorkspace
  .ff-util-job-column{
    grid-column:2 !important;
    grid-row:3 !important;
    margin-top:0 !important;
  }

}


/* ---------------------------------------------------------
   PHONE WIDTH
   --------------------------------------------------------- */

@media(max-width:650px){

  #ffVehicleUtilisationWorkspace .ff-util-kpis{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

  #ffVehicleUtilisationWorkspace .ff-util-row{
    grid-template-columns:1fr !important;
  }

  #ffVehicleUtilisationWorkspace
  .ff-util-row > div,
  #ffVehicleUtilisationWorkspace
  .ff-util-driver-column,
  #ffVehicleUtilisationWorkspace
  .ff-util-job-column{

    grid-column:1 !important;
    grid-row:auto !important;

  }

}



/* =========================================================
   FIXFLEET MASTER SIDEBAR LOGOUT STYLE 20260914
   ========================================================= */

#ffMasterSidebar .ff-master-account{
  box-sizing:border-box;
  margin:16px 14px 14px;
  padding-top:15px;
  border-top:1px solid rgba(255,255,255,.10);
}

#ffMasterSidebar .ff-master-account-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  margin-bottom:10px;
}

#ffMasterSidebar .ff-master-account-copy > span{
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  opacity:.55;
}

#ffMasterSidebar .ff-master-account-user{
  display:block;
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  font-weight:800;
}

#ffMasterSidebar .ff-master-logout{
  appearance:none;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.06);
  color:inherit;
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  cursor:pointer;
  font:inherit;
  font-size:13px;
  font-weight:850;
  text-align:left;
  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}

#ffMasterSidebar .ff-master-logout:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
}

#ffMasterSidebar .ff-master-logout:active{
  transform:translateY(1px);
}

#ffMasterSidebar .ff-master-logout:disabled{
  opacity:.55;
  cursor:wait;
}

#ffMasterSidebar .ff-master-logout-icon{
  font-size:17px;
  line-height:1;
}



/* =========================================================
   FIXFLEET LEGACY PAGE SIDEBAR FIT 20260914
   Fix vehicle/detail/workspace pages rendering underneath
   the permanent master sidebar.
   DOES NOT alter Dashboard or Vehicle Utilisation.
   ========================================================= */

@media (min-width:901px){

  body.ff-show-real-page #detail:not(.hidden),

  body.ff-show-real-page #vehicleForm:not(.hidden),

  body.ff-show-real-page #users:not(.hidden),

  body.ff-show-real-page #tech:not(.hidden),

  body.ff-show-real-page #job:not(.hidden),

  body.ff-show-real-page #breakdown:not(.hidden),

  body.ff-show-real-page #garage:not(.hidden),

  body.ff-show-real-page #recovery:not(.hidden){

    box-sizing:border-box !important;

    margin-left:
      var(
        --ff-master-sidebar-width,
        260px
      ) !important;

    width:
      calc(
        100vw -
        var(
          --ff-master-sidebar-width,
          260px
        )
      ) !important;

    max-width:
      calc(
        100vw -
        var(
          --ff-master-sidebar-width,
          260px
        )
      ) !important;

    min-width:0 !important;

    padding-left:24px !important;
    padding-right:24px !important;

    overflow-x:hidden !important;

  }


  body.ff-show-real-page #detail:not(.hidden) > *,

  body.ff-show-real-page #vehicleForm:not(.hidden) > *,

  body.ff-show-real-page #users:not(.hidden) > *,

  body.ff-show-real-page #tech:not(.hidden) > *,

  body.ff-show-real-page #job:not(.hidden) > *,

  body.ff-show-real-page #breakdown:not(.hidden) > *,

  body.ff-show-real-page #garage:not(.hidden) > *,

  body.ff-show-real-page #recovery:not(.hidden) > *{

    box-sizing:border-box !important;

    max-width:100% !important;

    min-width:0 !important;

  }

}


/*
  Mobile/tablet must remain full width.
*/

@media (max-width:900px){

  #detail,
  #vehicleForm,
  #users,
  #tech,
  #job,
  #breakdown,
  #garage,
  #recovery{

    margin-left:0 !important;

    width:100% !important;
    max-width:100% !important;

  }

}



/* =========================================================
   FIXFLEET_CANONICAL_DESKTOP_GEOMETRY_20260916

   One desktop layout:
   260px master sidebar + dashboard occupying remaining width.
   Prevents detached dashboard / sidebar overlap.
   ========================================================= */

@media(min-width:901px){

  #ffMasterSidebar{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;

    width:260px !important;
    min-width:260px !important;
    max-width:260px !important;

    transform:none !important;
    margin:0 !important;

    z-index:70000 !important;
  }


  #ffDesktopDashboardHost{
    position:fixed !important;

    left:260px !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;

    width:auto !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    z-index:1 !important;
  }


  #ffDesktopDashboardHost #ffGoalDashboard{
    position:relative !important;

    left:auto !important;
    right:auto !important;

    width:100% !important;
    max-width:none !important;

    margin:0 !important;

    transform:none !important;
  }


  body.ff-detached-dashboard-active{
    overflow-x:hidden !important;
  }

}





/* =========================================================
   FIXFLEET UTILISATION BACKGROUND PAGE CLEANUP 20260916
   Hide legacy admin screens underneath Utilisation only.
   ========================================================= */

@media(min-width:901px){

  body.ff-utilisation-open
  #admin > :not(#ffVehicleUtilisationWorkspace){
    display:none !important;
  }

  body.ff-utilisation-open
  #ffVehicleUtilisationWorkspace{
    background:
      linear-gradient(
        180deg,
        #06111e 0%,
        #050d17 100%
      ) !important;
  }

}


/* FIXFLEET VEHICLE DETAIL CLICK LAYER FIX 20260921 */

body.ff-show-real-page #detail:not(.hidden){
  position:relative !important;
  z-index:1000000 !important;
  pointer-events:auto !important;
  isolation:isolate !important;
}

body.ff-show-real-page #detail:not(.hidden) #detailBody{
  position:relative !important;
  z-index:1 !important;
  pointer-events:auto !important;
}

body.ff-show-real-page #detail:not(.hidden) #vehicleDetailTabs{
  position:sticky !important;
  z-index:1000010 !important;
  pointer-events:auto !important;
}

body.ff-show-real-page #detail:not(.hidden)
#vehicleDetailTabs button{
  position:relative !important;
  z-index:1000011 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}

body.ff-show-real-page #detail:not(.hidden)::before,
body.ff-show-real-page #detail:not(.hidden)::after{
  pointer-events:none !important;
}



/* =========================================================
   FIXFLEET_TECHNICIAN_HEADER_PROFILE_STYLE_20260923
   ========================================================= */

body[data-fixfleet-role="technician"]
#top .ff-header-brand{
  display:none !important;
}

body[data-fixfleet-role="technician"]
#top{
  justify-content:flex-end !important;
}

body[data-fixfleet-role="technician"]
#top .ff-top-actions{
  width:100% !important;
  justify-content:flex-end !important;
}

.ff-top-user-profile{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}

.ff-top-user-profile.hidden{
  display:none !important;
}

.ff-top-user-avatar{
  width:38px;
  height:38px;
  min-width:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  background:rgba(41,202,194,.16);
  border:1px solid rgba(67,225,193,.28);
}

.ff-top-user-copy{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}

.ff-top-user-copy strong{
  font-size:14px;
  font-weight:850;
}

.ff-top-user-copy small{
  margin-top:3px;
  font-size:11px;
  opacity:.62;
}



/* =========================================================
   FIXFLEET_REAL_PAGE_MAIN_GEOMETRY_20260923

   Real application pages must use the full viewport.
   The old centred 1000px <main> was causing the sidebar
   offset to be applied twice visually.
   ========================================================= */

@media(min-width:901px){

  body.ff-show-real-page > main{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box !important;
  }

}



/* =========================================================
   FIXFLEET_REAL_PAGE_HEADER_GHOST_CLEANUP_20260923
   Remove duplicate legacy header text behind master sidebar.
   Keep notification/profile controls aligned right.
   ========================================================= */

@media(min-width:901px){

  body.ff-show-real-page #top .ff-header-brand,
  body.ff-clean-legacy #top .ff-header-brand,
  body.ff-unified-legacy-view #top .ff-header-brand{
    display:none !important;
    visibility:hidden !important;
  }

  body.ff-show-real-page #top,
  body.ff-clean-legacy #top,
  body.ff-unified-legacy-view #top{
    justify-content:flex-end !important;
  }

  body.ff-show-real-page #top .ff-top-actions,
  body.ff-clean-legacy #top .ff-top-actions,
  body.ff-unified-legacy-view #top .ff-top-actions{
    margin-left:auto !important;
  }

}