/* 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;
    }*/