/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */


.modal-sticky-footer {
  position: sticky;
  bottom: 0;
  z-index: 1000;
  background-color: white;
  border-top: 1px solid #dee2e6;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

.quick-button-label {
    font-size: clamp(0.65rem, 1.1vw, 0.85rem);
    line-height: 1.2;
    word-break: break-word;
    white-space: normal;
    max-width: 100%;
}
    /* Wizard navigation styles */
    .wizard .nav-tabs {
        border-bottom: none;
        position: relative;
    }

    .wizard .nav-tabs::after {
        content: "";
        width: 80%;
        border-bottom: 2px solid #ccc;
        position: absolute;
        top: 30px;
        /* Adjusted to align with circle centers */
        left: 10%;
        z-index: -1;
    }

    /* Fixed width for all step items */
    .wizard .nav-item {
        text-align: center;
        position: relative;
        width: 100px;
        min-width: 100px;
        max-width: 100px;
        flex-shrink: 0;
    }

    .wizard .nav-item .nav-link {
        width: 60px;
        height: 60px;
        border: 2px solid #ccc;
        border-radius: 50%;
        background: #fff;
        color: #ccc;
        padding: 0;
    }

    .wizard .nav-item .nav-link.active {
        border-color: #0dcaf0;
        color: #0dcaf0;
    }

    .wizard .nav-item .nav-link.disabled {
        border-color: #ccc;
        color: #ccc;
        pointer-events: none;
        cursor: default;
        opacity: 1;
    }

    .wizard .nav-item .nav-link::after {
        content: " ";
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        border: 10px solid transparent;
        border-top-color: #0dcaf0;
        opacity: 0;
        transition: opacity 0.1s;
    }

    .wizard .nav-item .nav-link.active::after {
        opacity: 1;
    }

    /* Step label with ellipsis for long text */
    .wizard .step-label {
        display: block;
        width: 100%;
        max-width: 100px;
        margin: 0 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.75rem;
        line-height: 1.2;
        padding: 0 5px;
    }
    
    .wizard .table-invalid {
        border: 2px solid #dc3545;
    }

    /* Alternative: 2-line wrap instead of ellipsis (uncomment if preferred) */
    /*
.wizard .step-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    min-height: 2.4em;
    max-height: 2.4em;
    line-height: 1.2;
}
*/



/* Sticky bottom action bar */
.sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 1030;
    background: #fff;
    padding: 12px 15px;
    border-top: 1px solid #dee2e6;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, .08);

    /* Keep actions in view for long tab content */
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Extra spacing so content above doesn't get covered */
.tab-pane {
    padding-bottom: 100px;
}


@media (max-width: 576px) {
    .sticky-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sticky-actions button {
        width: 100%;
    }
}


.sticky-actions {
    justify-content: space-between;
}


.skipped-row {
    background-color: #fff7cc !important;
    opacity: 0.95;
}