.breadcrumb-road {
    background:
            repeating-radial-gradient(circle at 1px 1px, #2a2a2a 0px, #111 2px, #111 3px),
            repeating-linear-gradient(45deg, #1a1a1a 0, #1a1a1a 2px, #111 3px, #111 4px),
            linear-gradient(to bottom, #1a1a1a, #0f0f0f);
    border-top: 2px solid #ffcc00;
    border-bottom: 2px solid #ffcc00;
    color: #ffcc00;

    /* ↓ Make the bar thinner */
    line-height: .5;     /* Keeps text aligned nicely */
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

/* Keep text clear and readable */
.breadcrumb-road .breadcrumb {
    background: transparent;
    margin-bottom: 0;
    padding: 0.1rem 1rem;  /* tighter vertical padding */
}

/* Breadcrumb text and links */
.breadcrumb-road .breadcrumb-item a {
    color: #ffcc00;
    text-decoration: none;
}

.breadcrumb-road .breadcrumb-item a:hover {
    color: #ffcc00;
    text-decoration: underline;
}

/* Current (active) page */
.breadcrumb-road .breadcrumb-item.active {
    color: #fff;
}

/* Separator color */
.breadcrumb-road .breadcrumb-item + .breadcrumb-item::before {
    color: #ffcc00;
}

/* Small letter-spacing */
.breadcrumb-road .breadcrumb-item {
    letter-spacing: 0.5px;
}






/* Calendar */
/* ================================
   Routes Calendar – Month View
   ================================ */
.routes-calendar-wrapper {
    padding-left: 1rem;
    padding-right: 1rem;
}


.routes-calendar.month {
    width: 100%;
    margin-top: 10px;
}

/* Weekday header row */
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 600;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 6px;
}

/* Actual calendar grid */
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.calendar-day {
    border: 1px solid #ddd;
    min-height: 120px;
    padding: 6px;
    background: #fff;
    font-size: 13px;
}

.calendar-day.out-of-month {
    background: #f5f5f5;
    color: #999;
}

.calendar-day .day-number {
    font-weight: 600;
    font-size: 0.8rem;
    margin-bottom: 4px;
}

.calendar-day .day-meta {
    font-size: 0.75rem;
    color: #777;
}



/* ================================
   Calendar Day Highlighting
   ================================ */

.calendar-day.today {
    border: 2px solid #0d6efd;
    background-color: #eef5ff;
}

.calendar-day.selected {
    border: 2px solid #ffc107;
    background-color: #fff8e1;
}

/* Optional: subtle emphasis on header text */
.calendar-day.today .fw-bold,
.calendar-day.selected .fw-bold {
    font-weight: 700;
}


.calendar-selectable {
    cursor: pointer;
}

.calendar-selectable:hover {
    background-color: #f5f9ff;
}

/* Selected day */
.calendar-day.selected {
    outline: 2px solid #0d6efd;
    background-color: #eef4ff;
}

/* Today */
.calendar-day.today {
    border-color: #0d6efd;
}





















.route-click {
    cursor: pointer;
}

.route-click:hover {
    background-color: #e6efff;
}






















.table-sortable th a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
    font-weight: 500;
}

.table-sortable th a:hover {
    color: #007bff !important;
}

/* Default neutral arrows */
.table-sortable th.sortable::after {
    content: "\2195"; /* up/down arrow */
    font-size: 0.8rem;
    color: #ccc;
    margin-left: 6px;
}

/* Active sort direction icons */
.table-sortable th.sorted-asc::after {
    content: "\25B2"; /* ▲ */
    color: #007bff;
}

.table-sortable th.sorted-desc::after {
    content: "\25BC"; /* ▼ */
    color: #007bff;
}

/* Optional: highlight sorted column */
.table-sortable th.sorted-asc,
.table-sortable th.sorted-desc {
    background-color: #e7f1ff;
    color: #0056b3;
}



.progress-bar.running {
    animation: pulse 1.8s infinite;
}

@keyframes pulse {
    0%   { box-shadow: 0 0 0px #007bff; }
    50%  { box-shadow: 0 0 12px #007bff; }
    100% { box-shadow: 0 0 0px #007bff; }
}











/* for Intuit sync sandbox */
.sandbox-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    background: #ffc107;
    color: #000;
    padding: 4px 10px;
    font-size: 0.75rem;
    border-bottom-left-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}




















.route-row {
    padding: 8px;
    border: 1px solid #ddd;
    margin-bottom: 6px;
    cursor: pointer;
}

.route-row:hover {
    background: #f5f5f5;
}


.route-row.selected {
    background: #e6f0ff;
}

.route-row.primary {
    outline: 2px solid #3b82f6;
}
.routes-manage-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 16px;
}

.routes-column {
    border: 1px solid #ddd;
    background: #fff;
    padding: 12px;
    min-height: 300px;
}

.routes-column h3 {
    margin-top: 0;
}