/* Billing pages: right-align numeric columns and amounts in tables and definition lists */
.billing-page table th.text-right,
.billing-page table td.text-right,
.billing-page table th.text-num,
.billing-page table td.text-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.billing-page dl.grid > dd.text-right,
.billing-page .billing-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.billing-page .billing-preview-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.billing-page .billing-preview-line .billing-line-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.billing-page td.text-right .form-control,
.billing-page td.text-num .form-control {
    align-items: flex-end;
}

.billing-page td.text-right .input-group,
.billing-page td.text-num .input-group {
    justify-content: flex-end;
}

/* Billing period year/month dropdowns — menu matches trigger width */
.billing-page #billing-period-form {
    margin-bottom: 5px;
}

.billing-page .billing-period-dropdown {
    display: inline-block;
    position: relative;
}

.billing-page .billing-period-year-dropdown {
    width: 5.75rem;
}

.billing-page .billing-period-month-dropdown {
    width: 11rem;
}

.billing-page .billing-period-dropdown-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.billing-page .billing-period-dropdown .dropdown-content {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

.billing-page .billing-period-dropdown .menu li > button {
    justify-content: flex-start;
}