/* ── Budget Scope Checkboxes ──────────────────────────────────────────────
   Add these rules to budget.css
   ────────────────────────────────────────────────────────────────────── */

.budget-scope-grid {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .5rem;
}

.budget-scope-item {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    grid-template-rows: auto auto;
    column-gap: .6rem;
    align-items: start;
    padding: .6rem .75rem;
    border: 1px solid var(--glass-stroke);
    border-radius: 8px;
    background: rgba(248, 250, 252, .7);
    cursor: pointer;
    transition: background .15s, border-color .15s;
    user-select: none;
}

    .budget-scope-item:hover {
        background: rgba(239, 246, 255, .9);
        border-color: rgba(37, 99, 235, .25);
    }

    .budget-scope-item:has(input:checked) {
        background: rgba(239, 246, 255, .95);
        border-color: rgba(37, 99, 235, .35);
    }

.budget-scope-master {
    border-color: rgba(99, 102, 241, .3);
    background: rgba(238, 242, 255, .6);
}

    .budget-scope-master:has(input:checked) {
        background: rgba(224, 231, 255, .9);
        border-color: rgba(99, 102, 241, .5);
    }

.budget-scope-check {
    grid-row: 1 / 3;
    margin-top: .2rem;
    width: 1rem;
    height: 1rem;
    accent-color: #2563eb;
    cursor: pointer;
    flex-shrink: 0;
}

.budget-scope-label {
    grid-column: 2;
    font-size: .82rem;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: .35rem;
}

    .budget-scope-label i {
        color: #6366f1;
        font-size: .75rem;
    }

.budget-scope-desc {
    grid-column: 2;
    font-size: .73rem;
    color: #64748b;
    line-height: 1.4;
    margin-top: .1rem;
}

.budget-scope-divider {
    height: 1px;
    background: var(--glass-stroke);
    margin: .15rem 0;
}

.budget-scope-warning {
    margin-top: .5rem;
    padding: .45rem .65rem;
    background: rgba(254, 243, 199, .8);
    border: 1px solid rgba(245, 158, 11, .3);
    border-radius: 6px;
    font-size: .77rem;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.budget-form-hint-inline {
    font-size: .72rem;
    font-weight: 400;
    color: #64748b;
    margin-left: .4rem;
}

/* Scope pill — shown on the contract bar and account cards */
.budget-scope-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 99px;
    font-size: .7rem;
    font-weight: 500;
    background: rgba(238, 242, 255, .8);
    border: 1px solid rgba(99, 102, 241, .25);
    color: #4338ca;
}

    .budget-scope-pill i {
        font-size: .65rem;
    }