/* bootstrap overrides */
.form-floating.form-floating-sm > .form-control,
.form-floating.form-floating-sm > .form-control-plaintext {
    padding: inherit;
}

.form-floating.form-floating-sm > .form-control,
.form-floating.form-floating-sm > .form-control-plaintext,
.form-floating.form-floating-sm > .form-select {
    padding: 0.32rem 0.75rem;
    background-color: white;
    min-height: auto;
    height: inherit;
    /* min-height: inherit; */
    line-height: inherit;
}

.form-floating.form-floating-sm > .form-control-plaintext ~ label,
.form-floating.form-floating-sm > .form-control:focus ~ label,
.form-floating.form-floating-sm > .form-control:not(:placeholder-shown) ~ label,
.form-floating.form-floating-sm > .form-select ~ label {
    color: rgba(var(--bs-body-color-rgb), 0.65);
    transform: scale(0.9) translateY(-0.9rem) translateX(0.1rem);
    background-color: white;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
    line-height: 1;
}

.form-floating.form-floating-sm > label {
    position: absolute;
    top: 0;
    left: 0.75rem;
    margin-bottom: 0;
    z-index: 2;
    padding: 0 0;
    height: auto;
    font-size: 14px;
    padding-top: 0.37rem;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: var(--bs-border-width) solid transparent;
    transform-origin: 0 0;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.auth-main .auth-wrapper.v3 .auth-form {
    background: url(../../arpus.svg) left center
        no-repeat !important;
}

.app-brand {
    color: #2f2f2f !important; /* dark gray */
}

.app-logo {
    height: 25px;
    filter: brightness(0) saturate(0%) opacity(0.75);
    /* bikin logo jadi abu-abu gelap tanpa ubah file SVG */
}

.app-brand-text {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1;

    color: #4b4b4b;
    font-family: "Inter", sans-serif; /* opsional tapi recommended */
}

/* Mobile responsive */
@media (max-width: 576px) {
    .app-brand-text {
        font-size: 1rem;
    }
}

.section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
}

.section-header .section-number {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 2.375rem;
    font-size: 1.125rem;
    font-weight: 500;
    inline-size: 2.375rem;
    border-radius: 0.375rem;
    background-color: var(--bs-primary);
    box-shadow: 0 0.125rem 0.25rem rgba(var(--bs-primary-rgb), 0.4);
    color: #fff;
}

.section-header .section-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.section-header .section-content .section-title {
    color: var(--bs-primary);
    font-weight: 500;
    line-height: 1.375rem;
    font-size: 0.9375rem;
}

.section-header .section-content .section-subtitle {
    margin: 0;
    color: var(--bs-body-color);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
}

#manual-return-legend {
    display: flex;
    gap: 20px; /* jarak antar legend */
    align-items: center;
    justify-content: flex-end;
}

#manual-return-legend .legend-item {
    display: flex;
    align-items: center;
    font-size: 14px;
}

#manual-return-legend .legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
    margin-right: 6px;
}

.chart-legend {
    display: flex;
    gap: 20px; /* jarak antar legend */
    align-items: center;
    justify-content: flex-end;
}

.chart-legend .legend-item {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.chart-legend .legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
    margin-right: 6px;
}