body {

    overflow-x: hidden;

    background-color: #f2f2f2;

}



.navbar{

    background-color: #fff;

    border-bottom: solid 1px #eee;

}



/* SIDEBAR */

#sidebar{

  width:260px;

  min-height:100vh;

  background:#fff;

  border-right:1px solid #dee2e6;

  transition:all 0.5s cubic-bezier(.4,0,.2,1);

  position:relative;              /* required for absolute toggle positioning */

  padding-top:56px !important;    /* space for top-right toggle button */

}



#sidebar.collapsed{ width:80px; }



/* NAV */

#sidebar .nav-link{
  display:flex;
  align-items:center;
  gap:10px;
  color:#000;
  padding:12px 15px;
  font-weight:500;
  border-radius:10px;
  white-space:nowrap;
}
#sidebar .nav-link:hover{

  background:#0047b3;

  color:#fff;

}



.nav-text{ margin-left:0; transition:opacity .3s; }
#sidebar.collapsed .nav-text{ opacity:0; visibility:hidden; }

#sidebar.collapsed .nav-link{ text-align:center; }





/* Hide nav text */

#sidebar.collapsed .nav-text {

    opacity: 0;

    visibility: hidden;

}





/* Hide nav icons */

#sidebar.collapsed .nav-link i {

    opacity: 0;

    visibility: hidden;

}





/* Optional: center toggle button nicely */

#sidebar.collapsed #toggle-btn {

    right: 50%;

    transform: translateX(50%);

}



/* TOGGLE BUTTON: always visible top-right */

#toggle-btn{

  position:absolute;

  top:12px;

  right:12px;

  width:40px;

  height:40px;

  display:flex;

  align-items:center;

  justify-content:center;

  border:1px solid #dee2e6;

  border-radius:10px;

  background:#fff;

  color:#000;

  cursor:pointer;

  z-index:10;          

  font-weight: 700;

}

#toggle-btn:hover{ 

    background:#0047b3; 

    color: #fff;

}



#toggle-btn:focus{ outline:0; box-shadow:0 0 0 .2rem rgba(13,110,253,.15); }



/* content */

#content{ flex-grow:1; padding:30px; }



.dashcard{

    background-color: #fff;

    padding: 20px;

    border: solid 1px #eee;

    border-radius: 6px;

    box-shadow: 2px 2px 6px #ccc;

    margin-bottom: 30px;

}



.d-card-btn{

    transition: 0.6s;

    cursor: pointer;

}



.d-card-btn:hover{

    background-color: #0047b3;

    border: solid 1px #0047b3;

    color: #fff;

    box-shadow: 3px 3px 10px #bbb;

    top: -3px;

}



.d-card-btn.d-card-btn-live{

    background-color: #0047b3 !important;

    border: solid 1px #0047b3 !important;

    box-shadow: 3px 3px 10px #bbb !important;

    top: -3px !important;

    color: #fff;

}



.primary-color{

    color: #0047b3;

}



a{

    color: #ff6600;

    text-decoration: none;

}



a:hover{

    color: #ff3300;

}



.active-vehicle{

    padding: 2px 6px;

    display: block;

    width: 100%;

    border-radius: 6px;

    border: solid 1px #66cc66;

    box-sizing: border-box; /* ensures padding stays inside td */

}



.active-vehicle i{

    color: #66cc66;

    font-size: 18px;

    padding-right: 5px;

}



.broken-vehicle{

    border: solid 1px #ff4d4d;

    padding: 2px 6px;

    display: block;

    width: 100%;

    border-radius: 6px;

    box-sizing: border-box; /* ensures padding stays inside td */

}



.broken-vehicle i{

    color: #ff4d4d;

    font-size: 18px;

    padding-right: 5px;

}



.repair-vehicle{

    border: solid 1px #e6ac00;

    padding: 2px 6px;

    display: block;

    width: 100%;

    border-radius: 6px;

    box-sizing: border-box; /* ensures padding stays inside td */

}



.repair-vehicle i{

    color: #e6ac00;

    font-size: 16px;

    padding-right: 5px;

}



.started-job{

    border: solid 1px #66cc66;

    padding: 2px 6px;

    display: block;

    width: 100%;

    border-radius: 6px;

    box-sizing: border-box; /* ensures padding stays inside td */

}



.started-job i{

    color: #66cc66;

    font-size: 18px;

    padding-right: 5px;

}



.paused-job{

    border: solid 1px #e6ac00;

    padding: 2px 6px;

    display: block;

    width: 100%;

    border-radius: 6px;

    box-sizing: border-box; /* ensures padding stays inside td */

}



.paused-job i{

    color: #e6ac00;

    font-size: 18px;

    padding-right: 5px;

}



.completed-job{

    border: solid 1px #0088cc;

    padding: 2px 6px;

    display: block;

    width: 100%;

    border-radius: 6px;

    box-sizing: border-box; /* ensures padding stays inside td */

}



.completed-job i{

    color: #0088cc;

    font-size: 18px;

    padding-right: 5px;

}



.cancelled-job{

    border: solid 1px #ff4d4d;

    padding: 2px 6px;

    display: block;

    width: 100%;

    border-radius: 6px;

    box-sizing: border-box; /* ensures padding stays inside td */

}



.cancelled-job i{

    color: #ff4d4d;

    font-size: 18px;

    padding-right: 5px;

}



.btn-primary{

    background-color: #ff6600;

    color: #fff;

    border: 6px;

    border: solid 1px #cc5200;

}



.btn-primary:hover{

    background-color: #cc5200;

    border: solid 1px #662900;

}



.sub-list{

    list-style: square;

}



.sub-list li{

    padding-top: 4px;

    padding-bottom: 4px;

}



.sub-list li:hover{

    background-color: #eee;

}



.highway-table tr:hover{

    background-color: #eee;

}



table{

    padding: 10px;

}



thead{

    background-color: #eee;

    border-bottom: solid 1px #bbb;

}



th{

    padding: 10px;

}



.highway-table tr td{

    padding: 6px;

}



.chevi-small{

    font-size: 12px;

}



.results-box{

    border:solid 1px #e7f0fe;

    padding-top: 12px;

    border-radius: 6px;

    background-color: #f9f9f9;

}



.res-box-row{

    padding-top: 8px;

    border-radius: 6px;

}



.res-box-row:hover{

    cursor: pointer;

    background-color: #fff;

}



.res-box-row i{

    padding: 2px 4px;

    color: #ff4d4d;

    border-radius: 6px;

    transition: 0.6s;

    border: solid 1px #ff4d4d;

}



.res-box-row i:hover{

    background-color: #ff4d4d;

    color: #fff;

}



#clients-table a{

    color: #555;

}



#clients-table a i{

    color: #ff6600;

}



#clients-table a:hover{

    color: #ff6600;

}



thead{

    margin-bottom: 10px;

}



.dh-hidden{

    display: none;

}



.active-side-btn{
    background: #eee;
}

.alert-row-amber td{
    background-color: #fff4cc !important;
}

.alert-row-red td{
    background-color: #ffd9d9 !important;
}

.test-logo{
    font-size: 30px;
    font-weight: 800;
}

.logo-wrap{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    overflow: hidden;
}

.brand-logo{
    width: 100%;
    height: 100%;
    display: block;
    transform: scale(2.2);
    transform-origin: center;
}

.secondary-color{
    color: #ff6600;
}


#sidebar.collapsed .active-side-btn {

    display: none;

}



/* Desktop hover dropdown */

@media (min-width: 992px) {



  .navbar .dropdown:hover .dropdown-menu {

      display: block;

      margin-top: 0;

  }



  .navbar .dropdown-menu {

      display: none;

  }



  .dropdown-menu {

      opacity: 0;

      visibility: hidden;

      transition: all 0.2s ease;

  }



  .dropdown:hover .dropdown-menu {

      opacity: 1;

      visibility: visible;

      display: block;

  }

}