/* Chevron Progress Styles */
.chevron-progress-container {
    display: flex;
    align-items: center;
    /*gap: 2rem;*/
    /*width: 100%;*/
    /*padding-left: 15px;*/
    margin-left: auto;
    height: 32px;
}

.chevron-steps-wrapper {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex: 1;
}
.action-group {
    min-width: 190px;
}

.chevron-step {
    position: relative;
    flex: 1;
    min-width: 120px;
    height: 32px;
    background-color: #ced4da;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    user-select: none;
    margin-left: -9px;
    clip-path: polygon( 0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50% );
    padding-left: 8px;
}

    .chevron-step.first {
        margin-left: 0;
        clip-path: polygon( 0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100% );
        border-top-left-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
        padding-left: 15px;
    }

    .chevron-step.last {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%);
        border-top-right-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
        padding-right: 10px;
    }

    .chevron-step.first.last {
        clip-path: none;
    }

    .chevron-step.active {
        background-color: #0d6efd;
        color: black;
        font-weight: 600;
        /*filter: opacity(60%);*/
    }

    .chevron-step.completed {
        background-color: #28a745;
        color: rgb(229, 229, 229);
        font-weight: 600;
    }

    .chevron-step.pending {
        color: #acacac;
        background-color: #5d5d5d;
        /*filter: opacity(30%);*/
    }

.step-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

.step-title {
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.step-title.active {
    padding: 2px 5px;
    border: 1px solid white;
    border-radius: 4px;
}

.current-step-info {
    margin-top: 20px;
    padding: 16px;
    background: #e7f3ff;
    border-radius: 6px;
    border-left: 4px solid #0d6efd;
}

    .current-step-info h4 {
        color: #0d6efd;
        margin-bottom: 8px;
    }

    .current-step-info p {
        color: #495057;
        margin: 0;
    }

@media (max-width: 768px) {
    .chevron-progress-container {
        flex-direction: column;
        align-items: stretch;
    }

    .chevron-steps-wrapper {
        overflow-x: auto;
        padding-bottom: 10px;
    }

    .chevron-step {
        min-width: 100px;
        height: 36px;
        margin-left: -8px;
        clip-path: polygon( 0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50% );
        padding-left: 8px;
    }

        .chevron-step.first {
            margin-left: 0;
            clip-path: polygon( 0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100% );
            padding-left: 15px;
        }

        .chevron-step.last {
            clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100%, 10px 50% );
        }
}




/* Most reliable approach: Use attribute selectors */
.icon-after-reliable [type="button"],
.icon-after-reliable button {
    display: flex !important;
    align-items: center !important;
}

/* Target elements that look like icons (common patterns) */
.icon-after-reliable [class*="icon"]:not([class*="dropdown"]),
.icon-after-reliable [class*="fa-"]:not([class*="dropdown"]),
.icon-after-reliable i:not([class*="dropdown"]) {
    order: 10 !important;
    margin-left: 6px !important;
    margin-right: 0 !important;
}

/* Target elements that look like text */
.icon-after-reliable [class*="text"],
.icon-after-reliable [class*="caption"],
.icon-after-reliable span:not([class*="icon"]):not([class*="fa-"]) {
    order: 5 !important;
}

/* Keep dropdown-related elements at the end */
.icon-after-reliable [class*="dropdown"],
.icon-after-reliable [class*="caret"],
.icon-after-reliable [class*="arrow"] {
    order: 15 !important;
    margin-left: 4px !important;
}