.vis-timeline {
   font-size: 0.8rem;
   font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
   background: #fff;
   border: 1px solid #e5e7eb;
}

/* axis */
.vis-time-axis {
   background: #fbfdff;
}

.vis-time-axis .vis-text {
   color: #64748b;
   font-size: 0.78rem;
   font-weight: 500;
}

.vis-time-axis .vis-text.vis-major {
   font-weight: 700;
   color: #334155;
   font-size: 1rem;
   padding-top: 0.45rem;
   padding-left: 0.5rem;
}

/* grid */
.vis-panel {
   border-color: #e8eef5 !important;
}

/* grid */
.vis-panel {
   border-color: #e8eef5 !important;
}

.vis-grid.vis-vertical {
   border-left-color: #e2e8f0 !important;
}

.vis-grid.vis-vertical.vis-minor {
   border-left-color: #eef2f7 !important;
}

.vis-grid.vis-vertical.vis-major {
   border-left-color: #f2f2f2 !important;
}

/* keep light horizontal lines */
.vis-grid.vis-horizontal,
.vis-grid.vis-horizontal.vis-minor,
.vis-grid.vis-horizontal.vis-major {
   border-top: 1px solid #fcfdff !important;
}

.vis-group {
   border-bottom: 1px solid hsl(0, 0%, 97%) !important;
}

.vis-panel.vis-center {
   border-top: none !important;
}


.vis-saturday,
.vis-sunday {
   background-color:#f0f5f8
}

/* left labels */


.vis-labelset .vis-inner {
   min-height: 2rem !important;
   display: flex;
   align-items: center;
   padding: 0 !important;
}

.vis-label.offline,
.vis-label.onlineAvailable,
.vis-label.busy {
   min-width: 10rem;
   max-width: 10rem;
   border-radius: 0 !important;
   box-shadow: none !important;
}

/* Removes the default border and background from the top time-axis panel */
.vis-panel.vis-top, 
.vis-panel.vis-left, 
.vis-panel.vis-right {
   border: none !important;
   background-color: transparent !important;
}

.vis-label.offline {
   background-color: #f1f1f1;
   border-color: #d9d9d9 !important;
   color: #6b7280;
}

.vis-label.onlineAvailable {
   background-color: #ffffff;
   border-color: #6aa9f5 !important;
   color: #1d4ed8;
}

.vis-label.busy {
   background-color: #e5d48d;
   border-color: #e5b832 !important;
   color: #92400e;
}

.vis-labelset .vis-label .vis-inner {
   padding-left: 8px !important;
   padding-top: 2px !important;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   box-sizing: border-box;
}

/* generic timeline item */
.vis-item {
   border-radius: 0.35rem !important;
   box-shadow: none !important;
    min-width: 60px !important;
}

.vis-item .vis-item-content {
   font-size: 12px !important;
   font-weight: 400;
   line-height: 11px !important;
   padding-top: 6px !important;
   padding-bottom: 6px !important;
   padding-left: 6px !important;
   padding-right: 6px !important;
   border-radius: 0 !important;
}

.vis-item.zoomed-out-text {
   border-radius: 0.3rem !important;
   min-width: 45px !important;
}

.vis-item.zoomed-out-text .vis-item-content {
   font-size: 12px !important;
   font-weight: 400;
   line-height: 11px !important;
   padding-top: 6px !important;
   padding-bottom: 6px !important;
   padding-left: 6px !important;
   padding-right: 6px !important;
   border-radius: 0 !important;
}

.ds-recurring-badge {
   display: inline-flex;
   align-items: center;
   gap: 2px;
   margin-left: 5px;
   padding: 1px 5px;
   border-radius: 4px;
   background: rgba(255, 255, 255, 0.92);
   color: #14532d;
   font-size: 10px;
   font-weight: 700;
   line-height: 1.2;
   vertical-align: middle;
}

.ds-45km-badge {
   display: inline-flex;
   align-items: center;
   gap: 2px;
   margin-left: 5px;
   padding: 1px 5px;
   border-radius: 4px;
   background: rgba(254, 243, 199, 0.95);
   color: #78350f;
   font-size: 10px;
   font-weight: 800;
   line-height: 1.2;
   vertical-align: middle;
}

body.whenride-dark .ds-recurring-badge {
   background: rgba(15, 23, 42, 0.9);
   color: #86efac;
}

body.whenride-dark .ds-45km-badge {
   background: rgba(120, 53, 15, 0.9);
   color: #fde68a;
}

.ds-45km-badge-circle {
   display: inline-flex;
   flex: 0 0 16px;
   align-items: center;
   justify-content: center;
   width: 16px;
   height: 16px;
   margin-right: 4px;
   border-radius: 50%;
   background: #fbbf24;
   color: #78350f;
   font-size: 9px;
   font-weight: 800;
   line-height: 1;
   vertical-align: middle;
}

.ds-45km-badge-circle-suffix {
   margin-left: 6px;
}

body.whenride-dark .ds-45km-badge-circle {
   background: #fbbf24;
   color: #451a03;
}
/* timeline items */
.vis-item.vis-range {
margin-top: 1px !important;
   margin-bottom: 1px !important;
   background-image: repeating-linear-gradient(
      45deg,
      #374151,
      #374151 10px,
      #374151 10px,
      #374151 20px
   );
}

.vis-item.bg-blue {
   background-image: repeating-linear-gradient(
      45deg,
      #3bbdb0,
      #3bbdb0 10px,
      #3bbdb0 10px,
      #3bbdb0 20px
   );
}

.vis-item.vis-range.vs.day,
.vis-item.vis-range.ride.day {
   background-image: repeating-linear-gradient(
      45deg,
      #9f8796,
      #9f8796 10px,
      #c7b7c0 10px,
      #c7b7c0 20px
   );
}

.vis-item.vis-range.ride.comb,
.vis-item.vis-range.normalCombi {
   background-image: repeating-linear-gradient(
      45deg,
      #3bbdb0,
      #3bbdb0 10px,
      #3bbdb0 10px,
      #3bbdb0 20px
   );
}

.vis-item.vis-range.ride.manual {
   border-width: 4px !important;
   border-style: dotted !important;
   border-color: #facc15 !important;
   background-image: repeating-linear-gradient(
      45deg,
      #374151,
      #374151 10px,
      #374151 10px,
      #374151 20px
   );
}

.vis-item.vis-range.ride.pause,
.vis-item.vis-range.pause {
   border-width: 2px !important;
   border-style: solid !important;
   border-color: #991b1b !important;
   background-image: repeating-linear-gradient(
      45deg,
      #dc2626,
      #dc2626 10px,
      #b91c1c 10px,
      #b91c1c 20px
   ) !important;
}

.vis-item.vis-range.ride.customer {
   background-image: repeating-linear-gradient(
      45deg,
      #303946,
      #303946 10px,
      #303946 10px,
      #303946 20px
   );
}

.vis-item.vis-range.ds.assigned {
   background-image: repeating-linear-gradient(
      45deg,
      #475569,
      #475569 10px,
      #475569 10px,
      #475569 20px
   );
}

.vis-item.vis-range.ds.unassigned,
.vis-item.vis-range.ds.disabled {
   background-image: repeating-linear-gradient(
      45deg,
      #fca5a5,
      #fca5a5 10px,
      #fca5a5 10px,
      #fca5a5 20px
   );
}

.vis-item.vis-range.ds.available {
   background: #6366f1;
}

.vis-item.vis-range.ds {
   overflow: visible !important;
}

.vis-item.vis-range.ds .vis-item-content {
   position: relative;
   overflow: visible !important;
}

.ds-floating-driver-name {
   position: absolute;
   left: 4px;
   bottom: calc(100% + 3px);
   max-width: 180px;
   padding: 2px 6px;
   border-radius: 7px;
   background: rgba(20, 28, 40, 0.88);
   color: #ffffff;
   font-size: 10px;
   font-weight: 700;
   line-height: 1.1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   pointer-events: none;
   z-index: 5;
}

.ds-schedule-content {
   display: block;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

/* ride-planning suggestion hover preview */
.vis-item.vis-background.ride-suggestion-preview-bg {
   background-color: rgba(84, 184, 111, 0.20);
   border-left: 2px dashed #2f8f4e;
   border-right: 2px dashed #2f8f4e;
   box-sizing: border-box;
}

.vis-item.vis-background.ride-suggestion-preview-bg.is-combi {
   background-color: rgba(106, 191, 105, 0.30);
   border-color: #1f7a3d;
}

.vis-item.vis-range.ride-suggestion-preview-item {
   background-color: #54b86f;
   background-image: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.18),
      rgba(255, 255, 255, 0.18) 8px,
      transparent 8px,
      transparent 16px
   );
   border: 1px dashed #14532d;
   color: #ffffff;
   font-weight: 800;
   box-shadow: 0 2px 8px rgba(15, 23, 42, 0.28);
   pointer-events: none;
   z-index: 30;
}

.vis-item.vis-range.ride-suggestion-preview-item.is-combi {
   background-color: #3c9656;
}

.vis-item.vis-range.ride-suggestion-preview-item .vis-item-content {
   padding: 2px 6px;
}


/* recent */
.vis-item.vis-range.recent {
   background-color: #ec4899;
   background-image: repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.16),
      rgba(255,255,255,0.16) 10px,
      transparent 10px,
      transparent 20px
   );
}

/* Blink/sparkle: the combi partner ride while its confirmation dialog is open */
@keyframes tlRideBlink {
   0%, 100% {
      box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.9), 0 0 4px 1px rgba(250, 204, 21, 0.5);
      filter: brightness(1);
   }
   50% {
      box-shadow: 0 0 0 2px rgba(250, 204, 21, 1), 0 0 16px 5px rgba(250, 204, 21, 0.95);
      filter: brightness(1.35) saturate(1.2);
   }
}

.vis-item.vis-range.tl-blink {
   z-index: 60 !important;
   outline: 2px solid rgba(250, 204, 21, 0.95) !important;
   outline-offset: 1px;
   border-color: #facc15 !important;
   animation: tlRideBlink 0.85s ease-in-out infinite;
}

.vis-item.vis-range.recent.ds,
.vis-item.vis-range.available {
   background-color: #6366f1;
   background-image: repeating-linear-gradient(
      45deg,
      #ec4899,
      #ec4899 10px,
      rgba(255,255,255,0.16) 10px,
      rgba(255,255,255,0.16) 20px,
   );
}

.vis-item.vis-range.recent.normalMoved,
.vis-item.vis-range.recent.done.normalMoved {
   background-color: #ec4899 !important;
   background-image: repeating-linear-gradient(
      45deg,
      #ec4899,
      #ec4899 10px,
      transparent 10px,
      transparent 20px
   ) !important;
   border-color: #ec4899 !important;
}

.vis-item.vis-range.recent.combMoved,
.vis-item.vis-range.recent.normalCombi.combMoved,
.vis-item.vis-range.recent.done.combMoved,
.vis-item.vis-range.recent.done.normalCombi.combMoved {
   background-color: #ec4899 !important;
   background-image: repeating-linear-gradient(
      45deg,
      #ec4899,
      #ec4899 10px,
      transparent 10px,
      transparent 20px
   ) !important;
   border-color: #ec4899 !important;
}

.vis-item.vis-range.recent.comb,
.vis-item.vis-range.recent.normalCombi {
   background-image: repeating-linear-gradient(
      45deg,
      #3bbdb0,
      #3bbdb0 10px,
      #ec4899 10px,
      #ec4899 20px
   );
}

.vis-item.vis-range.recent.manual {
   background-image: repeating-linear-gradient(
      45deg,
      #374151,
      #374151 10px,
      #ec4899 10px,
      #ec4899 20px
   );
}

.vis-item.vis-range.recent.pause {
   background-image: repeating-linear-gradient(
      45deg,
      #dc2626,
      #dc2626 10px,
      #ec4899 10px,
      #ec4899 20px
   ) !important;
}

.vis-item.vis-range.recent.done {
   background-image: repeating-linear-gradient(
      45deg,
      #79bc37,
      #79bc37 10px,
      #ec4899 10px,
      #ec4899 20px
   );
}

.vis-item.vis-range.recent.assigned {
   background-image: repeating-linear-gradient(
      45deg,
      #3bbdb0,
      #3bbdb0 10px,
      #ec4899 10px,
      #ec4899 20px
   );
}

/* busy */
.vis-item.vis-range.busy {
   background-image: repeating-linear-gradient(
      45deg,
      #f59e0b,
      #f59e0b 10px,
      #f59e0b 10px,
      #f59e0b 20px
   );
}

.vis-item.vis-range.busy.day {
   background-image: repeating-linear-gradient(
      45deg,
      #9f8796,
      #9f8796 10px,
      #f59e0b 10px,
      #f59e0b 20px
   );
}

.vis-item.vis-range.busy.comb,
.vis-item.vis-range.busy.normalCombi {
   background-image: repeating-linear-gradient(
      45deg,
      #3bbdb0,
      #3bbdb0 10px,
      #f59e0b 10px,
      #f59e0b 20px
   );
}

.vis-item.vis-range.busy.manual {
   background-image: repeating-linear-gradient(
      45deg,
      #374151,
      #374151 10px,
      #f59e0b 10px,
      #f59e0b 20px
   );
}

.vis-item.vis-range.busy.pause {
   background-image: repeating-linear-gradient(
      45deg,
      #dc2626,
      #dc2626 10px,
      #f59e0b 10px,
      #f59e0b 20px
   ) !important;
}

.vis-item.vis-range.busy.customer {
   background-image: repeating-linear-gradient(
      45deg,
      #303946,
      #303946 10px,
      #f59e0b 10px,
      #f59e0b 20px
   );
}

/* done */
.vis-item.vis-range.done {
   background-image: repeating-linear-gradient(
      45deg,
      #79bc37,
      #79bc37 10px,
      #79bc37 10px,
      #79bc37 20px
   );
}

.vis-item.vis-range.done.day {
   background-image: repeating-linear-gradient(
      45deg,
      #9f8796,
      #9f8796 10px,
      #79bc37 10px,
      #79bc37 20px
   );
}

.vis-item.vis-range.done.comb,
.vis-item.vis-range.done.normalCombi {
   background-image: repeating-linear-gradient(
      45deg,
      #79bc37,
      #79bc37 10px,
      #9fd45f 10px,
      #9fd45f 20px
   ) !important;
}

.vis-item.vis-range.done.manual {
   background-image: repeating-linear-gradient(
      45deg,
      #374151,
      #374151 10px,
      #79bc37 10px,
      #79bc37 20px
   );
}

.vis-item.vis-range.done.pause {
   background-image: repeating-linear-gradient(
      45deg,
      #dc2626,
      #dc2626 10px,
      #79bc37 10px,
      #79bc37 20px
   ) !important;
}

.vis-item.vis-range.done.customer {
   background-image: repeating-linear-gradient(
      45deg,
      #303946,
      #303946 10px,
      #79bc37 10px,
      #79bc37 20px
   );
}

/* selected */
.vis-item.vis-range.vis-selected {
   background-image: repeating-linear-gradient(
      45deg,
      #facc15,
      #facc15 10px,
      #facc15 10px,
      #facc15 20px
   ) !important;
   color: #1f2937 !important;
}

.vis-item.vis-range.vis-copy-selected {
   border-color: #facc15 !important;
   box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.45), 0 8px 18px rgba(31, 41, 55, 0.18) !important;
   outline: 2px solid rgba(255, 255, 255, 0.85);
   outline-offset: -4px;
}


/* background */
.vis-item.vis-background.normal {
   background-image: repeating-linear-gradient(
      45deg,
      rgba(145, 145, 145, 0.15),
      rgba(145, 145, 145, 0.15) 10px,
      rgba(145, 145, 145, 0.15) 10px,
      rgba(145, 145, 145, 0.15) 20px
   );
      border-radius: 10px !important;
}

.vis-item.vis-background.inactive {
   background-image: repeating-linear-gradient(
      45deg,
      rgba(248, 122, 122, 0.25),
      rgba(248, 122, 122, 0.25) 10px,
      rgba(248, 122, 122, 0.25) 10px,
      rgba(248, 122, 122, 0.25) 20px
   );
}

.vis-item.vis-background.day {
   background-image: repeating-linear-gradient(
      45deg,
      rgba(159, 135, 150, 0.22),
      rgba(159, 135, 150, 0.22) 10px,
      rgba(199, 183, 192, 0.26) 10px,
      rgba(199, 183, 192, 0.26) 20px
   );
}

.vis-item.vis-background.negative {
   background-color: rgba(255, 0, 0, 0.2);
}

/* moved */
.vis-item.vis-range.normalMoved {
   background-image: repeating-linear-gradient(
      45deg,
      rgb(137, 137, 137),
      rgb(137, 137, 137) 10px,
      rgb(137, 137, 137) 10px,
      rgb(137, 137, 137) 20px
   ) !important;
}

.vis-item.vis-range.combMoved,
.vis-item.vis-range.normalCombi.combMoved {
   background-image: repeating-linear-gradient(
      45deg,
      #8fd8d2,
      #8fd8d2 10px,
      #8fd8d2 10px,
      #8fd8d2 20px
   ) !important;
}

.vis-item.vis-range.done.normalMoved,
.vis-item.vis-range.done.busy.normalMoved,
.vis-item.vis-range.done.customer.normalMoved,
.vis-item.vis-range.done.manual.normalMoved,
.vis-item.vis-range.recent.done.normalMoved {
   background-image: repeating-linear-gradient(
      45deg,
      #a8d86f,
      #a8d86f,10px,
      #a8d86f,10px,
      #a8d86f 20px
   ) !important;
   border-color: #a8d86f !important;
}

.vis-item.vis-range.done.combMoved,
.vis-item.vis-range.done.busy.combMoved,
.vis-item.vis-range.done.customer.combMoved,
.vis-item.vis-range.done.manual.combMoved,
.vis-item.vis-range.done.normalCombi.combMoved,
.vis-item.vis-range.recent.done.combMoved,
.vis-item.vis-range.recent.done.normalCombi.combMoved {
   background-image: repeating-linear-gradient(
      45deg,
      #8ccb4f,
      #8ccb4f 10px,
      #a8d86f 10px,
      #a8d86f 20px
   ) !important;
   border-color: #a8d86f !important;
}

/* Klant-aangemaakte ritten: grijs (#303946) met lichte tekst. */
.vis-item.vis-range.customer,
.vis-item.vis-range.customer .vis-item-content {
   color: #ffffff !important;
}