@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css");

td.form-control-cell {
    padding: 0;
}

/* Tabs */
ol.progress.list-group.top {
    background-color: transparent;
    gap: var(--spacing-md);
}

ol.progress li.list-group-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

ol.progress li.list-group-item.text-muted.list-group-item-success {
    font-size: var(--font-size-body);
    border-radius: var(--border-radius-lg);
    background-color: white;
    color: var(--color-success) !important;
    border: 2px solid var(--color-success);
}

/* Replace FA check with Bootstrap Icons check-circle for completed steps */
ol.progress li.list-group-item.text-muted.list-group-item-success::before {
    content: "\F26B";
    font-family: "bootstrap-icons";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: bottom;
    width: 1.25em;
    height: 1.25em;
    line-height: 1;
    font-size: 1.1em;
    margin-right: var(--spacing-md);
    color: currentColor;
}

/* Hide any Font Awesome spans within progress items */
ol.progress li .fa,
ol.progress li [class^="fa-"],
ol.progress li [class*=" fa-"] {
    display: none !important;
}

ol.progress li.list-group-item.active {
    font-size: var(--font-size-body);
    border-radius: var(--border-radius-lg);
    background-color: white;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary);
    margin-top: 0px !important;
}

ol.progress li.list-group-item.active::before {
    content: "\F28A";
    font-family: "bootstrap-icons";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: bottom;
    width: 1.25em;
    height: 1.25em;
    line-height: 1;
    font-size: 1.1em;
    margin-right: var(--spacing-md);
    color: currentColor;
}

ol.progress li.list-group-item.incomplete {
    font-size: var(--font-size-body);
    border-radius: var(--border-radius-lg);
    background-color: white;
    color: var(--input-border-color) !important;
    border: 2px solid var(--input-border-color);
    margin-top: 0px !important;
}

/* Specials */
button.btn.btn-default.launchentitylookup {
    border-width: 1px 1px 1px 0px;
    border-color: var(--input-border-color);
    height: 100%;
    background-color: white;
    color: var(--color-primary);
}

button.btn.btn-default.clearlookupfield {
    border-width: 1px 1px 1px 0px;
    border-color: var(--input-border-color);
    height: 100%;
    background-color: var(--color-primary);
    color: white;
}

div.actions {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

div.actions>.col-md-6.clearfix {
    width: auto;
    flex-grow: 1
}


@media (max-width: 576px) {
    div.actions {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--spacing-md);
    }

    div.actions>button {
        width: 100%;
        float: none !important;
        margin-bottom: var(--spacing-xl);
    }

    div.actions>.col-md-6.clearfix {
        width: 100%;
        flex-grow: 0;
    }

    div.actions .btn-group.entity-action-button {
        width: 100%;
    }

    div.actions .entity-action-button>input.btn,
    div.actions .entity-action-button>button.btn {
        margin-bottom: var(--spacing-sm);
        width: 100%;
    }
}

div.input-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: stretch !important;
}

.input-group-text {
    border-width: 1px 1px 1px 0px;
    border-color: var(--input-border-color);
    height: 100%;
    background-color: white;
    color: var(--color-primary);
}

.input-group-addon {
    border-width: 1px 1px 1px 0px;
    border-color: var(--input-border-color);
    height: 100%;
    background-color: white;
    color: var(--color-primary);
}


/* If the the input in an input-group is readonly the .input-group-text should not have a border */
.input-group input[readonly="readonly"]+.input-group-text {
    border: none;
}

input.text.form-control.lookup.form-control {
    border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
    border-color: var(--input-border-color);
}

label.field-label {
    font-size: var(--font-size-body);
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
}

div.description {
    color: var(--primary-foreground);
    font-size: var(--font-size-body);
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
}

div.description.above {
    margin-bottom: var(--spacing-sm);
}

div.description.below {
    margin-top: var(--spacing-sm);
}

/* Override: ensure first/last progress items keep rounded corners (overwrite any zero-radius rules) */
html[dir="ltr"] ol.progress.bottom li.list-group-item:first-child,
html[dir="ltr"] ol.progress.bottom li.list-group-item:last-child,
html[dir="ltr"] ol.progress.top li.list-group-item:first-child,
html[dir="ltr"] ol.progress.top li.list-group-item:last-child {
    border-top-left-radius: var(--border-radius-lg) !important;
    border-top-right-radius: var(--border-radius-lg) !important;
    border-bottom-left-radius: var(--border-radius-lg) !important;
    border-bottom-right-radius: var(--border-radius-lg) !important;
}

td.checkbox-cell {
    display: flex !important;
    flex-direction: row-reverse;
    justify-content: flex-end;
}