:root {
   --lismore-blue: #003C77;
   --light-blue: #A6C1DB;
   --light-blue-70: #BDD0E4;
   --light-blue-50: #CEDBEA;
   --light-blue-20: #E7EDF5;
   --mid-green: #29A849;
   --font-family-primary: 'Montserrat', sans-serif;
   --status-design: #ffc107;
   --status-site-works: #fd7e14;
   --status-mobilisastion: #20c997;
   --status-weather-delay: #6c757d;
   --status-complete: #8ECA5D;
   --status-on-hold: #dc3545;
   --status-demobilisation: #17a2b8;
   --status-default: #aab1b7;
 }

 body {
   font-family: var(--font-family-primary);
   margin: 0;
   background: var(--light-blue-20);
   color: #333;
 }

 .ca-map {
   position: relative;
 }

 #mapboxMap {
   width: 100%;
   max-height: 1200px;
 }

 .mapboxgl-popup,
 .mapboxgl-popup-content {
   min-width: 325px !important;
   font-family: var(--font-family-primary);
 }

 .ca-map-wrapper.ca-map-loading:before {
   content: 'Loading…';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: #fff;
   padding: 8px 14px;
   border-radius: 4px;
   border: 1px solid #ccc;
   z-index: 10;
 }

 .btn-group.ca-map-top-left-controls {
   position: absolute;
   top: 12px;
   left: 12px;
   z-index: 5;
   display: flex;
   gap: 4px;
   flex-wrap: wrap;
 }

 .btn.btn-light {
   background: #fff;
   color: var(--lismore-blue);
   border: 1px solid var(--lismore-blue);
   padding: .45rem .8rem;
   border-radius: 4px !important;
   font-size: .85rem;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: .35rem;
   text-decoration: none;
   cursor: pointer;
 }

 .btn.btn-light:hover {
   background: var(--light-blue-50);
 }

 .geocoder {
   min-width: 260px;
 }

 .collapse {
   transition: none !important;
 }

 /* Sidebar project cards */
 .projects-list {
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding: 12px 14px 40px;
 }

 .project-card {
   background: #fff;
   border: 1px solid var(--light-blue-50);
   border-radius: 8px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
   padding: 0;
   transition: box-shadow .15s, transform .15s;
 }

 .project-card:hover {
   box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
   transform: translateY(-2px);
 }

 .project-card__header {
   margin-bottom: 8px;
 }

 .project-card__title {
   margin: 0;
   font-size: 1rem;
   font-weight: 700;
   color: var(--lismore-blue);
   line-height: 1.3;
 }

 .project-card__number {
   font-weight: 500;
   color: #666;
 }

 .project-card__meta {
   font-size: .85rem;
   color: #444;
   display: grid;
   gap: 4px 10px;
   grid-template-columns: 1fr;
   margin-bottom: 12px;
 }

 .project-card__meta .label {
   font-weight: 600;
   margin-right: 4px;
   color: #333;
 }

 .project-card__timeline i {
   margin-right: 4px;
   color: var(--lismore-blue);
 }

 .status-dot {
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   margin-right: 6px;
   vertical-align: middle;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
 }

 .project-card__actions {
   display: flex;
   gap: 4px;
   flex-wrap: wrap;
 }

 .btn {
   padding: .45rem .9rem;
   border-radius: 4px;
   font-size: .82rem;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   gap: .35rem;
   cursor: pointer;
   border: 1px solid var(--lismore-blue);
   background: #fff;
   color: var(--lismore-blue);
   text-decoration: none;
 }

 .btn:hover {
   background: var(--light-blue-50);
 }

 .btn-primary {
   background-color: var(--status-complete) !important;
   color: #fff;
   border-color: #fff;
 }

 .btn-primary:hover {
   background: #024a97;
 }

 .btn-outline {
   background: #fff;
   color: var(--lismore-blue);
   border-color: var(--lismore-blue);
 }

 .fly-to-btn {
  background: var(--light-blue-50);
 }

 /* ---- Sidebar toggle ---- */
 .sidebar-toggle {
   font-size: 13px;
   border-radius: 4px;
   transform: rotate(-90deg) translate(-100%, 0);
   transform-origin: top left;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   margin-top: 100px;
   letter-spacing: .05em;
   animation: bounce 3s infinite ease;
   left: 350px;
   /* match your sidebar max-width */
   position: absolute;
   z-index: 1;
   transition: left .3s ease-in-out;
   background: var(--lismore-blue);
   color: #fff;
 }

 @keyframes bounce {

   0%,
   30% {
     padding-top: 0;
   }

   15% {
     padding-top: 1em;
   }
 }

 #mapSidebarToggle:checked~aside {
   margin-left: -350px;
   overflow: hidden;
   transition: margin-left .3s ease-in-out;
 }

 #mapSidebarToggle:not(:checked)~aside {
   margin-left: 0;
   transition: margin-left .3s ease-in-out;
 }

 #mapSidebarToggle:checked+.sidebar-toggle {
   left: 0;
   animation: none;
 }

 .sidebar-toggle:hover {
   cursor: pointer;
 }

 #mapSidebarToggle:checked+.sidebar-toggle .sidebar-toggle-text-show {
   display: none;
 }

 #mapSidebarToggle:not(:checked)+.sidebar-toggle .sidebar-toggle-text-hide {
   display: none;
 }

 #mapSidebarToggle:not(:checked)+.sidebar-toggle .sidebar-toggle-text-show {
   display: inline;
 }

 #mapSidebarToggle:checked+.sidebar-toggle .fa {
   transform: rotateX(180deg);
   transition: transform .3s ease-in-out;
 }

 #mapSidebarToggle:not(:checked)+.sidebar-toggle .fa {
   transform: rotateX(0);
   transition: transform .3s ease-in-out;
 }

 /* Mapbox container overflow fix when toggled */
 .map-with-sidebar-toggle #mapSidebarToggle:checked~aside,
 .map-with-sidebar-toggle #mapSidebarToggle:not(:checked)~aside {
   margin-left: 0;
   /* overridden above; keep selector parity */
 }

 @media (min-width:992px) {
   .sidebar-toggle {
     left: 350px;
   }

   #mapSidebarToggle:checked~aside {
     margin-left: -350px;
   }
 }

 @media (max-width:992px) {
   .sidebar-toggle {
     display: none;
   }

   #mapSidebarToggle:checked~aside,
   #mapSidebarToggle:not(:checked)~aside {
     margin-left: 0;
   }
 }

 .toggle-off {
   z-index: -1;
 }

 #mapSidebarToggle {
   display: none;
 }

 .ca-map-sidebar {
   background: #fff !important;
 }

 .mapboxgl-popup .mapboxgl-popup-close-button {
   outline: none !important;
   box-shadow: none !important;
 }

 .mapboxgl-popup,
 .mapboxgl-popup-content {
   min-width: 320px !important;
   max-width: 420px !important;
 }

 @media (max-width: 600px) {

   .mapboxgl-popup,
   .mapboxgl-popup-content {
     min-width: 0 !important;
     max-width: 100vw !important;
   }
 }

 @media(min-width:991px) {
   .ca-map {
     height: 100vh !important;
   }

   .ca-map-wrapper {
     flex-direction: row-reverse !important;
   }

   .ca-map-sidebar {
     max-width: 350px !important;
     overflow: auto !important;
     height: 100vh !important;
   }

   .ca-map-container {
     height: auto !important;
   }

   .sidebar-level {
     width: 100% !important;
     max-width: 350px !important;
   }
 }

 .card-body {
    padding: 0;
  }

 .card-body-container {
  max-width: unset;
 }

 .ca-dots button {
  width: 15px;
  height: 15px;
 }