/*
 * CFI · compact icon-only navigation
 * Applies exclusively to the existing Compliance and Maintenance workspaces.
 * Keeps all nine original destinations, tooltips/title + aria labels, active marker,
 * and full-width content alongside the standard 74px rail. No changes to other fleet pages.
 *
 * This file intentionally loads after both page-specific styles because the
 * previously approved reference layouts expanded their sidebars to 160px.
 */
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)){
  --cfi-command-rail:74px;
}
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .app-shell{
  padding-left:74px;
}
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar{
  width:74px;
  min-width:74px;
  padding:14px 10px 18px;
  align-items:center;
  gap:19px;
  overflow-x:visible;
  background:linear-gradient(170deg,#103f48,#07343e 72%,#08323c);
}
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar > .brand{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:100%;
  height:54px;
  flex:0 0 54px;
  padding:0;
  margin:0;
}
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar .brand-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  background:transparent url("/assets/brand/cfi-f.svg") center/29px auto no-repeat;
  filter:brightness(0) invert(1);
}
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar .brand-icon svg{
  display:none !important;
}
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar .brand-copy,
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar .section-label{
  display:none !important;
}
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar .nav-list{
  position:static;
  inset:auto;
  display:flex;
  flex:0 1 auto;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  min-width:0;
  max-height:calc(100dvh - 145px);
  margin:0;
  padding:0;
  gap:7px;
  border:0;
  box-shadow:none;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:none;
  background:transparent;
}
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar .nav-list::-webkit-scrollbar{
  display:none;
}
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar .nav-item{
  display:flex !important;
  flex:0 0 45px;
  align-items:center;
  justify-content:center;
  width:54px;
  min-width:54px;
  max-width:54px;
  height:45px;
  min-height:45px;
  margin:0;
  padding:0;
  gap:0;
  order:initial !important;
  border:1px solid transparent;
  border-radius:13px;
  background:transparent;
  color:#e4f3f2;
  text-align:center;
  white-space:normal;
}
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar .nav-item:hover{
  border-color:transparent;
  background:#20535d;
  color:#fff;
}
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar .nav-item.is-active{
  border-color:#27626a;
  background:#20535f;
  color:#fff;
  box-shadow:none;
}
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar .nav-item.is-active::before{
  inset:-1px auto -1px -11px !important;
  width:5px;
  border-radius:0 4px 4px 0;
  background:#77e2d1;
}
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar .nav-item .nav-ic{
  display:inline-flex;
  flex:0 0 24px;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  padding:0;
  margin:0;
  color:inherit;
}
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar .nav-item .nav-ic svg{
  width:23px !important;
  height:23px !important;
  stroke-width:1.85;
}
/* The previous expanded rail forced labels to display with !important.
   Override that and its text-generating ::after variants. */
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar .nav-item .nav-label,
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar .nav-item:hover .nav-label,
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar .nav-item:focus-visible .nav-label{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  height:0 !important;
  padding:0 !important;
  border:0 !important;
  pointer-events:none !important;
}
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar .nav-label::before,
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar .nav-label::after{
  display:none !important;
  content:none !important;
}
/* Maintenance's old 6-link list hid four routes and inserted a duplicate Live Fleet link.
   Restore the existing nine-icon rail in DOM order, without duplicate destinations. */
body.cfi-command-design:has(.cfi-maint-workspace) .sidebar .nav-item[data-md-live]{
  display:none !important;
}
body.cfi-command-design:has(.cfi-maint-workspace) .sidebar .nav-item[data-view="borders"],
body.cfi-command-design:has(.cfi-maint-workspace) .sidebar .nav-item[data-view="bookings"],
body.cfi-command-design:has(.cfi-maint-workspace) .sidebar .nav-item[data-view="drivers"],
body.cfi-command-design:has(.cfi-maint-workspace) .sidebar .nav-item[data-view="driverportal"]{
  display:flex !important;
}
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar-bottom{
  width:100%;
  align-items:center;
  margin-top:auto;
}
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar-bottom .text-button{
  width:100%;
  min-height:43px;
  font-size:0;
  justify-content:center;
}
/* Earlier screen layouts used the rail as a mobile drawer at <=760px, but
   the existing drawer controller opens only at <=640px. At tablet widths,
   keep the compact rail visible rather than leaving navigation inaccessible. */
@media (min-width:641px) and (max-width:760px){
  body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)){
    --cfi-command-rail:74px;
  }
  body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .app-shell{
    padding-left:74px !important;
  }
  body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar{
    width:74px !important;
    min-width:74px !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    padding:14px 10px 18px !important;
    align-items:center;
  }
  body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar > .brand{
    display:flex !important;
  }
  body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar .nav-list{
    margin-top:0;
    gap:7px;
  }
  body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar .nav-item{
    flex-basis:45px;
    height:45px;
    min-height:45px;
  }
}
/* On phones the compact rail remains icon-only in the existing accessible mobile
   drawer, rather than taking up 74px of the narrow content viewport. */
@media (max-width:640px){
  body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)){
    --cfi-command-rail:0px;
  }
  body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .app-shell{
    padding-left:0 !important;
  }
  body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar{
    width:74px !important;
    min-width:74px !important;
    padding:14px 9px !important;
    align-items:center !important;
    gap:0;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateX(-105%) !important;
  }
  body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar.open{
    width:74px !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateX(0) !important;
    box-shadow:12px 0 28px #092f3950;
  }
  body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar > .brand{
    display:none !important;
  }
  body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar .nav-list{
    margin-top:67px;
    gap:6px;
    max-height:calc(100dvh - 142px);
  }
  body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar .nav-item{
    width:54px;
    min-width:54px;
    max-width:54px;
    flex-basis:45px;
    height:45px;
    min-height:45px;
    justify-content:center;
  }
  body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar .nav-item.is-active::before{
    inset:-1px auto -1px -11px !important;
  }
}

/* Reset stays a single icon, never overflowing as “Reset demo data”. */
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar-bottom #reset-demo {
  display:grid;
  place-items:center;
  width:54px;
  min-height:45px;
  margin:0 auto;
  padding:0;
  overflow:hidden;
  font-size:0 !important;
  white-space:nowrap;
}
body.cfi-command-design:is(:has(.cfi-compliance-workspace),:has(.cfi-maint-workspace)) .sidebar-bottom #reset-demo:not(:has(svg))::before {
  display:block;
  content:"↶";
  color:#c3dad9;
  font-size:23px;
  line-height:1;
}