/* -------------- Panel Config Root -------------- */
.panel-config {
    width: 100%;
    max-width: 80vw;
    margin: 0 auto;
}


    /* -------------- Card Styling -------------- */
.panel-config .card {
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    padding: 0;
    width: 100%;
    max-width: 80vw;
    margin: 0 auto;
}

.panel-config .card-body {
    padding: var(--minimalist-padding-card);
}

.panel-config .card-header h3 {
    font-size: 1.25rem;
    margin: 0;
}

/* -------------- Form Group Styling -------------- */
.panel-config .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* -------------- Label Styling -------------- */
.panel-config .form-label {
    margin-bottom: 0;
    font-weight: 600;
}

/* -------------- Input Group Styling -------------- */
.panel-config .input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}

.panel-config .input-group .form-control {
    flex: 1 1 auto;
    width: 100%;
    min-width: 58px;
    box-sizing: border-box;
}

/* Unit element styling */
.panel-config .input-group .input-group-text,
.panel-config .input-group .btn,
.panel-config .input-group .input-group-append {
    flex: 0 0 auto;
    white-space: nowrap;
}

    .panel-config .input-group .input-group-text.unit {
        flex: 0 0 auto;
        min-width: 3.5rem; /* Fixed minimum width for alignment */
        text-align: center;
        justify-content: center;
        display: flex;
        align-items: center;
        padding-inline: 0.5rem;
    }
/* Ensure reset button matches height */
.panel-config .input-group .btn {
    height: auto;
    padding: 0 1rem;
}

    /* Info buttons inside labels */
    .panel-config .btn-hint {
        padding: 0.15rem 0.4rem;
        font-size: 0.75rem;
        margin-left: 0.25rem;
        line-height: 1;
    }

    /* Validation message */
    .panel-config .text-danger {
        font-size: 0.85rem;
        margin-top: 0.25rem;
    }

    .panel-config .input-group .btn-reset {
        flex: 0 0 auto;
        min-width: 3.5rem;
        height: 100%;
        border-radius: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        white-space: nowrap;
        border: 1px solid var(--bs-border-color, #ced4da);
        background-color: #ffc107;
        color: #000;
    }
    .panel-config .input-group .input-group-text.unit,
    .panel-config .input-group .btn-reset {
        border-radius: var(--bs-border-radius);
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    /* Reset spacing for inputs */
    .panel-config .input-nitro {
        text-align: center;
    }

    /* Bootstrap row/col adjustments */
    .panel-config .row > [class*="col"] {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Card Footer Buttons */
    .panel-config .card-footer {
        display: flex;
        justify-content: center;
        gap: 2rem;
        flex-wrap: wrap;
    }

/* Optional: limit popover width */
.popover {
    max-width: 240px;
}