/* Custom styles goes here */

/* Status color classes for DataTable */
.status-info {
    background-color: #d1ecf1 !important;
    border-color: #bee5eb !important;
    color: #0c5460 !important;
    width: 150px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.status-orange {
    background-color: #ffe4cc !important;
    border-color: #ffcc99 !important;
    color: #8b4513 !important;
    width: 150px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.status-amber {
    background-color: #fff8dc !important;
    border-color: #ffd700 !important;
    color: #b8860b !important;
    width: 150px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.status-cyan {
    background-color: #e0f7fa !important;
    border-color: #b2ebf2 !important;
    color: #006064 !important;
    width: 150px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.status-warning {
    background-color: #fff3cd !important;
    border-color: #ffeaa7 !important;
    color: #856404 !important;
    width: 100px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.status-success-light {
    background-color: #d1edcc !important;
    border-color: #a3d977 !important;
    color: #2d5016 !important;
    width: 100px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.status-danger {
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
    color: #721c24 !important;
    width: 100px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.status-success {
    background-color: #28a745 !important;
    border-color: #1e7e34 !important;
    color: #ffffff !important;
    width: 100px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.status-secondary {
    background-color: #e2e3e5 !important;
    border-color: #d6d8db !important;
    color: #383d41 !important;
    width: 100px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.status-purple {
    background-color: #e2d9f3 !important;
    border-color: #c8b5db !important;
    color: #4a2c6a !important;
    width: 100px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Invoiced - Indigo/Deep Blue */
.status-indigo {
    background-color: #e0e7ff !important;
    border-color: #c7d2fe !important;
    color: #3730a3 !important;
    width: 150px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Paid - Emerald/Rich Green */
.status-emerald {
    background-color: #d1fae5 !important;
    border-color: #a7f3d0 !important;
    color: #065f46 !important;
    width: 150px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* / Status color classes for DataTable */

/* Additional styling for the status cell container */
.status-cell {
    width: 100px !important;
    text-align: center !important;
    padding: 0 !important;
}

/* Ensure the status button takes full width of its container */
.status-text {
    width: 100% !important;
    display: block !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    border-radius: 4px !important;
}

/* Hover effects for better UX */
.status-info:hover {
    background-color: #bee5eb !important;
    color: #0c5460 !important;
}

.status-warning:hover {
    background-color: #ffeaa7 !important;
    color: #856404 !important;
}

.status-success-light:hover {
    background-color: #a3d977 !important;
    color: #2d5016 !important;
}

.status-danger:hover {
    background-color: #f5c6cb !important;
    color: #721c24 !important;
}

.status-success:hover {
    background-color: #218838 !important;
    color: #ffffff !important;
}

.status-secondary:hover {
    background-color: #d6d8db !important;
    color: #383d41 !important;
}

.status-purple:hover {
    background-color: #c8b5db !important;
    color: #4a2c6a !important;
}

.status-indigo:hover {
    background-color: #c7d2fe !important;
    color: #3730a3 !important;
}

.status-emerald:hover {
    background-color: #a7f3d0 !important;
    color: #065f46 !important;
}
/* / Hover effects for better UX */

/* Timeline Point Color Classes */
/* New - Light Blue */
.timeline-point-info {
    background-color: #0c5460 !important;
    border-color: #bee5eb !important;
    box-shadow: 0 0 0 4px #d1ecf1;
}

/* Pick Up - Yellow */
.timeline-point-warning {
    background-color: #856404 !important;
    border-color: #ffeaa7 !important;
    box-shadow: 0 0 0 4px #fff3cd;
}

/* Departure - Orange */
.timeline-point-orange {
    background-color: #8b4513 !important;
    border-color: #ffcc99 !important;
    box-shadow: 0 0 0 4px #ffe4cc;
}

/* US Custom - Amber/Gold */
.timeline-point-amber {
    background-color: #b8860b !important;
    border-color: #ffd700 !important;
    box-shadow: 0 0 0 4px #fff8dc;
}

/* In Transit - Cyan/Teal */
.timeline-point-cyan {
    background-color: #006064 !important;
    border-color: #b2ebf2 !important;
    box-shadow: 0 0 0 4px #e0f7fa;
}

/* Modula Verde - Light Green */
.timeline-point-success-light {
    background-color: #2d5016 !important;
    border-color: #a3d977 !important;
    box-shadow: 0 0 0 4px #d1edcc;
}

/* Modula Rojo - Red */
.timeline-point-danger {
    background-color: #721c24 !important;
    border-color: #f5c6cb !important;
    box-shadow: 0 0 0 4px #f8d7da;
}

/* Arrive - Purple/Violet */
.timeline-point-purple {
    background-color: #4a2c6a !important;
    border-color: #c8b5db !important;
    box-shadow: 0 0 0 4px #e2d9f3;
}

/* Delivered - Dark Green */
.timeline-point-success {
    background-color: #155724 !important;
    border-color: #c3e6cb !important;
    box-shadow: 0 0 0 4px #d4edda;
}

/* Cancelled - Gray */
.timeline-point-secondary {
    background-color: #383d41 !important;
    border-color: #d6d8db !important;
    box-shadow: 0 0 0 4px #e2e3e5;
}

/* Invoiced - Indigo */
.timeline-point-indigo {
    background-color: #3730a3 !important;
    border-color: #c7d2fe !important;
    box-shadow: 0 0 0 4px #e0e7ff;
}

/* Paid - Emerald */
.timeline-point-emerald {
    background-color: #065f46 !important;
    border-color: #a7f3d0 !important;
    box-shadow: 0 0 0 4px #d1fae5;
}

/* Base timeline point styling (if not already in your theme) */
.timeline-point {
    position: absolute;
    left: -0.5rem;
    top: 0.5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid;
    z-index: 1;
    transition: all 0.3s ease;
}

/* Hover effects for timeline points */
.timeline-point-info:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 6px #d1ecf1;
}

.timeline-point-warning:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 6px #fff3cd;
}

.timeline-point-orange:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 6px #ffe4cc;
}

.timeline-point-amber:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 6px #fff8dc;
}

.timeline-point-cyan:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 6px #e0f7fa;
}

.timeline-point-success-light:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 6px #d1edcc;
}

.timeline-point-danger:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 6px #f8d7da;
}

.timeline-point-purple:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 6px #e2d9f3;
}

.timeline-point-success:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 6px #d4edda;
}

.timeline-point-secondary:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 6px #e2e3e5;
}

.timeline-point-indigo:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 6px #e0e7ff;
}

.timeline-point-emerald:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 6px #d1fae5;
}
/* / Hover effects for timeline points */

/* Optional: Add pulsing animation for active/recent statuses */
/*.timeline-point-success.pulse {
    animation: pulse-success 2s infinite;
}

.timeline-point-warning.pulse {
    animation: pulse-warning 2s infinite;
}

@keyframes pulse-success {
    0% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

@keyframes pulse-warning {
    0% {
        box-shadow: 0 0 0 0 rgba(133, 100, 4, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(133, 100, 4, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(133, 100, 4, 0);
    }
}*/

/* Readonly fields */
.custom-readonly-1 {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    color: #495057;
    font-weight: 500;
}

.readonly-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.25rem;
}

/* Prevents the Status cells to be clickabled */
/* Add this to your existing status CSS */
.non-clickable {
    cursor: default !important;
    pointer-events: none !important;
    text-decoration: none !important;
}

/* Remove any hover effects for non-clickable status */
.status-text.non-clickable:hover {
    text-decoration: none !important;
    transform: none !important;
}

/* Ensure the button styling remains intact */
.status-text.non-clickable {
    display: inline-block;
    padding: 8px 12px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    line-height: 1.5;
    transition: none !important; /* Remove any transition effects */
}

.custom-option-content {
    padding: .80em !important;
}

.custom-option-body {
    height: 86px;
}


/* Add these styles to your existing CSS */
.timeline-item-editing {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 10px;
    margin: -10px;
}

.edit-controls {
    display: none;
    margin-top: 10px;
}

.timeline-item-editing .edit-controls {
    display: block;
}

.timeline-item-editing .view-controls {
    display: none;
}
/* / Add these styles to your existing CSS */

/*.custom-option {
    height: 100%;
}

.custom-option-content {
    height: 120px;*/ /* Set a fixed height */
    /*display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

.custom-option-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    justify-content: space-between;*/ /* Distribute space evenly */
/*}

.custom-option-title {
    margin-top: 10px;
    line-height: 1.2;
    font-weight: 600;*/
    /* Control text wrapping */
    /*word-wrap: break-word;
    hyphens: auto;
}

.unit-type-image {
    flex-shrink: 0;*/ /* Prevent image from shrinking */
/*}*/

/*.custom-option-content {
    min-height: 140px;*/ /* Increased to accommodate radio button below */
    /*display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    text-align: center;
}

.custom-option-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-grow: 1;
    justify-content: center;
}

.custom-option-title {
    margin-top: 10px;
    line-height: 1.2;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.custom-option-radio {
    margin-top: 15px;
    align-self: center;
}*/

    /* Optional: Style the radio button */
    /*.custom-option-radio input[type="radio"] {
        transform: scale(1.2);
        margin: 0;
    }*/

/* Extra Stop card style */
.extra-stop-card {
    border: 1.5px solid #c7d2fe;
    border-radius: 10px;
    background: #fafbff;
    overflow: hidden;
    margin-top: 16px;
}

.extra-stop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    background: #eef2ff;
    border-bottom: 1px solid #c7d2fe;
}

.stop-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #3730a3;
}

.stop-badge {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #6366f1;
    color: white;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stop-count {
    font-size: 11px;
    color: #6366f1;
    font-weight: 500;
}

.extra-stop-body {
    padding: 16px;
}

.group-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 8px;
    width: 100%;
}

    .group-label.scheduled {
        background: #ede9fe;
        color: #5b21b6;
    }

    .group-label.actual {
        background: #dbeafe;
        color: #1e40af;
    }

/* Stops collapse styles */
.stop-collapse-btn {
    color: #6366f1;
    background: white;
    border: 1px solid #c7d2fe;
    border-radius: 5px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

    .stop-collapse-btn:hover {
        background: #eef2ff;
    }

    .stop-collapse-btn i {
        transition: transform 0.3s ease;
    }

    .stop-collapse-btn.collapsed i {
        transform: rotate(180deg);
    }

.extra-stop-body {
    padding: 16px;
    transition: all 0.3s ease;
}

/* Delete button on Extra Stops styles */ 
.btn-stop-delete {
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 16px;
    padding: 4px 6px;
    border-radius: 5px;
    transition: color 0.2s, background 0.2s;
    line-height: 1;
}

    .btn-stop-delete:hover {
        color: #ef4444;
        background: #fee2e2;
    }

/* Timeline entry type labels */
.timeline-type-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    vertical-align: middle;
}

    .timeline-type-badge.badge-order {
        background: #ede9fe;
        color: #5b21b6;
    }

    .timeline-type-badge.badge-event {
        background: #dbeafe;
        color: #1e40af;
    }

.timeline-pending {
    opacity: 0.65;
    font-style: italic;
}

#timeline-display .timeline-item {
    transition: opacity 0.3s ease;
}

.address-panel {
    display: none;
    margin-top: 5px;
    padding: 5px 10px;
    background-color: #eef4fb;
    border-radius: 6px;
    font-size: 12px;
    color: #4a6785;
}

/* ?? Timeline modal: prevent horizontal scroll caused by absolute-positioned dots ?? */
#orderTimelineModal .modal-body {
    overflow-x: hidden;
}

#orderTimelineModal .timeline {
    padding-left: 1.5rem;
}
/* ?? / Timeline modal overflow fix ?? */

/* ?? Timeline clock button (Dispatch Manager status column) ?? */
.btn-timeline-clock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 5px;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

    .btn-timeline-clock:hover {
        color: #3730a3;
        border-color: #a5b4fc;
        background: #eef2ff;
    }

    .btn-timeline-clock:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    }

/* ?? Timeline modal legend dot ?? */
.timeline-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* ?? / Timeline clock button ?? */

/* Make the disabled options easier to spot */
#OrderStatusID option:disabled {
    color: #ccc;
}