.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0.5rem;
}

.checkbox-label input[type="checkbox"] {
    margin-right: 0.5rem;
}

/* Fix oversized checkbox caused by global .form-group input height */
.category-form .checkbox-label input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    margin-right: 0.5rem !important;
    vertical-align: middle !important;
    appearance: auto !important;
}

.fixed-badge {
    margin-left: 0.5rem;
    font-size: 0.7rem;
    opacity: 0.8;
}

.badge {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    background: #e5e7eb;
    color: #374151;
}
.category-tag {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            border-radius: 1rem;
            color: white;
            font-weight: 500;
            font-size: 0.875rem;
        }

        .fixed-badge {
            margin-left: 0.5rem;
            font-size: 0.7rem;
            opacity: 0.9;
        }

        .badge {
            padding: 0.25rem 0.75rem;
            border-radius: 0.375rem;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .badge.fixed {
            background: #dcfce7;
            color: #166534;
            border: 1px solid #bbf7d0;
        }

        .badge.variable {
            background: #fef3c7;
            color: #92400e;
            border: 1px solid #fde68a;
        }

        .type-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 0.375rem;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .type-badge.income {
            background: #dcfce7;
            color: #166534;
        }

        .type-badge.expense {
            background: #fee2e2;
            color: #991b1b;
        }

        .color-preview {
            width: 2rem;
            height: 2rem;
            border-radius: 0.375rem;
            border: 2px solid #e5e7eb;
        }

        .checkbox-label {
            display: flex;
            align-items: center;
            cursor: pointer;
            margin-bottom: 0.5rem;
        }

        .checkbox-label input[type="checkbox"] {
            margin-right: 0.5rem;
        }

        .form-help {
            display: block;
            color: #6b7280;
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }

        .action-buttons {
            display: flex;
            gap: 0.5rem;
        }

        .action-buttons form {
            margin: 0;
        }

/* Limit the main category name textbox so it doesn't become gigantic */
.category-form input#name {
    max-width: 420px; /* previous comfortable width */
    width: 100%; /* still responsive on small screens */
    box-sizing: border-box;
}